纯html5+css3实现手机图片瀑布流
摘要：纯html5+css3实现手机图片瀑布流
html5代码
运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>纯html5+css3实现手机图片瀑布流-webkfa.com</title>
<meta name="apple-touch-fullscreen" content="YES" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="format-detection" content="telephone=no"/>
<style type="text/css">
*{margin:0;padding:0;}
*{-webkit-tap-highlight-color:rgba(210,210,210,0.35);}
body{font:12px arial,宋体,sans-serif;}
.con{width:100%;overflow:hidden;}
.con .itemleft{width:50%;overflow: hidden;float:left;}
.con .itemright{width:50%;overflow: hidden;float:left;}
.con .itemleft img{width:96%;margin:2% 1% 0 2%;display:block;border-radius:3px;}
.con .itemright img{width:96%;margin:2% 2% 0 1%;display:block;border-radius:3px;}
.item{position: relative;overflow: hidden;}
.wf-setnum {
position: absolute;
line-height: 28px;
right: 2%;
padding: 0 6px 0 10px;
background-color: rgba(0,0,0,.6);
background-repeat: no-repeat;
background-position: left top;
border-radius: 16px 0 0 16px;
vertical-align: bottom;
bottom: 15px;
}
.wf-setnum span.num {
height: 28px;
font-size: 24px;
margin-right: 0;
position: relative;
bottom: -2px;
font-family: Trebuchet MS;
color: #fff
}
.wf-setnum span.text {
color: #fff;
position: relative;
line-height: 28px;
height: 28px;
bottom: 0;
display: inline-block;
zoom:1}
</style>
</head>
<body>
<div class="con">
<div class="itemleft">
<div class="item">
<img src="http://img1.kwcdn.kuwo.cn/star/KuwoPhotoArt/0/0/1392607474059_0bp.jpg">
<div class="wf-setnum">
<span class="num">25</span>
<span class="text">张</span>
</div>
</div>
<div class="item">
<img src="http://img1.kuwo.cn/star/playlist/9/27/1351830095433_.jpg">
<div class="wf-setnum">
<span class="num">25</span>
<span class="text">张</span>
</div>
</div>
<div class="item">
<img src="http://img1.kuwo.cn/star/playlist/9/27/1351830095433_.jpg">
<div class="wf-setnum">
<span class="num">25</span>
<span class="text">张</span>
</div>
</div>
</div>
<div class="itemright">
<div class="item">
<img src="http://img1.kuwo.cn/star/playlist/9/27/1351830095433_.jpg">
<div class="wf-setnum" style="right:3%;">
<span class="num">25</span>
<span class="text">张</span>
</div>
</div>
<div class="item">
<img src="http://img1.kuwo.cn/star/playlist/9/27/1351830095433_.jpg">
<div class="wf-setnum" style="right:3%;">
<span class="num">25</span>
<span class="text">张</span>
</div>
</div>
<div class="item">
<img src="http://img1.kwcdn.kuwo.cn/star/KuwoPhotoArt/0/0/1392607474059_0bp.jpg">
<div class="wf-setnum" style="right:3%;">
<span class="num">25</span>
<span class="text">张</span>
</div>
</div>
</div>
</div>
</body>
</html>
相关文章
最新发布
阅读排行
热门文章
猜你喜欢