今天完成的事情

        第三页面的布局：把昨晚剩下的页面内容布局完毕。

        半透明：百度搜寻半透明，得到的是opacity 属性，该效果可以使用，但是需要里面的两个框不同在半透明的DIV，所以重新找方法更容易的实现效果，于是找到了一行代码 background: rgba(0,0,0, 0.5); 设置背景色时 使用 rgba ，  （0，0，0，）指的是颜色的rgb值，该值可以通过PS颜色取样工具查询到。  （ 0.5 ）值的是透明层度 0-1 1为不透明。

        三页面相互转换：给三个页面实现相互跳转效果，使用 <a> 标签，让页脚底部的框可以实现跳转，同时也给页眉顶部切入的雪碧图赋予跳转效果。

深度思考

1.什么是CSS sprites?

       CSSSprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

2.什么是浮动？有哪些清除浮动的方法？

        浮动最开始出现的本意是用来让文字环绕图片，浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素才会停下来。

        常见的清除浮动的方法。

（1）、clear属性left:元素左侧不允许有浮动元素right:元素右侧不允许有浮动元素both:元素左右两侧均不允许有浮动元素none:默认值，允许浮动元素出现在两侧

（2）、给浮动元素父级设置高度高度塌陷是应为给浮动元素的父级高度是自适应导致的，那么我们给它的设置适当的高度就可以解决这个问题了.缺点：在浮动元素高度不确定的时候不适用

（3）以浮制浮（父级同时浮动）缺点：需要给每个浮动元素父级添加浮动，浮动多了容易出现问题。计算BFC的高度时，浮动元素也参与计算float属性不为noneposition为absolute或fixeddisplay为inline-block, table-cell, table-caption, flex, inline-flexoverflow不为visible

（4）br 清浮动br 标签自带clear属性，将它设置成both其实和添加空div原理是一样的。

（5）使用AFTER伪元素通过父元素的::after伪元素来生成浮动元素的兄弟元素，然后兄弟元素使用clear:both方法。

3.rgba和opacity的透明效果有什么不同？display和visiblity有什么区别？

opacity 中文翻译为：不透明度。
取值: value 不透明度，从0.0(透明)到1.0（不透明）。

明天计划的事情

        任务7通过就开始任务8

遇到的困难

        半透明知识点通过操作练习一番便可熟悉，之后便较容易完成。

        深度思考也叫容易理解，但是关于浮动，为什么要清楚呢。

收获

        学到了半透明、相互跳转页面等知识点。