网页前端开发技术干货之多图排列
1、在网页前端开发中，多图排列效果比较常见，下面以项目列表（ul）为结构，以优化的CSS样式来制作网页效果。那么，先看案例效果如下：
2、制作过程如下：
先输入结构代码：外层是项目列表（ul)，每个列表项（li)中放图像标签（img)。
<ul>
<li><img src="images/penguin.jpg
<li><img src="images/penguin.jpg
<li><img src="images/penguin.jpg
<li><img src="images/penguin.jpg
<li><img src="images/penguin.jpg
<li><img src="images/penguin.jpg
<li><img src="images/penguin.jpg
<li><img src="images/penguin.jpg
<li><img src="images/penguin.jpg
<li><img src="images/penguin.jpg
<li><img src="images/penguin.jpg
<li><img src="images/penguin.jpg
</ul>
3、然后进行CSS样式修饰，根据先整体后局部的原则,首先设置所有标签边距和间距为0，ul设置去点和调位置；li做为图片的容器，设置左浮动、右间距和下间距、以及宽度和高度；图像标签（img)设置边框和边距，形成缩略图效果；鼠标经过图片（img:hover)设置了图片阴影效果。
代码如下：
<style type="text/css">
* {
margin: 0px;/*间距（margin)为0*/
padding: 0px;/*边距（padding)为0*/
}
ul {
list-style-type: none;/*去除小圆点*/
margin: 20px auto;/*设置上下间距为20px,左右为自动，实现居中效果*/
width: 880px;/*宽度为880px*/
height: 400px;/*高度为400px*/
}
li {
float: left;/*设置列表项浮动方式为左浮动*/
width: 200px;/*设置宽度为200px*/
height: 180px;/*设置高度为200px*/
margin:0px 20px 20px 0;/*列表项(li)右间距,下间距为20px*/
}
img {
height: 180px;
width: 200px;
border: 1px solid #CCC;/*设置所有图片边框为1px,实线,浅灰色*/
padding: 3px;/*设置边距为3px*/
}
img:hover {
box-shadow:0px 0px 5px 0px #333;/*设置图片阴影,4个像素,一个阴影颜色,前两个像素为阴影位置,第3个像素表示模糊,第4个为阴影大小*/
}
</style>
4、虽然这个多图排列案例简单，但对于网站前端开发的入门与提高有很大的促进作用，感兴趣的朋友动手试一试，希望对大家有所帮助。