布局图片

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
font-size: 13px;
}

.left {
float: left;
}

.left ul {
list-style-type: none;
float: left;
}

.imgs {
width: 130px;
height: 100px;
}

.imgbig {
width: 450px;
height: 300px;
}

.innerpic1 {
float: left;
width: 460px;
}

.innerpic2 {
float: left;
width: 560px;
}

.innerpic3 {
float: left;
width: 200px;
}

.innerpic4 {
clear: both;
}

.imgright {
height: 320px;
}

.imgplay {
position: absolute;/*参照离他最近的第一个（使用定位的）父元素的位置*/
left: 50%;
top: 50%;
opacity: 0;
/*透明度为0时，控件隐藏*/
}

.imgplay:hover {
opacity: 1;
/*透明度为1时，控件显示出来*/
}

.divpic:hover {
color: blue;
}
</style>
</head>

<div class="innerpic1">
<ul class="divpic">
<li style="position: relative;">
<img src="img/1.png" class="imgbig" />
<img src="img/play.png" class="imgplay" />
</li>
<li><b>她是央视主持人，首次公开老公身份</b></li>
<li>娱乐圈的人得知后全傻了</li>
</ul>
</div>
<div class="innerpic2">
<ul>
<li><img src="img/9.png" class="imgs" /></li>
<li><b>惊险一幕感动网友</b></li>
<li>母猪画抽象画每幅1.5万</li>
</ul>
<ul>
<li><img src="img/12.png" class="imgs" /></li>
<li><b>惊险一幕感动网友</b></li>
<li>母猪画抽象画每幅1.5万</li>
</ul>
<ul>
<li><img src="img/6.png" class="imgs" /></li>
<li><b>惊险一幕感动网友</b></li>
<li>母猪画抽象画每幅1.5万</li>
</ul>
<ul>
<li><img src="img/7.png" class="imgs" /></li>
<li><b>惊险一幕感动网友</b></li>
<li>母猪画抽象画每幅1.5万</li>
</ul>
<ul>
<li><img src="img/13.png" class="imgs" /></li>
<li><b>惊险一幕感动网友</b></li>
<li>母猪画抽象画每幅1.5万</li>
</ul>
<ul>
<li><img src="img/12.png" class="imgs" /></li>
<li><b>惊险一幕感动网友</b></li>
<li>母猪画抽象画每幅1.5万</li>
</ul>
</div>

<div class="innerpic4">
<ul>
<li><img src="img/8.png" class="imgs" /></li>
<li><b>惊险一幕感动网友</b></li>
<li>母猪画抽象画每幅1.5万</li>
</ul>
<ul>
<li><img src="img/9.png" class="imgs" /></li>
<li><b>惊险一幕感动网友</b></li>
<li>母猪画抽象画每幅1.5万</li>
</ul>
<ul>
<li><img src="img/10.png" class="imgs" /></li>
<li><b>惊险一幕感动网友</b></li>
<li>母猪画抽象画每幅1.5万</li>
</ul>
<ul>
<li><img src="img/11.png" class="imgs" /></li>
<li><b>惊险一幕感动网友</b></li>
<li>母猪画抽象画每幅1.5万</li>
</ul>
<ul>
<li><img src="img/12.png" class="imgs" /></li>
<li><b>惊险一幕感动网友</b></li>
<li>母猪画抽象画每幅1.5万</li>
</ul>
<ul>
<li><img src="img/13.png" class="imgs" /></li>
<li><b>惊险一幕感动网友</b></li>
<li>母猪画抽象画每幅1.5万</li>
</ul>
</div>

</div>

</body>

</html>

猜你喜欢