淘宝静态网页模仿2

1      怎样实现鼠标悬停，图片上好像出现了一层模糊的层？<如图所示>

               

要实现鼠标悬停出现此效果则

（1）首先现在先在html文件中插入图片的<img>标签上新建一个div。 注意是在上方！！！
（2）然后在css样式中， 给所在的父元素设置相对定位，给div设置绝对定位 。
（3）然后给div设置宽高等于图片的宽高加上背景色 为半透明的颜色（大概0.2~0.5左右）。

（4）以上就可以实现图片上有一层阴影，然后通过hover实现鼠标悬停出现与否。

例如

html文件                                                      

      

css文件

2      实现文本上下间距的方法：

除了通过padding和magin之外可以用line-height设置。

3    怎样清楚元素的浮动影响overflow:hidden用法。

由于子级元素的浮动会对父级元素及下面的元素产生影响，所以平时用了浮动之后就要考虑清楚浮动，在此，我总结了几种清除浮动的方法。
1>当父级元素是固定高时，子级的浮动不会对父级产生影响，所以不需要清除浮动。
2>当父级元素高度是auto时，由于子的浮动不会撑开父，导致父的高度一直为0所以需要清楚浮动：
     给父级元素也设置同一方向浮动。
    在最后一个浮动元素后面加一个空的div然       后设置其style样式为clear:both。

     小技巧1：给父级元素overflow:hidden。

例如

如果不设置overflow:hidden则

可以看出高度显示为0

设置overflow:hidden后则

4     小技巧2: vertical-align：middle的用法:
有时候我们从网页上保存下来的图片会出现大小4px的像素差，影响布局，当我们要清除这些多余的像素时可以给图片加上vertical-align:middle属性。

5     tbody的默认情况

      虽然html中设置<table></table>时我们没有加tbody但是默认会有，所以在写用css设置样式时必须加上tbody例如table>tbody>tr>td。

6     当父元素里面没有文本内容时，

子元素的移动会带动父元素，所以要调整距离，不能给子元素设置margin应该给父元素设置padding值。

7      要实现如图所示布局

除了用定位之外，也可以用浮动，但要注意此情况只适用于左右块都要一样宽，总宽等于大块宽度，且刚好绿块和黄块一样高而且总和等于粉块高度

代码如下