发表于: 2019-07-19 00:03:29

1 926


7月18日报

今天完成的事情: 继续任务四利用input输入框的border左边框颜色加了一个竖线,调整屏幕大小时两个小图标由于单位%的原因会变的有些“突出”改用px固定大小后变正常。大致把任务四模仿的差不多,没有用flex布局用的是position绝对定位,看了一些师兄的日报感觉flex布局做起来比较简单,flex布局提供的功能很方便。

看了一些任务五的要求,把代码规范看了一遍,代码按照规范后对后续调整和观看有很大的帮助,记住一些常用的规范:

必须使用utf-8编码(具有更广泛的适应性);

使用四个空格做一个缩进层级,不允许使用两个空格或tab字符

选择器与 { 之间必须包含空格

属性名与之后的  : 之间不允许有空格,  : 与后面的属性必须有空格

列表型属性值写在单行时  ,  后面必须跟一个空格

每行不能超过120个字符,除非单行不可分割,对于超长的URL在样式的空格或  ,  后换行

当包含多个选择器时每个选择器声名必须独占一行

属性选择器中的值必须用双引号包围(不能用单引也不能 不用引号)

属性定义时必须另起一行(方便看)属性后面必须用  ;  结尾

选择器嵌套层级不能大于3级

属性在可以缩进的情况下尽量使用缩进(减少代码数量看起来简洁)使用border/margin/padding等缩写时应注意实际情况(某个方向需要单独设置时要分开设置)

属性在书写时按功能分组可以提高可读性(位置/尺寸/文本相关/视觉效果)

元素需要撑起高度以包含内部的浮动元素时通过设置clear或触发BFC的方式进行尽量不要使用空标签

在不是必须的场合下尽量不要使用  !important  

可以使用Z-index来设置属性元素的堆叠顺序(仅能在定位元素上奏效)

数值是0-1的小数可以把0省略,URL的路径不用加引号,绝地路径可以省略协议名

长度为0时可以省去单位(只有长度单位可省略:padding:0 )

颜色使用RCB色彩时需用十六进制记号形式不允许使用rgb();颜色可以缩写时要缩写,不能直接命名色值 (统一颜色值的大小写)

属性前缀按长到短的方式排列,按冒号位置对齐:   .box{-webkit-box-sizing:border-box;

                                      -moz-box-sizing:border-box;

                                         box-sizing:border-box;}

明天:继续任务。。。

收获:代码规范



返回列表 返回列表
评论

    分享到