<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>pc网页右侧常用图片四宫格</title>
<style>
.showimgs{float: left;
display: block;
width: 320px;}
.showimgs li {
float: left;
width: 140px;
height: 100px;
margin-bottom:20px;
margin-right: 20px;
position: relative;
list-style: none;
}
.showimgs li a p {
position: absolute;
width: 100%;
height: 24px;
line-height: 24px;
background: #000000;
opacity: 0.6;
color: #fff;
overflow: hidden;
bottom: 0;
left: 0;
font-size: 12px;
font-family: 'simsun';
text-align: center;
padding: 0px;
margin: 0px;
}
</style>
</head>
<body>
<!--html开始-->
<ul class="showimgs">
<li>
<a target="_blank" href=" " title=" ">
<img src=" " title=" ">
<p>111</p>
</a>
</li>
<li>
<a target="_blank" href=" " title=" ">
<img src=" " title=" ">
<p>222</p>
</a>
</li>
<li>
<a target="_blank" href=" " title=" ">
<img src=" " title=" ">
<p>333</p>
</a>
</li>
<li>
<a target="_blank" href=" " title=" ">
<img src=" " title=" ">
<p>444</p>
</a>
</li>
</ul>
<!--html结束-->
</body>
</html>
您当前的位置: