京东静态网页设计案例（2）

一、图片的悬停

在鼠标悬停到图片上时，图片像是被覆盖了一层白色的薄膜。如下面两幅图片。

在鼠标悬停之后显示如右图 

下面说明实现该效果的步骤：

1.在该图片标签的上方加入一个空的

标签并设置该div标签的类名。

2.给该div块设置绝对定位（该块的父元素应当设置相对定位）。

3.给该div块设置宽高，由于该div块是在img图片的上方使用，所以我设置的宽高与图片宽高一致，并将div的z-index属性设置在图片之上。

4.设置该div块的不透明度并将display属性定义为none值。

5.设置某一元素悬停时，让该div块显示。

示例代码如下：

HTML代码

CSS代码

.box_ul{
    padding: 0;
    list-style: none;
    margin: 25px 0;
}
.box_ul>li{
    position: relative;
    float: left;
    margin: 0 22.5px;
    width: 130px;
    height: 130px;
}
.mo{
    display: none;
    width: 130px;
    height: 130px;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    background-color: rgba(255, 255, 255, 0.4);
}
.box_ul>li:hover .mo {
    display: block;
}

二、关于overflow：hidden；

1.在CSS中，overflow：hidden；最常见的功能是超出部分隐藏。

2.在父元素的高度为auto时，子元素设置的高度不能将父元素撑开，如此一来可能会对后面的元素样式造成影响，这是可以给父元素加入overflow：hidden；属性，这样便可以将父元素撑开。

三、margin和padding

1.margin

（1）margin是CSS语法，这个简写属性用于在一个声明中设置所有当前或者指定元素所有外边距的宽度，或者设置各边上外边距的宽度。

（2）margin的写法

常见的写法有三种：

"margin:100px;"表示四个方向的外边距都是100px;

"margin:100px 50px;"表示上下外边距为100px，左右外边距为50px。

"margin:10px 20px 30px 40px;"表示上外边距为10px，右外边距为20px，下外边距为30px，左外边距为40px，即从上方开始顺时针方向。

还有一种写法为margin:10px 5px 15px;上外边距是 10px，左外边距和右外边距是 5px，下外边距是15px。

2.padding

（1）padding (填充)属性定义元素边框与元素内容之间的空间，即设置所有当前或者指定元素内边距属性。

（2）padding的写法

padding的写法与margin几乎一致，常见的写法有三种

"padding:100px;"表示四个方向的内边距都是100px;

"padding:100px 50px;"表示上下内边距为100px，左右内边距为50px。

"padding:10px 20px 30px 40px;"表示上内边距为10px，右内边距为20px，下内边距为30px，左内边距为40px，即从上方开始顺时针方向。

3.分开使用

margin和padding都可以将各部分的属性分开使用。

如margin-top，margin-right，margin-bottom，margin-left和padding-top，padding-right，padding-bottom，padding-left。