网页设计时，在网页上随处可见的灯箱广告，有效地提高了视觉冲击力，不断变换的图片和文字，给浏览者不同的感受，灯箱广告的动静结合，引起人们的注意，从而吸引人眼球，以达到最好的经济利益。本例介绍在网站建设时用CSS设置最简单的灯箱广告的方法。

【操作步骤】

第1步，首先构建网页结构。在本例中，应用<dl>标记创建列表，从而实现灯箱广告效果。

<dl id="menu">    

<dt>        

<a href="#img1">1</a>        

<a href="#img2">2</a>        

<a href="#img3">3</a>        

<a href="#img4">4</a>    

</dt>    

<dd>        

<img src="images/1.JPG" id="img1"/>        

<img src="images/2.JPG" id="img2"/>        

<img src="images/3.JPG" id="img3"/>        

<img src="images/4.JPG" id="img4"/>    

</dd>

</dl>

在本示例中应用<dl></dl>标记来创建列表，并创建“menu”类来声明其样式，在列表中添加4幅图片，从而实现灯箱广告。

第2步，定义网页的基本属性和menu类样式。

*{ margin:0; padding:0;}body{                                  /*网页基本属性*/    

margin:30px auto auto 30px;        /*四周补白*/

background-color:#000000;              /*网页背景颜色*/}

#menu{                                 /*dl标记类样式*/    

position:relative;                 /*相对定位*/    

height:180px;                      /*高度*/    

width:210px;                       /*宽度*/    

background:#ccc;                   /*dl标记的背景颜色*/

text-align:center;    

padding-top:20px;}

在以上的代码中在网页设计中用*{ margin:0; padding:0;}语句设置了网页中所有标签的margin和padding属性，并设置了网页背景颜色。在menu类样式中，首先设置其定位为relative。

由于没有设置<dl></dl>中<dt>和<dd>的样式，使得4幅图片以及数字“1、2、3、4”的位置错乱，接下来对dt样式进行设置。

第3步，设置dt样式类和dt标记中的a样式类，从而实现设置<dl>列表中的项目标题“1、2、3和4”。

#menu dt{                       /*dt样式类*/   

position:absolute;                    /*绝对定位*/    

right:5px;                            /*右边框离父级元素的距离*/    

bottom:5px;                           /*下边框离父级元素的距离*/}

#menu dt a{                               /*a样式类*/   

float:left;                           /*左对齐*/

display:block;                        /*定义为块级元素*/    

padding:1px 4px;    

border:1px solid #ccc;                /*为列表项加边框*/    

margin-left:2px;    text-decoration:none;                 /*不显示下划线*/    

color:#309;                           /*字体颜色*/    font-size:12px;}

#menu dt a:hover {                        /*鼠标悬停时的a样式类*/    

background:#fff;    

color:#FF0000;

首先定义了dt类样式，其中position:absolute语句表示绝对定位，也就是其定位参照父级元素的原点，进行上、下、左、右的移动。在dt样式类的a标记下，首先利用float:left语句，使列表项横向显示，由于a标记默认是行内元素，所以用dis-play:block语句将其定义为块级元素，在a:hover中定义了鼠标悬停时的背景颜色和字体颜色。

第4步，设置dd样式类。

#menu dd{                /*dd类样式*/    

width:210px;         /*宽度*/    

height:144px;        /*高度*/    

overflow:hidden;     /*隐藏溢出*/

}

在dd类样式中，应用overflow:hidden语句实现图片的溢出隐藏，overflow:hidden的作用就是把超过其设置的高度和宽度部分隐藏起来，在本例中，设置了图片的宽度为210px，高宽为144px，但是由于在dd中添加了4张图片，而只需要显示一张，不能让4张图片同时显示，所以在这里设置了overflow:hidden语句，让其他3张图片隐藏起来。