5.3 案例实战
下面通过几个案例演示如何在页面中应用列表结构和超链接。
注意：本节示例涉及CSS3和JavaScript基础知识，如果读者不熟悉CSS3和JavaScript，建议先跳过本节内容，当学习完本书后面章节内容之后，再回头补学本节内容。
5.3.1 为快捷菜单添加命令
视频讲解
在5.1.5节中，构建了弹出菜单的示例，但是没有任何功能，本节将介绍如何使用JavaScript实现这些功能。
【示例】针对5.1.5节示例3的HTML代码，为它添加一个当单击时旋转图像的功能。本例将使用CSS3的transform和transition功能，可以在浏览器中实现旋转功能。
在上面示例中定义了4个类样式，分别设计将图像旋转指定度数。例如，旋转90度的类样式如此：
.rotate-90 { transform: rotate(90deg);}
为了使用这个样式，需要写一个函数将它应用到图像。
function imageRotation(name) {
document.getElementById('image').className = name;
}
把这个函数和每一个menuitem的onclick事件处理函数捆绑在一起，并且传递一个参数：'rotate-90'。
<menuitem icon="images/icon1.png" onclick="imageRotation('rotate-90')" >旋转90度</menuitem>
完成这个之后，再创建将图片旋转180度和翻转图片的样式，将每一个函数添加到独立的menuitem中，必须要传递参数。最后，在Firefox浏览器中预览，显示效果如图5.19所示。
图5.19 为图片添加快捷旋转功能
5.3.2 设计快捷分享命令
视频讲解
本节示例设计一个更实用的分享功能，设计效果如图5.20所示。右击页面中的文本，在弹出的快捷菜单中选择“下载文件”命令，可以下载本词相关作者画像；选择“查看源文件”命令，可以在新窗口中直接浏览作者画像；选择“分享|反馈”命令，可以询问是否向指定网址反馈信息；选择“分享|Email”命令，可以在地址栏中发送信息，也可以向指定邮箱发送信息。
图5.20 定义快捷菜单
本例主要代码如下所示：
5.3.3 设计任务列表命令
视频讲解
本节示例设计一个动态添加列表项目的功能，设计效果如图5.21所示。右击项目列表文本，在弹出的快捷菜单中选择“添加新任务”命令，可以快速为当前列表添加新的列表项目。
图5.21 添加新的列表项目
本例主要代码如下所示：
5.3.4 设计排行榜列表结构
视频讲解
音乐排行榜，主要体现的是当前某个时间段中某些歌曲的排名情况。如图5.22所示为本节示例的效果图，该例展示音乐排行榜在网页中的基本设计样式。
示例效果
图5.22 音乐排行榜栏目
【操作步骤】
第1步，新建网页，保存为index.html，在<body>标签内编写如下结构，构建HTML文档。
第2步，厘清设计思路。首先，将默认的显示效果与通过CSS样式修饰过的显示效果进行对比，如图5.23所示，可以发现两者不同之处。
文字的大小。
榜单排名序号的样式。
背景色和边框色的修饰。
图5.23 CSS样式修饰后（左）与无CSS样式修饰（右）
通过对比可见，数字序号已经不再是普通的常见文字了，而是经过特殊处理的文字效果，换言之就是这个数字必须使用图片才可以达到预期效果。这个数字图片在列表中处理方式也就是本例中需要讲解的部分，在讲解之前先思考下面两个问题：
10个数字，也就是10张图片，可不可以将这10张图片合并成一张图片；
将10张图片合并成一张图片，但HTML结构中又没有针对每个列表<li>标签添加Class类名，怎么将图片指定到相对应的排名中。
第3步，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。
第4步，针对第2步分析的两个主要问题，编写如下CSS样式：
这段CSS样式就是为了实现最终效果而写的，代码设计思路如下：
将有序列表<ol>标签的高度属性值设定一个固定值，这个固定值为列表<li>标签的10倍；并将列表所有的默认样式修饰符取消；利用有序列表<ol>标签中增加左补丁的空间显示合并后的数字背景图。
简单的方法代替了给不同的列表<li>标签添加不同背景图片的麻烦步骤。但这种处理方式的缺陷就是必须调整好背景图片中10个数字图片的间距，而且如果增加了每个列表<li>标签的高度，那么就需要重新修改背景图片中10个数字图片的间距。
第5步，保存页面之后，在浏览器中预览，演示效果如图5.22所示（index.html）。
5.3.5 设计图文列表栏目
视频讲解
图文列表的结构就是将列表内容以图片的形式在页面中显示，简单理解就是图片列表信息附带简短的文字说明。在图中展示的内容主要包含列表标题、图片和图片相关说明的文字。下面结合示例进行说明。
【操作步骤】
第1步，新建网页，保存为index.html，在<body>标签内编写如下结构，构建HTML文档。
第2步，梳理结构。对于列表的内容不再细解，细心的用户应该发现：这个列表的HTML结构如图5.24所示，结构层次清晰而富有条理。
图5.24 列表结构的分析示意图
该结构不仅在HTML代码中能很好体现页面结构层次，而且更方便后期使用CSS设计。
第3步，梳理设计思路。图文列表的排列方式最讲究的是：宽度属性的计算。横向排列的列表，当整体的列表（有序列表或者无序列表）横向空间不足以将所有列表横向显示时，浏览器会将列表换行显示。这样的情况只有在宽度计算正确时，才足够将所有列表横向排列显示并且不会产生空间的浪费，如图5.25所示。
图5.25 列表宽度计算不正确导致的结果
这种情况是必须要避免的，因此准确计算列表内容区域所需要的空间是有必要的。
第4步，设计栏目宽度。在本例中，每张图片的宽度为134px，左右内补丁分别为3px，左右边框分别为1px宽度的线条，且图片列表与图片列表的间距为15px（即右外补丁为15px），根据盒模型的计算方式，最终列表<li>标签的盒模型宽度值为1px+3px+134px+3px+1px+15px=157px，因此图文列表区域总宽度值为157px×6=942px。
第5步，在<head>标签内添加<style type="text/css">标签，定义一个内部样式表。
第6步，编写图文列表区域的相关CSS样式代码：
.pic_list .content作为图文列表内容区域，增加相应的内补丁使其与整体之间有空间感，这个是视觉效果中必然会处理的一个问题。
.pic_list .content li因为具有浮动属性，并且有左右外补丁中一个外补丁属性，在IE6浏览器中会产生双倍间距的bug问题。而神奇的是，添加display:inline可以解决该问题，并且不会对其他浏览器产生任何影响。
第7步，主要的内容设置成功之后就可以对图文列表的整体效果做CSS样式的修饰，例如图文列表的背景和边框以及图文列表标题的高度、文字样式和背景等。
第8步，调整图文列表信息细节以及用户体验的把握，例如图片的边框、背景和文字的颜色等，并且还要考虑当用户在鼠标经过图片时，为了能更好地体现视觉效果，给用户一个全新的体验，添加当鼠标经过图片列表信息时图片以及文字的样式变化。
第9步，保存页面之后，在浏览器中预览，演示效果如图5.26所示。
示例效果
图5.26 图文信息列表页面效果