今天完成的事情：

1.根据师兄的建议修改了任务8并提交

2.写了任务8的任务总结，了解了一下wiki，坑乎，禅道的用法

明天计划的事情：

1.学习一下代码的class命名优化任务8的代码

2.提交任务9，完善任务9的任务总结

3.开始任务10

遇到的问题：

1.在屏幕宽度缩小时，文字没有环绕图片，如图：

请教了师兄，将图片所在的盒子使用了float浮动后就实现了文字环绕，但是父级盒子没有清除浮动，使下面的内容往上蹭，样式崩了，如图：

最后在父级盒子使用overflow: hidden清除了浮动，这样就不对下面的内容造成影响了。

收获：

1.HTML/CSS实现文字环绕图片布局

（1）利用图片属性实现

比如如下代码：

<p style="width:400px;">

    <img src="images/bkjj.jpg" align="right" width="120" hspace="5" vspace="5">

    HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环     绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局     HTML文字环绕图片布局HTML文字环绕图片布局

</p>

效果图如下：

如果想让图片居左，文字在右环绕，可以将align属性设置为left，其中 vspace 表示图片与文字的上下距离，hspace表示左右距离。

（2）利用CSS属性实现

比如如下代码：

<div style="width:400px;">

    <div style="float:left; clear: both;" align="center">

        <img src="images/bkjj.jpg" width="120" alt="" hspace="8"><br /> 图像标题

    </div>

    CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片     布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕     图片布局CSS文字环绕图片布局

</div>

效果图如下：

修改float=”right” 即可实现图片在右，文字在左环绕；修改float=”none” 即可实现图片与其标题独占一行。使用这种方法一定要注意清除浮动，不然会对后面的元素产生影响。

2.清除浮动的方法

浮动的框可以左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。

清除浮动四种方法：

（1）使用overflow属性来清除浮动

　　　 .ovh{

　　　　　　overflow:hidden;

　　　　　}

先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.

（2）使用额外标签法

　.clear{

　　　　　　clear:both;

　　　　　}

在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.

（3）使用伪元素来清除浮动

　.clearfix:after{

　　　　　　content:"";//设置内容为空

　　　　　　height:0;//高度为0

　　　　　　line-height:0;//行高为0

　　　　　　display:block;//将文本转为块级元素

　　　　　　visibility:hidden;//将元素隐藏

　　　　　　clear:both//清除浮动

　　　　　}

 .clearfix{

　　　　　　zoom:1;为了兼容IE

　　　　}

（4）使用双伪元素清除浮动

　    .clearfix:before,.clearfix:after {

                  content: "";

                  display: block;

                  clear: both;

            }

            .clearfix {

                  zoom: 1;

            }

进度：css任务8

任务开始时间：2018.6.4

预计demo时间：2018.6.8

是否有延期风险：无

禅道：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来实现。