<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<link href="waterStyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="div1">
<ul>
<li><img src="img/1.png"></li>
<li><img src="img/2.png"></li>
<li><img src="img/3.png"></li>
</ul>
<ul><li><img src="img/4.png"></li>
<li><img src="img/5.png"></li>
<li><img src="img/6.png"></li>
</ul>
<ul>
<li><img src="img/7.png"></li>
<li><img src="img/8.png"></li>
<li><img src="img/9.png"></li>
</ul>
</div>
</body>
</html>
*{
/*通配符：對接下來的所有代碼都會起效果*/
margin: 0px;
padding: 0px;
}
li{
list-style: none;
}
#div1{
width:950px;
height: auto;
/*前邊的代表上下適應，後邊的代表左右適應*/
margin: 20px auto;
}
ul{
width: 250px;
float: left;
}
css3-浮動製作的簡單瀑布流
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
微信端禁止長按保存圖片到本地
添加一行樣式搞定 img{ pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none; }