<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title>qdabc.cn</title>
<style type="text/css">
*{
/*padding: 0;*/
/*margin: 0;*/
/*border: none;*/
/*box的内外边距不影响正常的box 的width*/
/*可以达到设置宽度是多少,盒模型就是多少是效果*/
box-sizing: border-box;
}
h1{
width: 100%;
height: 60px;
margin: 0;
line-height: 60px;
background-color: whitesmoke;
box-shadow: 0 2px 2px 0 lightblue;
position: fixed;
top: 0;
left: 0;
/*文本居中*/
text-align: center;
}
.pic{
margin: 70px auto;
column-count: 3;
/*-moz 火狐浏览器*/
-moz-column-count: 3;
/*-web 谷歌*/
-webkit-column-count: 3;
column-gap: 10px;
-moz-column-gap: 10px;
-webkit-column-gap: 10px;
}
.pic li{
list-style: none;
margin-top: 5px;
}
.pic li img{
width: 100%;
height: 800px;
}
</style>
</head>
<body>
<!--ul.pic>(li>img[src=img/$.jpg])*29-->
<h1>图片瀑布流</h1>
<ul class="pic">
<li><img src="img/1.jpg" alt="" /></li>
<li><img src="img/2.jpg" alt="" /></li>
<li><img src="img/3.jpg" alt="" /></li>
<li><img src="img/4.jpg" alt="" /></li>
<li><img src="img/5.jpg" alt="" /></li>
<li><img src="img/6.jpg" alt="" /></li>
<li><img src="img/7.jpg" alt="" /></li>
<li><img src="img/8.jpg" alt="" /></li>
<li><img src="img/9.jpg" alt="" /></li>
<li><img src="img/10.jpg" alt="" /></li>
<li><img src="img/11.jpg" alt="" /></li>
<li><img src="img/12.jpg" alt="" /></li>
<li><img src="img/13.jpg" alt="" /></li>
<li><img src="img/14.jpg" alt="" /></li>
<li><img src="img/15.jpg" alt="" /></li>
<li><img src="img/16.jpg" alt="" /></li>
<li><img src="img/17.jpg" alt="" /></li>
<li><img src="img/18.jpg" alt="" /></li>
<li><img src="img/19.jpg" alt="" /></li>
<li><img src="img/20.jpg" alt="" /></li>
<li><img src="img/21.jpg" alt="" /></li>
<li><img src="img/22.jpg" alt="" /></li>
<li><img src="img/23.jpg" alt="" /></li>
<li><img src="img/24.jpg" alt="" /></li>
<li><img src="img/25.jpg" alt="" /></li>
<li><img src="img/26.jpg" alt="" /></li>
<li><img src="img/27.jpg" alt="" /></li>
<li><img src="img/28.jpg" alt="" /></li>
<li><img src="img/29.jpg" alt="" /></li>
</ul>
</body>
</html>
欢迎分享本文，转载请保留出处：前端ABC » html瀑布流
前端ABC