2016/8/18

今天完成的事：

1. 完成Task7-1,Task7-2；

2. 完成Task7-1轮播图，网页上其他图片用雪碧图完成；

3. Task7-1,Task7-2,的头部，导航，底部的样式链接外部样式表。

4. 开始Task8。

明天计划的事：

1.完成Task8；

今天遇到的问题：

1. 导航栏添加鼠标滑过有底部border的样式时，发现鼠标移上去，导航栏会跳动，原因是加了border以后高度变了，在鼠标滑过的样式里要把本身的高度减去多出来border的高度，这样就不会跳动了；

2. 轮播图最后一张图片结束，还有一段空白的，没弄明白为什么，师兄们看到了指点我一下呗；

3. 轮播图只是简单的自己滑动，没有实现鼠标点击切换图片；

4. 外部样式表会影响到内部的html，外部样式表和内部样式表相同的标签命名class或id的时候要区别开来；

5. <ul>和<li>标签是初始的margin值，下面代码已经声明<li>margin和padding为0，但是页面里面还是左右有边距，见Task7-1战略合作伙伴的几个图标的外框。

               ul.pater li{
     display: inline-block;
     margin:0;
     padding:0;
     width: 250px;
     height:180px;
     background-color: white;
 }

收获:

1. 了解用CSS实现简单的图片轮播；

2. 外部样式表供多个页面调用；

3. :nth-of-type(n) 来选择特定子元素，不需要再给子元素选择器命名class或id；

4. hover对包含的子元素进行样式设置，父元素选择器位于hover之前，子元素选择器位于hover之后，子元素与hover之间要加空格；

5.首行缩进，text-indent。

修改：感谢两位师兄给我解惑。

  问题1：通过杨宇飞师兄告知的方法，用box-sizing:border-box;使边框出现在元素内部，这样就不需要去减高度了。

  问题2：感谢沈墨空师兄，滑动多了一次，就把后面的空白带出来了。

  问题3：按照沈墨空师兄给的网站去参考，能点击切换图片，但是有问题存在，鼠标点击的时候图片切换，鼠标按住不放，图片不动，鼠标松开，图片会直接变成第一个，从头开始轮播，没找到问题在哪。http://119.10.57.69:880/jnshu042/test.html

  问题5：发现了<li>之间存在间距的原因，是因为<li>添加了display:inline-block。在网上找到去掉间距的方法->http://www.webhek.com/remove-whitespace-inline-block