网页设计时,在网页上随处可见的灯箱广告,有效地提高了视觉冲击力,不断变换的图片和文字,给浏览者不同的感受,灯箱广告的动静结合,引起人们的注意,从而吸引人眼球,以达到最好的经济利益。本例介绍在网站建设时用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张图片隐藏起来。
当前文章标题:设计灯箱广告
当前URL:http://www.lyjtt.cn/news/wzzz/3084.html
上一篇:在网页设计中设计图片预览
下一篇:设计网页中的列表信息