pc网页右侧常用图片四宫格

毒药      52阅读

<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>

   52阅读
目前尚无回复
登录 后发表评论