1、在网页前端开发中，多图排列效果比较常见，下面以项目列表（ul）为结构，以优化的CSS样式来制作网页效果。那么，先看案例效果如下：
2、制作过程如下：先输入结构代码：外层是项目列表（ul)，每个列表项（li)中放图像标签（img)。<ul><li><img src="images/penguin.jpg" width="480" height="464" /></li><li><img src="images/penguin.jpg" width="480" height="464" /></li><li><img src="images/penguin.jpg" width="480" height="464" /></li><li><img src="images/penguin.jpg" width="480" height="464" /></li><li><img src="images/penguin.jpg" width="480" height="464" /></li><li><img src="images/penguin.jpg" width="480" height="464" /></li><li><img src="images/penguin.jpg" width="480" height="464" /></li><li><img src="images/penguin.jpg" width="480" height="464" /></li><li><img src="images/penguin.jpg" width="480" height="464" /></li><li><img src="images/penguin.jpg" width="480" height="464" /></li><li><img src="images/penguin.jpg" width="480" height="464" /></li><li><img src="images/penguin.jpg" width="480" height="464" /></li></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、虽然这个多图排列案例简单，但对于网站前端开发的入门与提高有很大的促进作用，感兴趣的朋友动手试一试，希望对大家有所帮助。