今天完成的事情：

1.学习了一下代码的class命名规范，重新为任务8的代码规范命名

2.提交了任务9

3.完成了任务10的头部还有顶部导航栏

明天计划的事情：

1.继续做任务10

遇到的问题：

1.当代码模块比较多的时候，代码的类名需要起得比较多，这时候会起名困难，可以根据内容的分类和框架的类型翻译成英文单词来命名，这个也是通常的命名规则。

收获：

1.编码命名规范

在做开发时要遵守一定的编码命名规范，原因：

（1）可以尽可能的减少一个软件的维护成本，并且几乎没有任何一个软件，在其整个生命周期中，均由最初的开发人员来维护；

（2）可以改善软件的可读性，可以让开发人员尽快而彻底地理解新的代码；

（3）可以最大限度的提高团队开发的合作效率；

（4）长期的规范性编码还可以让开发人员养成好的编码习惯，甚至锻炼出更加严谨的思维。

一些常用的class命名规则：

布局类：header, footer, container, main, content, aside, page, section

包裹类：wrap, inner

区块类：region, block, box

结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span

列表类：list, item, field

主次类：primary, secondary, sub, minor

大小类：s, m, l, xl, large, small

状态类：active, current, checked, hover, fail, success, warn, error, on, off

导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last

交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,

星级类：rate, star

分割类：group, seperate, pider

等分类：full, half, third, quarter

表格类：table, tr, td, cell, row

图片类：img, thumbnail, original, album, gallery

语言类：cn, en

论坛类：forum, bbs, topic, post

方向类：up, down, left, right

其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...

2.BFC块

（1）BFC概念

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

（2）触发BFC

只要元素满足下面任一条件即可触发 BFC 特性：

body 根元素

浮动元素：float 除 none 以外的值

绝对定位元素：position (absolute、fixed)

display 为 inline-block、table-cells、flex

overflow 除了 visible 以外的值 (hidden、auto、scroll)

(3)BFC 特性及应用

a.同一个 BFC 下外边距会发生折叠

比如：

从效果上看，因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。这不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。

b.BFC 可以包含浮动的元素（清除浮动）

比如：

本来由于容器内元素浮动，会脱离文档流。如果触发容器的 BFC，那么容器将会包裹着浮动元素。

c.BFC 可以阻止元素被浮动元素覆盖

比如下面一个例子：

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>

<div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动, 

也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>

效果图如下：

这时候其实第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可触第二个元素的 BFC 特性，在第二个元素中加入 overflow: hidden，就会变成：

这个方法可以用来实现两列自适应布局，效果不错，这时候左边的宽度固定，右边的内容自适应宽度(去掉上面右边内容的宽度)。

进度：css任务9

任务开始时间：2018.6.9

预计demo时间：2018.6.9

是否有延期风险：无

禅道：http://task.ptteng.com/zentao/project-task-719.html

任务总结：

任务名称：CSS=TASK8、9

成果链接：https://huangbaihei.github.io/task8/task8/html/task8-1.html

任务耗时：2018.6.4-2018.6.8(4天)

技能脑图：

1.官方脑图：

2.个人脑图：

任务总结：

1.因为来线下之前已经做过一些了，所以4天刚好做完，没有延期，进度控制还可以；

2.页面中用了很多bootstrap插件，比如轮播图，响应式导航栏，面包屑导航等，在用这些插件时，应该弄清楚有关的属性，这样方便修改插件的默认样式；

3.代码class属性的命名应该语义化，之前图方便都大量使用拼音来命名，之后应多采用规范的英文来优化代码属性的命名；

4.在实现页面的响应式时大部分采用了bootstrap的栅格布局自带的响应式布局，还有一些采用了媒体查询；

5.页面中很多布局都是采用了bootstap中的栅格还有div加上padding来实现。