在网页设计中，经常能见到多张图片排列的情况，在本例中，将介绍对于多图排列的设置，并进一步了解CSS设置图片的方法。

【操作步骤】

第1步，启动Dreamweaver，新建文档，保存为index.html.。

第2步，构建网页的基本结构。本例中首先用<div>标签设置container容器，然后分别用<div>标签将页面分为4块，每一块中包含一个<img>标签、一个<a>标签和一个<p>标签。

<div class="container">    

<div class="one"><a href="#">

<img src="images/1.jpg">        

<p>老虎</p>        

</a></div>    

<div class="one"><a href="#">

<img src="images/2.jpg">        

<p>大熊猫</p>        

</a></div>    

<div class="one"><a href="#"><img src="images/3.jpg">        

<p>大象</p>        

</a></div>    

<div class="one"><a href="#"><img src="images/4.jpg">        

<p>野马</p>

</a>

</div>

</div>

此时的显示效果极其简单，仅仅是简单的图片和标题。

第3步，在网站建设中定义网页基本属性及container容器的样式。

body {    margin: 20px;

padding: 0;}

.container {    text-align: center;    

width: 800px;    

height: 240px;    

background-image: url(images/bg.jpg);    

border: 1px #000 solid;}

首先在body中定义了四周补白以及内边距为0。在container中定义了container下所有元素的水平对齐方式为居中对齐，定义了container的宽度、高度以及边框样式。background-im-age:url(bg.jpg)语句的作用是为container标签添加名为bg.jpg的背景图片。

第4步，设置container容器下的<div>标签，以及在<div>下的<p>标签的样式。

.container div {    

float: left;    

margin-top: 30px;    

margin-left: 35px;}

.container p {    

font-size: 20px;    

font-family: 黑体;}

第5步，设置<a>标签样式。

a {    text-decoration: none;                      /*不显示超链接的下划线*/   

color: #204402;                             /*字体颜色*/}a:hover {

text-decoration: underline;                 /*鼠标悬停时显示下划线*/    

color: red;                                 /*鼠标悬停时字体颜色*/}

a:hover img { border: 4px #0b35ce solid;        /*鼠标悬停时图片的边框样式*/}

<a>

标签的样式设置了下划线，a:hover定义了当鼠标悬停时链接的样式。a:hover img定义了图片在鼠标悬停时的样式。关于网页制作中<a>标签的CSS样式将在后面章节详细介绍。