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

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