发表于: 2019-05-17 23:29:43
1 866
今天完成了什么
1优化任务5代码
2完成部分任务6
3.学习css代码规范。
4.复习前面学习的知识。
遇到了什么问题:
优化代码的时候很多方面要重新布置结构,
切图的时候前面基础没打好,看到图层那么复杂操作了许久还是不会,虽然简单的切图会,但绝对还是要专门研究下,同时今天尝试了用在线雪碧图去制作,但是还是不懂,明天继续跟进。
今天收获了什么:
代码规范,更深入了解切图和网页布局,切图有很多方法,传统一个个切的方法太费神。
做任务5的时候头部出现问题查了下资料另外了解到了display:inline 和display:block的用法了,他们的作用是将块级元素转化为内联元素或者是内联元素转化为块级元素。
是元素具备了两种(块级和内联)元素的功能,inline最重要的一点就是:元素能够在一行展示,而inline元素所缺失的设置宽高,也是block 元素的功能,总之inline-block它同时具备了block和inline两者的功能。
2.css代码规范:
空格 (这个学到很多,之前空格很多都瞎用)
选择器与{之间必须要有空格,列表型属性值 书写在单行时,, 后必须跟一个空格。
选择器与 >、+、~ 选择器的两边各保留一个空格
属性选择器中的值必须用双引号包围。
当一个 rule 包含多个 selector 时,每个选择器声明必须独占一行。
属性
属性定义必须另起一行。
[属性定义后必须以分号结尾。
颜色
RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb() 颜色值可以缩写时,必须使用缩写形式。
颜色值不允许使用命名色值。颜色值中的英文字符采用小写。如不用小写也需要保证同一项目内保持大小写一致。
长度
长度为 0 时须省略单位。 (也只有长度单位可省)
3.学习css几种居中(水平居中和垂直居中)的方式
css图片水平居中:利用margin: 0 auto实现图片水平居中
利用文本的水平居中属性text-align: center
css图片垂直居中:利用高==行高实现图片垂直居中 这种方法是要知道高度才可以使用,
利用table实现图片垂直居中
利用绝对定位实现图片垂直居中
移动端可以利用flex布局实现css图片垂直居中。
明天计划:
完成任务6部分
评论