第10章设计列表和菜单样式

10设计列表和菜单样式列表结构是标准结构中最核心部分之一。设计师喜欢使用它来构建导航菜单，不管从语义性角度分析，还是从表现层控制角度分析，使用列表结构来实现导航设计都是最佳选择。而导航菜单的设计风格在很大程度上又影响到页面的设计风格。所以，在网页设计中如何把导航菜单设计成页面的亮点，以彰显网页的设计风格就很重要了，可以说它是画龙点睛之笔，可多不可少。本章将从列表结构的基本样式讲解开始，不但升级，逐层把握列表结构的样式设计。样吧视频教室（）《网页制作与网站开发从入门到精通》配套视频10.1列表基本样式10.1.1定义列表的基本样式list-style-type属性来控制项目符号的类型。样吧视频教室（）《网页制作与网站开发从入门到精通》配套视频属性值说明属性值说明disc实心圆，默认值upper-roman大写罗马数字circle空心圆lower-alpha小写英文字母square实心方块upper-alpha大写英文字母decimal阿拉伯数字none不使用项目符号lower-roman小写罗马数字10.1列表基本样式10.1.1定义列表的基本样式list-style-position属性来控制项目符号的显示位置。该属性取值包括outside和inside，其中outside表示把项目符号显示在列表项的文本行以外，列表符号默认显示为outside，inside表示把项目符号显示在列表项文本行以内。示例：10-1.html样吧视频教室（）《网页制作与网站开发从入门到精通》配套视频10.1列表基本样式10.1.1定义列表的基本样式在定义列表的项目符号样式时，应注意两点：第一，不同浏览器对于项目符号的解析效果，以及其显示位置略有不同。如果要兼容不同浏览器的显示效果，读者应该关注这些差异。本章将在后面小节中会介绍这些问题。第二，项目符号显示在里面和外面会影响项目符号与列表文本之间的距离，同时影响列表项的缩进效果。当然不同浏览器在解析时会存在差异。样吧视频教室（）《网页制作与网站开发从入门到精通》配套视频10.1列表基本样式10.1.2自定义项目符号list-style-image示例：10-2.html当同时定义项目符号类型和自定义相符符号时，这自定义项目符号将覆盖默认的符号类型。但是如果list-style-type属性值为none或指定外部的图标文件路径不能被显示时，则list-style-type属性将发挥作用。样吧视频教室（）《网页制作与网站开发从入门到精通》配套视频10.1列表基本样式10.1.3使用背景图像定义项目符号使用背景图像定义项目符号需要掌握两个设计技巧：第一，应先隐藏列表结构的默认项目符号。方法是设置list-style-type的属性值为none。第二，为列表项（li元素）定义背景图像，用来指定要显示的项目符号，并利用前面章节中学习的方法精确控制背景图像的位置。同时还应定义列表项（li元素）左侧空白，否则背景图像会隐藏到列表文本下了。示例：10-3.html样吧视频教室（）《网页制作与网站开发从入门到精通》配套视频10.2列表布局导航菜单列表结构列表布局样吧视频教室（）《网页制作与网站开发从入门到精通》配套视频10.2列表布局10.2.1垂直布局样式列表在默认状态下会以垂直布局形式显示，这是一种符合人眼视觉移动的布局效果。因此，当你希望设计导航菜单显示垂直列表形式时，那么需要CSS表现层的代码就会非常少了。示例：10-4.html样吧视频教室（）《网页制作与网站开发从入门到精通》配套视频10.2列表布局10.2.1垂直布局样式第一，列表项目中的超链接（a元素）应定义为块状显示。我们知道a元素是一个行内元素，就无法控制其宽度和高度的，同时由于行内元素自身的显示特性，使外部列表项目的布局形成虚设，这不利于用户使用体验。所以不管你的导航栏样式如何设计，都应在把超链接定义块状显示。第二，由于块状元素默认显示为100%的宽度，但是一个导航栏的宽度不可能满行显示，所以一般都应该限制导航栏的宽度，这个宽度可以根据页面的具体布局来设置。定义导航栏的宽度有多种方法。方法一是定义列表的宽度（ul或ol元素），这样其包含的列表项目和超链接都被限制在这个范围内；方法二是定义列表项目（li元素）的宽度，这样外包含框（ul或ol元素）就能够腾出精力设计其他效果；方法三是定义超链接（a元素）的宽度，因为在某些情况为ul、ol或li定义宽度会带来布局上的问题，有时也可能带来兼容性的问题。第三，应该考虑浏览器的兼容性问题。不同浏览器对于列表样式在解析时存在一定的差异性，特别是IE6及其以下版本浏览器，有时表现就很倔，很容易让初学者生畏。例如，我们以上面这个示例的HTML结构为基础，设计一个立体效果的导航菜单，其中CSS代码如下。示例：10-5.html样吧视频教室（）《网页制作与网站开发从入门到精通》配套视频10.2列表布局10.2.1垂直布局样式列表中IE的双倍问题：方法一，为超链接定义一个宽度，这样就可以避免此类问题发生。方法二，如果觉得定义宽度存在一定的局限性，在特定布局中可能会破坏页面结构，这可以使用IE浏览器的私有属性来定义。zoom属性方法三，定义列表项目为行内显示。示例：10-6.html（问题），10-7.html（解决）样吧视频教室（）《网页制作与网站开发从入门到精通》配套视频10.2列表布局10.2.1垂直布局样式列表中IE的双倍问题：第四，对于IE6及其以下版本中还存在一个Bug。就是当设置超链接为块状显示时，虽然在其他浏览器中能够使整个方块区域都可以处于点击状态，但是在IE6及其以下版本中必须确保鼠标指针移动到链接的文本区域内才有效。因此必须为超链接定义一个高度。如果顾及高度值会对IE7和非IE浏览器的影响，这不妨使用如下Hack技巧，单独为在IE6及其以下版本浏览器定义高度.*html#menulia{/*兼容IE浏览器布局，激活鼠标点击区域*/height:1px;}示例：10-8、9、10.html样吧视频教室（）《网页制作与网站开发从入门到精通》配套视频10.2列表布局10.2.2水平布局样式水平布局的核心是：如何把多行显示的列表项目控制在单行内显示。当然，把多行列表项目控制在一行内显示可以有多种方法。样吧视频教室（）《网页制作与网站开发从入门到精通》配套视频10.2列表布局10.2.2水平布局样式方法一，利用行内显示来设计水平布局。这种方法的设计核心是：定义列表项目显示为行内元素。这样就能够达到所有列表项目在同一行内显示。然后我们再根据需要借助边框、背景色和字体颜色来设计超链接的动态效果。示例：10-11.html样吧视频教室（）《网页制作与网站开发从入门到精通》配套视频10.2列表布局10.2.2水平布局样式方法二，利用浮动显示来设计水平布局。这种方法的设计核心是：定义列表项目浮动显示。通过浮动显示，则可以设计多个列表项显示在一行内。使用浮动布局列表结构，可能会存在几个问题：问题1，如果仅浮动显示列表项（即li元素），则列表结构的包含框（即ul或ol元素）将会无法包含所有列表项，自动收缩为一条线，但是在IE6及其以下版本浏览器中则会强迫包含框展开以实现包含列表项。如果要解决这个问题，可以定义列表结构的包含框也浮动显示，或者通过其他方式强制包含框展开以包含列表项。示例：10-12.html样吧视频教室（）《网页制作与网站开发从入门到精通》配套视频10.2列表布局10.2.2水平布局样式问题2，当列表项目浮动显示之后，将会出现很多布局问题，这些会影响到相邻的模块位置关系，以及内部的包含的超链接显示关系。因此，你需要解决好由于浮动布局而存在各种布局兼容性问题，有关这个话题我们将在后面章节中专题讲解。样吧视频教室（）《网页制作与网站开发从入门到精通》配套视频10.3菜单样式设计10.3.1滑动样式（上）滑动菜单样式（俗称为滑动门）滑动门效果（导航菜单能够自适应宽度和高度）技术难点：第一步，设计好“门”。这个门实际上就是背景图像，滑动门一般至少需要2张背景图像，以实现闭合成门的设计效果，当然完全采用1张背景图像一样能够设计出滑动门效果第二步，设计好门轴，至少需要2个元素配合使用才能够使门自由推拉。背景图像需要安装在对应的门轴之上才能够自由推拉，从而滑动效果。一般在列表结构中，可以利用li和a元素配合使用。示例：10-13.html样吧视频教室（）《网页制作与网站开发从入门到精通》配套视频10.3菜单样式设计10.3.2滑动样式（下）如果说第一种方法是水平方向的滑动，那么第二种方法就是垂直方向的滑动。设计几个大小相同但效果略有变化的图片，然后把它们在垂直方向上拼合在一起。示例：10-14.html样吧视频教室（）《网页制作与网站开发从入门到精通》配套视频10.3菜单样式设计10.3.3Tab样式Tab菜单的设计核心是：利用CSS根据浏览者的选择来决定隐藏或显示的菜单内容，实际上Tab菜单所包含的全部内容都已经下载到客户端浏览器中，只不过利用CSS隐藏部分内容的显示。一般Tab菜单仅会显示一个Tab菜单项。只有当用户单击选择之后才会显示其他Tab菜单所指定你的内容。通俗所Tab菜单就是一个普通的导航菜单并被捆绑在一起的分类内容框，由导航菜单项来决定内容包含框中包含内容的显示和隐藏。样吧视频教室（）《网页制作与网站开发从入门到精通》配套视频10.3菜单样式设计10.3.3Tab样式Tab菜单的设计核心是：利用CSS根据浏览者的选择来决定隐藏或显示的菜单内容，实际上Tab菜单所包含的全部内容都已经下载到客户端浏览器中，只不过利用CSS隐藏部分内容的显示。一般Tab菜单仅会显示一个Tab菜单项。只有当用户单击选择之后才会显示其他Tab菜单所指定你的内容。通俗所Tab菜单就是一个普通的导航菜单并被捆绑在一起的分类内容框，由导航菜单项来决定内容包含框中包含内容的显示和隐藏。示例：10-15.html样吧视频教室（）《网页制作与网站开发从入门到精通》配套视频10.3菜单样式设计10.3.4导航下拉面板样式设计下拉导航面板的核心就是：如何设计兼容不同浏览器的HTML文档结构。它设计思路就是在超链接（a元素）内部包含一个面板结构，当鼠标移过超链接时，自动显示这个面板，而在默认状态隐藏其显示。但是由于不同浏览器对于超链接a元素包含其他结构的解析存在很大不同，甚至是矛盾的。为此在设计结构时，你必须为各种主要浏览器进行考虑（如IE6、IE7和FF）。示例：10-16.html（兼容）、10-17.html样吧视频教室（）《网页制作与网站开发从入门到精通》配套视频