- 语义化。
（1）关系到列表，就用ul li ol
（2）一个页面最好一个h1，接下来的标题副标题就用h2-h6嵌套下去
（3）记得写UTF-8编码，别偷懒 - banner的遮罩层。
（1）背景图+放内容的div背景透明，但是IE下css的rgba用不了。
（2）IE下遮罩可用div绝对定位opcaty属性，内容div与遮罩同级，且设定relative才可用z-index设置层次 - 用chrome选择鼠标的指向作为参考，指向那一块就是那一块，层级关系尽量明确
- body文档高度小于屏幕高度，footer块的“粘底”处理
- 规范
（1）命名规范与参考
（2）sass设计模式[base,layout,modle,theme,state] - 分文件
（3）pug文件分放，主页面，用一个文件夹专门放，块页面,命名_x，加主页面的字母 - padding 与 margin 用法
padding用在元素与内容之间，限制内容起始
margin用在元素与元素之间，有折叠效应 - tip：
（1）抽取函数，算width or padding margin
（2）尽量不定义height，让css自由撑开高度
（3）text-align:center可继承耶 - 新知识点：
（1）css/sass使用
a .background-clip：定义背景涵盖部分,有content-box,padding-box,border-box
b .chrome鼠标选择指向的div有显示宽高，但是该数值包含padding的值
c .width和height的值都只是表示content部分
d .设置background图片,要设置bg-repeat,bg-position等属性
e .transition的skew设置平行四边形的两边之间的角度，rotate是图形旋转
f .hr水平线垂直 border: 1px solid $lightGrey; height: 112px;
g .linear-gradient设置渐变
- border线性渐变： -webkit-border-image: -webkit-linear-gradient(#F5F5F5, rgba(0,0,0,0) ) 16 39%;/* boder渐变效果：不知道后面那两个值是什么，但是调成这个值目前的应用效果最好 */
- border对半色调：border-image: -webkit-linear-gradient(0deg, #212320 118px, #1A1C1A 116px) 30 %;
- bg对半色调：background: linear-gradient(90deg, #8B6239 120px, #7D5833 57px);
h .清除浮动
- 列表元素：clear:both 占住一个空位，继续排队
- 父元素:after 内全部子元素浮动，清除浮动 display: block; clear: both; content: '';
j. transform写法，先写全部带前缀的transform，最后写transform
i. CSS六边形,全填充，现成代码
（2）jade使用
a. !{} 不转义字符串,注意是字符串
b. +xxx xxx是mixin的定义，可带参数（掌握熟悉）
c. ：before 与:after是两个div
d. if(classes.xx) xx若无或''不会，不会进去，也可条件div(class=item)(class=classes[item]?classes[item]:'')= data[item]
e. class确定时，如active，就可以这样简写class={active:index==1}
【存档】仿官网第一版总结
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
