任务总结：

任务名称：CSS-task8、9

成果链接：任务八、九

日报链接：任务八、九

任务耗时：2019.6.26-2019.7.2

个人脑图：

官方脑图：

任务总结：

1.代码规范很重要！代码规范很重要！代码规范很重要！将不同页面相同结构甚至一样的css单独写在一个css文件里，不同的html来调用，会节省时间，需要改动也可以改一个css，几个页面都统一变化，提高效率。写标签的时候每写一部分，添加注释，后期想要修改也容易找到是在哪部分，写属性的时候也应当按照布局方式，盒子尺寸，盒子边框，颜色等属性来依次添加，使得每个标签的属性都有条理，无论是查看还是修改都省事。

2.响应式布局指的就是在不同屏幕大小的情况下，网页会通过css的媒体查询规定不同情况的样式，使得html页面进行不同的布局，以此来适应屏幕大小，使得一个网站可以兼容多个终端，而不是每个终端写一份特定的版本。缺点则是加载时间长，有很多相对于当前设备无用的代码。移动带宽也会增多。而且对低版本浏览器不兼容。

3.学到了给盒子添加阴影效果，触发伪类的时候通过阴影效果使得单个盒子相对于其他会有视觉上的突出效果。

4.bootstrap的框架方便快捷，想要修改属性时可以按f12查看相应元素的标签是什么，然后自己写css覆盖进行修改，如果权重不够则添加!important。

5.css动画属性来做轮播图，需要注意的是在响应式的时候，屏幕变小后会使得原有的图片（盒子）数量因为过多而受挤压，使得图片（盒子）宽度变化，此时需要在相应的媒体查询里用display：none；来隐藏多余的图片（盒子），使得其不占空间。

6.列表的圆点可以用list-style-image: url(xxx.png);来插入图片，改变圆点。

7.表格的每列的尺寸可以先设定table-layout: fixed;使得列宽由表格宽度和列宽度设定。文本出现长单词不换行的情况时，可以给文本添加word-break: break-all;使其允许在单词内换行。

8.学习了页面整体布居，有定宽、自适应等方式，例如左侧为导航栏，右侧为主体内容，可以使左侧进行定宽，右侧主体进行自适应，左侧使用浮动，右侧则设置margin-left：xxxpx；来实现布局。