Web前端开发实例教程——HTML5 CSS3 JavaScript 第8章 使用CSS设置链接与导航.pptVIP

第8章 使用CSS设置链接与导航 Web前端开发实例教程 ——HTML5+CSS3+JavaScript 8.1 使用CSS设置链接 8.1.1 设置文字链接的外观 通过CSS可以设置超链接的各种属性，而且通过伪类还可以制作出许多动态效果。 【例8-1】设置文字链接的外观，鼠标未悬停时文字链接的效果如图8-1（a）所示，鼠标悬停在文字链接上时的效果如图8-1（b）所示。 8.1 使用CSS设置链接 8.1.1 设置文字链接的外观 【例8-2】制作网页中不同区域的链接效果，鼠标经过导航区域的链接风格与鼠标经过和我联系文字的链接风格截然不同，本例文件8-2.html在浏览器中显示的效果如图8-2所示。 8.1 使用CSS设置链接 8.1.2 图文链接 网页设计中对文字链接的修饰不仅限于增加边框、修改背景颜色等方式，还可以利用背景图片将文字链接进一步的美化。 【例8-3】图文链接，鼠标未悬停时文字链接的效果如图8-3（a）所示，鼠标悬停在文字链接上时的效果如图8-3（b）所示。 8.1 使用CSS设置链接 8.1.3 按钮式链接 按钮式链接的实质就是将链接样式的4个边框的颜色分别进行设置。 【例8-4】制作按钮式超链接，当鼠标悬停到按钮上时，可以看到超链接类似按钮“被按下”的效果，如图8-4所示。 8.2 使用CSS设置列表 8.2.1 表格布局的缺点 在表格布局时代，类似于新闻列表这样的效果，一般采用表格来实现，该列表采用多行多列的表格进行布局。 从表格的结构标签来看，标签的对数较多，结构比较复杂。在表格布局中，主要是用到表格的相互嵌套使用，这样就会造成代码的复杂度很高。同时，使用表格布局不利于搜索引擎抓取信息，直接影响到网站的排名。 8.2 使用CSS设置列表 8.2.2 列表布局的优势 采用CSS样式对整个页面布局时，列表标签的作用被充分挖掘出来。从某种意义上讲，除了描述性的文本，任何内容都可以认为是列表。使用列表布局来实现新闻列表，不仅结构清晰，而且代码数量明显减少，如图8-6所示。 8.2 使用CSS设置列表 8.2.3 CSS列表属性 1．列表类型 通常项目列表主要采用ul或ol标签，然后配合li标签罗列各个项目。 【例8-5】设置列表类型，本例页面8-5.html的显示效果如图8-7所示。 8.2 使用CSS设置列表 8.2.3 CSS列表属性 2．列表项图像符号 list-style-image属性的属性值包括URL（图像的路径）、none（默认值，无图像被显示）和inherit（从父元素继承属性，部分浏览器对此属性不支持）。 【例8-7】设置列表项图像符号，本例页面8-7.html的显示效果如图8-11所示。 8.2 使用CSS设置列表 8.2.3 CSS列表属性 3．列表项位置 list-style-position属性用于设置在何处放置列表项标记，其属性值只有两个关键词outside（外部）和inside（内部）。 【例8-8】设置列表项位置，本例页面8-8.html的显示效果如图8-12所示。 8.2 使用CSS设置列表 8.2.4 图文信息列表 图文信息列表其实就是图文混排的一部分，在处理图像和文字之间的关系时大同小异，下面以一个示例讲解图文信息列表的实现。 【例8-9】使用图文信息列表制作珠宝商城产品图文列表，本例页面8-9.html的显示效果如图8-14所示。 8.3 创建导航菜单 8.3.1 普通的超链接导航菜单 普通的超链接导航菜单的制作比较简单，主要采用将文字链接从“内联元素”变为“块级元素”的方法来实现。 【例8-10】制作荧光灯效果的菜单，鼠标未悬停在菜单项上时的效果如图8-18（a）所示，鼠标悬停在菜单项上时的效果如图8-18（b）所示。 8.3 创建导航菜单 8.3.2 纵向列表模式的导航菜单 1．纵向列表模式导航菜单的特点 纵向导航菜单的内容并没有逻辑上的先后顺序，可以使用无序列表来实现。 【例8-11】制作纵向列表模式的导航菜单，鼠标未悬停在菜单项上时的效果如图8-22（a）所示，鼠标悬停在菜单项上时的效果如图8-22（b）所示。 8.3 创建导航菜单 8.3.2 纵向列表模式的导航菜单 2．案例——珠宝商城产品分类纵向导航菜单 【例8-12】制作珠宝商城产品分类纵向导航菜单，本例文件8-12.html的页面效果如图8-25所示。 8.3 创建导航菜单 8.3.3 横向列表模式的导航菜单 1．横向列表模式导航菜单的特点 在保持原有HTML结构不变的情况下，将纵向导航转变成横向导航最重要的环节就是设置li标签为浮动。 【例8-13】制作横向列表模式的导航菜单，鼠标未悬停在菜单项上时的效果如图8-28（a