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

10设计列表和菜单样式列表结构是标准结构中最核心部分之一。设计师喜欢使用它来构建导航菜单，不管从语义性角度分析，还是从表现层控制角度分析，使用列表结构来实现导航设计都是最佳选择。而导航菜单的设计风格在很大程度上又影响到页面的设计风格。所以，在网页设计中如何把导航菜单设计成页面的亮点，以彰显网页的设计风格就很重要了，可以说它是画龙点睛之笔，可多不可少。本章将从列表结构的基本样式讲解开始，不但升级，逐层把握列表结构的样式设计。样吧视频教室（www.css8.cn）《网页制作与网站开发从入门到精通》配套视频10.1列表基本样式10.1.1定义列表的基本样式list-style-type属性来控制项目符号的类型。样吧视频教室（www.css8.cn）《网页制作与网站开发从入门到精通》配套视频属性值说明属性值说明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样吧视频教室（www.css8.cn）《网页制作与网站开发从入门到精通》配套视频10.1列表基本样式10.1.1定义列表的基本样式在定义列表的项目符号样式时，应注意两点：第一，不同浏览器对于项目符号的解析效果，以及其显示位置略有不同。如果要兼容不同浏览器的显示效果，读者应该关注这些差异。本章将在后面小节中会介绍这些问题。第二，项目符号显示在里面和外面会影响项目符号与列表文本之间的距离，同时影响列表项的缩进效果。当然不同浏览器在解析时会存在差异。样吧视频教室（www.css8.cn）《网页制作与网站开发从入门到精通》配套视频10.1列表基本样式10.1.2自定义项目符号list-style-image示例：10-2.html当同时定义项目符号类型和自定义相符符号时，这自定义项目符号将覆盖默认的符号类型。但是如果list-style-type属性值为none或指定外部的图标文件路径不能被显示时，则list-style-type属性将发挥作用。样吧视频教室（www.css8.cn）《网页制作与网站开发从入门到精通》配套视频10.1列表基本样式10.1.3使用背景图像定义项目符号使用背景图像定义项目符号需要掌握两个设计技巧：第一，应先隐藏列表结构的默认项目符号。方法是设置list-style-type的属性值为none。第二，为列表项（li元素）定义背景图像，用来指定要显示的项目符号，并利用前面章节中学习的方法精确控制背景图像的位置。同时还应定义列表项（li元素）左侧空白，否则背景图像会隐藏到列表文本下了。示例：10-3.html样吧视频教室（www.css8.cn）《网页制作与网站开发从入门到精通》配套视频10.2列表布局导航菜单列表结构列表布局样吧视频教室（www.css8.cn）《网页制作与网站开发从入门到精通》配套视频10.2列表布局10.2.1垂直布局样式列表在默认状态下会以垂直布局形式显示，这是一种符合人眼视觉移动的布局效果。因此，当你希望设计导航菜单显示垂直列表形式时，那么需要CSS表现层的代码就会非常少了。示例：10-4.html样吧视频教室（www.css8.cn）《网页制作与网站开发从入门到精通》配套视频10.2列表布局10.2.1垂直布局样式第一，列表项目中的超链接（a元素）应定义为块状显示。我们知道a元素是一个行内元素，就无法控制其宽度和高度的，同时由于行内元素自身的显示特性，使外部列表项目的布局形成虚设，这不利于用户使用体验。所以不管你的导航栏样式如何设计，都应在把超链接定义块状显示。第二，由于块状元素默认显示为100%的宽度，但是一个导航栏的宽度不可能满行显示，所以一般都应该限制导航栏的宽度，这个宽度可以根据页面的具体布局来设置。定义导航栏的宽度有多种方法。方法一是定义列表的宽度（ul或ol元素），这样其包含的列表项目和超链接都被限制在这个范围内；方法二是定义列表项目（li元素）的宽度，这样外包含框（ul或ol元素...