瀑布流布局实践
好的，今天我们继续讲解瀑布流技术。
首先我们需要搭建一个静态的页面用来展示，这个就不用说了吧。我们先上html代码
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>知客,瀑布流,实战派理念倡导者</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head><body>
<div id="container">
<div class="box">
<div class="boximg">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/2.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/3.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/4.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/5.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/6.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/7.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/8.jpg">
</div>
</div>
<div class="box">
<div class="boximg">
<img src="img/9.jpg">
</div>
</div>
</div>
</body></html>
在这里大家可以看到赵哥引入了一个css和一系列要展示的图片，图片的话大家可以自行解决，赵哥这里放上来我们的css就行了。
@charset "utf-8";
/*使用通配符将内外边距都设置为零, 这样看着好看*/
*{
margin: 0px;
padding: 0px;
}
/*将主容器的布局方式设置为相对布局*/
#contianer{
position: relative;
}.box{
padding: 5px;
float: left;
}
/*将承载图片的容器定制颜色及边框大小和圆角*/
.boximg{
padding: 5px;
box-shadow: 0 0 5px #ccc;
border: 1px solid #cccccc;
border-radius: 5px;
}
/*定制图片尺寸*/
.boximg img{
width: 250px;
height: auto;
}
css代码其实非常简单，大家运行下效果，如果发现效果和赵哥的一样，代表你们可以进入下一节:js控制下的瀑布流技术啦！
这里大家可以看到，我们只是按照每一行进行排列，和我们上一篇说的最终效果还是有一定差距的
所以下一篇我们将会进入一个动态去判断如何实现瀑布流布局。
扫一扫
1128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
