一、前言
经过第一天以及第二天的联系已经完成网站的头部以及底部的导航，第三天将完整剩下的主体部分（请注意本次的京东三天主要是在于基础的复习而在于具体的实现，所以只是实现一部分内容。）
二、引入
在前两天的练习中我们主要实在复习一些基础的标签以及浮动、定位、层级等的用法。而在第三天的代码编写过程中我们更注重的运用这些只是去完成布局！
三、重点内容
㈠ 定位
只有当元素设置了定位(相对、绝对、固定)之后就会产生一个概念，我们把这个概念叫做层级。所谓层级就是类似于我们平时走的台阶，一层一层的叠加。那么有叠加那就一定会有数字上的差异，我们默认在每一个设置定位的元素上都有层级数0。而在同一位置上显示的时候一般后面的元素会覆盖前面的元素，所以为了让你需要的元素显示你就需要提高他的层级。（定位了的元素，如果不设置top、right、bottom、left值，默认会在原位以标准流的形式显示。）
㈡ 透明度
你也许有这样的经历，在网站上看到的一个元素是透明的。那这个如何设置呢？
① opacity:0.5;
② background-color：rgba(0,0,0,.2);
这两种方式都可以给元素设置透明性，但是不同的是opacity会存在兼容性的问题而且不但让背景透明还会让里面的内容透明。rgba就不会出现这样的问题
㈢ 相邻元素的层级
在淘宝的页面上有这样一个效果，几个图片组成的一个模块当你的鼠标移入模块的时候该模块就高亮显示，而当鼠标移出的时候模块就恢复以前的样式。这是怎么做的呢？其实原理上是很简单的。首先我们在所需的元素上设置hover伪元素并改变的它边框的颜色并且给它设置定位。嘴上说看起来很难理解我们还是看一下代码好了：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 div { 12 width: 200px; 13 height: 500px; 14 border: 10px solid blue; 15 float: left; 16 /*margin-right: 10px;*/ 17 margin-left: -10px; 18 position: relative; /*定位了的元素，默认的都会有层级的概念，而且默认的层级都是0*/ 19 } 20 div:hover { 21 border-color: red; 22 position: relative; 23 z-index: 1; 24 } 25 </style> 26 </head> 27 <body> 28 <div></div> 29 <div></div> 30 <div></div> 31 <div></div> 32 <div></div> 33 </body> 34 </html>
上面的代码就是仿照淘宝的盒子而做的。其中有一个点大家一定很奇怪就是 margin-left: -10px; 一般我们这支的margin值都是正整数，但是这里却用到了负数，它是干什么用的呢？其实这个属性是为了更好的版面布局而存在的。在上述例子中我们可以看到因为浮动影响使得其中有几个div盒子的边框合并了，而在实际的不居中我们并不需要它这种方式就可以满足我们的要求。
四、总结
今天的内容并不是很多，其实基础的部分都在前两天的练习中练习完成了。三天的小项目主要是对于Html,CSS的一个简单的复习。在我看来其实这三天内容可以归结与一个很基础的点，即标准流。其实标准流的概念是很简单的，真正难的是在布局的时候你对于元素的构想和标准流的联系。可能说到这里有些人会感到很晕，开始的时候我也是在这里纠结了很久。我的想法是你在页面布局的时候首先要考虑的是这个元素要在什么位置上，这并不是简单的左右上下。你需要在自己的脑海中构建一个实心的多米诺构建的小人，你在搭建这个人型模型的时候让他躺着你一点一点构建他身体的宽度。于是在构建的时候有一些的高度就不能省略，而有一些高度就可以像衣服一样一件又一件的层叠。我想每个人都有没有个人想法，这只是个不恰当的例子而已！