第10章 设计列表与菜单样式.pptxVIP

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定义宽度会带来布局上的问题，有时也可能带来兼容性的问题。 第三，应该考虑浏览器的兼容性问题。不同