4.6 案例实战
列表结构在网页布局中的作用非常大，它能够组织导航菜单、规划栏目信息，使整个页面井然有序，层次清晰。下面通过示例分别演示说明。
4.6.1 设计灯箱广告
视频讲解
灯箱广告在各种大型网站中很受青睐，不过一般多使用Flash或JavaScript来动态实现，下面介绍如何使用CSS来实现类似的显示效果。
【设计原理】
巧妙利用锚链接来动态控制列表显示顺序。这与电影胶片放映有点类似，设计演示示意图如图4.24所示。
图4.24 电影胶片放映
在图4.24所示的模拟胶片与放映示意图中，e所指示的胶带就是一个定义列表，其中a、b和c所指示的胶片就表示一个定义列表项，d所指示的区域表示放映窗口，也就是说一个显示窗口。
【技术难点】
如何把胶带和放映窗口捆绑在一起，并且不露破绽？实现技巧很简单，就是把e所指示的定义列表用CSS强制压缩为放映窗口显示大小，也就是d所指示区域的大小。由于e所指示的虚线框被压缩，且a、b和c的显示区域与d的显示区域大小重合，观众只能看见a、b或c 3个胶片中的一个列表项，这样就实现了切换显示的基础。
接着，需要突破第二个技术难点，即如何让观众自己控制a、b和c 3个胶片轮换显示？实现的方法就是利用锚链接。有点HTML基础的用户能明白用锚链接实现页内跳转的技巧，锚链接的代码样式如下：
<a name="锚记名称" id="锚记名称"></a>
实际上锚链接就是不定义href属性的超链接。在页内某个区域内定义一个锚链接，并指定一个锚记名称，这样就可以用超链接找到它，定义超链接的代码样式如下：
<a href="#锚记名称"></a>
明白了什么是锚链接，那么就分别为a、b、c 3个列表项定义id属性，这个id属性就相当于定义一个锚点，然后在图4.24中f所指示的导航按钮组中分别定义链接到这些锚点的超链接。
最后一个技术难题：如何实现f所指示的导航按钮组？是单独制作，还是利用现有资源？如果用户研究一下定义列表的结构一切就豁然开朗了：
<dl>
<dt></dt>
<dt></dt>
<dt></dt>
<dt></dt>
</dl>
用<dl>标记来制作放映机窗口，即图4.24中d所指示的区域，用3个<dd>标记分别来定制a、b、c 3个胶片区域，用<dt>标记来定制图4.24中f所指示的导航按钮组，要控制<dt>标记在胶片上显示，可以通过绝对定位的方式来实现，具体信息用户可以参考下面的示例。
【操作步骤】
第1步，启动Dreamweaver CC，新建HTML5文档，保存为index.html。
第2步，在页面中构建HTML结构。切换到【代码】视图，在<body>标记内输入下面的代码：
第3步，在<head>标记内输入<style type="text/css">，定义一个内部样式表，然后在<style>标记内手动输入下面的样式代码：
第4步，保存文档，按F12键在浏览器中预览，效果如图4.25所示。
图4.25 图片灯箱广告显示效果
4.6.2 设计水平菜单
视频讲解
水平菜单就是水平分布的多个超链接，这些超链接样式统一，在结构上被捆绑在一起，这样就形成了完整的导航条模块。制作水平菜单时，需要掌握列表项水平显示的技巧。下面通过示例说明两种比较典型的水平菜单样式。
1. 普通式
这是一个水平下画线效果的导航菜单，当鼠标移过时会显得非常动感。用户还可以为每个<a>标记定义背景图片，使用背景图片会让效果看上去更漂亮。
【操作步骤】
第1步，启动Dreamweaver CC，新建HTML5文档，保存为index.html。
第2步，在页面中构建HTML导航框架结构。切换到【代码】视图，在<body>标记内手动输入下面的代码：
<ul id="menus">
<li><a href="" class="current" title="menu_1">首页</a></li>
<li><a href="" title="menu_2">本站新闻</a></li>
<li><a href="" title="menu_3">在线交流</a></li>
<li><a href="" title="menu_4">联系方式</a></li>
<li><a href="" title="menu_5">关于我们</a></li>
</ul>
第3步，在<head>标记内输入<style type="text/css">，定义一个内部样式表，然后在<style>标记内手动输入下面的样式代码：
第4步，保存文档，按F12键在浏览器中预览，效果如图4.26所示。
图4.26 普通的水平导航菜单样式
2. 图像式
本案例利用背景图片设计水平渐变菜单，用了3张小图片：bg1.gif、bg2.gif和bg3.gif，由于是像素级别的小图标，所以看不太清楚，用户可以在资源包的实例中放大原图片查看。然后用CSS实现水平铺展效果，并选择其中的一个菜单项处于选中状态来避免未触发hover而带来的图片加载延迟。
【操作步骤】
第1步，启动Dreamweaver CC，新建HTML5文档，保存为index1.html。
第2步，在页面中构建HTML导航框架结构。切换到【代码】视图，在<body>标记内手动输入下面的代码：
<ul id="menus">
<li><a href="" class="current" title="menu_1">首页</a></li>
<li><a href="" title="menu_2">本站新闻</a></li>
<li><a href="" title="menu_3">在线交流</a></li>
<li><a href="" title="menu_4">联系方式</a></li>
<li><a href="" title="menu_5">关于我们</a></li>
</ul>
第3步，在<head>标记内输入<style type="text/css">，定义一个内部样式表，然后在<style>标记内手动输入下面的样式代码：
第4步，保存文档，按F12键在浏览器中预览，效果如图4.27所示。
图4.27 图像设计的水平导航菜单样式
4.6.3 设计垂直菜单
视频讲解
本例使用定义列表（<dl>，<dt>，<dd>）设计垂直导航菜单结构，通过比较会发现用定义列表来制作CSS菜单比无序列表要存在很多优势，因为其控制力比较强。
☑ 如果使用<dt>作为菜单标题，则<dd>可以作为菜单链接。
☑ 如果使用<dt>作为菜单链接，则<dd>可以用来为链接做进一步说明。
☑ 如果使用<dt>作为菜单链接，则<dd>可以作为链接的说明，并可以在<dd>文字区域加上其他链接。
相比有序列表和无序列表，使用定义列表可以更灵活定义标记的样式，甚至还可以只针对链接进行样式化，而忽略<dl>和<dt>的样式，其中<dd>的默认缩进不需要时应显式定义清除。
【操作步骤】
第1步，启动Dreamweaver CC，新建HTML5文档，保存为index.html。
第2步，在页面中构建HTML导航框架结构。切换到【代码】视图，在<body>标记内手动输入下面的代码：
<dl id="menus">
<dt>菜单标题</dt>
<dd><a href="#" title="menu_1">首页</a></dd>
<dd><a href="#" title="menu_2">本站新闻</a></dd>
<dd><a href="#" title="menu_3">在线交流</a></dd>
<dd><a href="#" title="menu_4">联系方式</a></dd>
<dd><a href="#" title="menu_5">关于我们</a></dd>
</dl>
第3步，在<head>标记内输入<style type="text/css">，定义一个内部样式表，然后在<style>标记内手动输入下面的样式代码：
第4步，保存文档，按F12键在浏览器中预览，效果如图4.28所示。
图4.28 设计垂直菜单样式
4.6.4 设计选项卡
视频讲解
本节案例设计原理与4.6.1节示例相同，用户可以尝试改变栏目选项卡的分布位置和显示效果。具体操作就不再深入介绍，用户可以自己动手试验。演示操作请扫码阅读。
线上阅读
4.6.5 设计多级菜单
视频讲解
多级菜单的样式也比较丰富，如平行式、垂直式、并列式、层叠式等。本节将介绍常用多级菜单的样式设计，演示操作请扫码阅读。
线上阅读