hercule_poirt
^

网页制作笔记

1. favicon.co

1）网站标题图标：网址/favicon.ico

（因为兼容性问题，应该与首页index.html一起放在根目录下）

2）ico的引入为<link rel=”shortcut icon” href=””/>

3）自制ico图标可以通过bitbug.net将图片转化成icon

2. SEO

seo即为搜索引擎所做的页面优化，即为爬虫更好搜索而优化

1） 三大标签title,description,keywords要写
<title></title>
<meta name=”description” content=”网站内容描述”/>
<meta name=”keywords” content=”网站关键词，用逗号分开”/>
2） 标题长度不宜超过28个中文（百度检索上线28个中文）

描述应在120个中文内, 关键词应在6~8个左右

3. 图标

1） 图标网站

icomoon.io

2） 通过在css样式后使用!important来赋予最高权重

4. CSS3

1） nth-child(n) 选择器(CSS3)

规定属于其父元素的第n个子元素的每个 p 的背景色

2）div:[attribute*=test] 选择器(CSS3)

选择class/titile等属性值包含 "test" 的所有 div 元素其中*是指全部标签检索”test”，实则只是等式。
重点: 正括号内可以写[正则表达式]

5. flex弹性布局（CSS3）

flex即Flexible Box，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
启动flex布局：在父元素中设置display:flex，开启flex布局

开启后所有子容器自动成为flex的项目（并开始自动排列,默认靠左排列）

一、 容器属性

flex-direction

容器内元素的排列方向(默认横向排列)

  1. flex-direction:row; 沿水平主轴让元素从左向右排列
  2. flex-direction:column; 让元素沿垂直主轴从上到下垂直排列
  3. flex-direction:row-reverse;沿水平主轴让元素从右向左排列

justify-content
元素在主轴（页面）上的排列

  1. justify-content : center;元素在主轴上居中排列
  2. justify-content : flex-start;元素在主轴上由左或者上开始排列
  3. justify-content : flex-end;元素在主轴上由右或者下开始排列
  4. justify-content : space-between;元素在主轴上左右两端或者上下两端开始排列，
    且间距相等，左右边界无间距
  5. justify-content : space-around;每个元素两侧的间隔相等。左右边界有间距

align-items
元素在主轴（页面）当前行的横轴（纵轴）方向上的对齐方式

  1. align-items : flex-start; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界（靠上对齐）。
  2. align-items : flex-end; 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。（靠下对齐）
  3. align-items : center; 弹性盒子元素在该行的侧轴（纵轴）上居中放置（垂直居中）
  4. align-items 元素在主轴（页面）当前行的横轴（纵轴）方向上的对齐方式

flex-wrap
flex-wrap: 容器内元素的换行(默认不换行)
flex-wrap: nowrap (默认)元素不换行

  1. 即如果子容器横向排列所需宽度大于父容器的宽度，子容器的宽度会被自动变更以适应父容器的宽度
  2. flex-wrap: wrap; 元素换行,与nowrap不同的是不会改变子容器的宽度，超过就换行

二、 项目属性

项目属性即对子容器内的元素操作

order:num
如.box:nth-child(1){ order:2;/将第一个子容器更改为第二个/}

在子容器内使用更改项目当前子容器的排列顺序

PS:此外可以通过在单个项目中使用align-self:flex-end，来实现单个子元素的单独居中对齐
flex-grow
用于决定项目在有剩余空间的情况下是否放大，默认不放大

（此处放大指自适应父元素的宽度而改变当前子元素的宽度）
默认0不放大，1放大

注意：
即使设置了定宽，放大依旧有效。
且假设默认第一个第二个项目是0模式，第三个为1，依然会占满剩余空间。

flex-shrink
用于决定项目在空间不足时是否缩小
默认1等比缩小，0不缩小
注意：即使设置了定宽，缩小依旧有效。
flex-basis
设置项目宽度
默认auto,以width为自身的宽度
设置了flex-basis的值后，权重是高于width的。

（即在设置了flex-basis和width两者的情况下，flex-basis会覆盖width）

flex-grow,flex-shrink,flex-basis三者可以在flex中设定
flex(flex-grow flex-shrink flex-basis)，默认(0 1 auto)
flex三项值有两个快捷值auto(1 1 auto)和none(0 0 auto)

6. background

background : color || image || repeat || attachment || position

关于url属性在../ /不起作用是，可以试试../../
image

  • background-color：设置颜色作为对象背景颜色

  • background-image：设置图片作为背景图片

  • background-repeat：设置背景平铺重复方向

  • background-attachment：设置或检索背景图像是随对象内容滚动还是固定的。

  • background-position：设置或检索对象的背景图像位置

  • background-size: length | percentage | cover | contain

♦ length 该属性值是设置背景图像的宽度和高度的，第一个值是宽度，第二个值是设置高度的。
如果只设置第一个值，那么第二个值会自动转换为 “auto”;

♦ percentage：该属性是以父元素的百分比来设置图片的宽度和高度的，第一个值是宽度，第二个值是高度。如果只设置一个值，那么第二个值会被设置为 “auto”;

♦ cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

♦ contain：把图像扩展至最大尺寸，以使宽度和高度 完全适应内容区域。

线性渐变linear-gradlient

  • linear-gradient(direction, color-stop1, color-stop2, ...)
    background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

♦ direction 用角度值指定渐变的方向（或角度）。
♦ color-stop1, color-stop2,... 用于指定渐变的起止颜色。

7. 键盘事件

document.body.addEventListener(‘keyup’,function(event){ })

通过在body添加全局的键盘侦听事件，从而实现键盘控制

需要注意的是KeyboardEvent.keyCode已废弃

该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。

可以通过用code,key来代替keycode的数字，code,key返回的是文字，更可观。

8. 其他

1) 设置圆形：

圆形在设置CSS时要设置宽度和高度相等，
然后设置border-radius属性为宽度或高度的一半(50%)即可。

2) mouse事件

1、mouseover和mouseout在父元素和其子元素都可以触发，当鼠标穿过一个元素时，触发次数得依子元素数量而言。

2、mouseenter和mouseleave只在父元素触发，当鼠标穿过一个元素时，只会触发一次。

3、mouseover和mouseout比mouseenter和mouseleave先触发

3) 有关于input的disabled属性引起的系统默认灰色背景

通过在css中引入input[disabled]来解决

input[disabled] {
    background: #ffffff;
    opacity: 1;
    color: black;
}

9. 在vue下app.vue中设置height:100%无效

设置高度100%时，div的高度会等同于其父元素的高度。

而上面中id为app的div（vue挂载的div）的父节点是body标签，body标签的父节点是html标签。
在默认情况下html和body标签的高度为auto，而浏览器是不会自动给标签添加高度的
所以html和body标签就为0，自然子div的高度设置为100%就不起作用了。

此时应该在App.vue文件style中添加如下代码:

html,body,#app{
	height: 100%;
	width: 100%;
}

10. 移动端H5网页a标签选中蓝色高亮解决方案

a{
   border: none;
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-tap-highlight-color: transparent;
  outline: none;
}
posted @ 2021-10-09 20:46  hercule_poirt  阅读(193)  评论(0)    收藏  举报
Copyright © 2021 hercule_poirt