[工学]第7章用CSS设置超链接与导航菜单.ppt

CSS网页设计标准教程 第2部分 CSS专题技术 第 7 章 用CSS设置 超链接与导航菜单 在一个网站中，所有页面都会通过超链接相互链接在一起，这样才会形成一个有机的网站。 因此在各种网站中，导航都是网页中最重要的组成部分之一。 因此，也出现了很多各式各样非常美观、实用性很强的导航样式，如图7.1所示的是Microsoft公司关于Office的网站，上部的导航条和Office 2007软件风格非常一致。 图7.2所示的是Microsoft Windows Mobile，它的导航使用的是菜单方式。 对于一些内容非常多的大型网站，导航就显得更重要。 7.1 制作丰富的超链接特效 在HTML语言中，超链接是通过标记a来实现的，链接的具体地址则是利用a标记的href属性，代码如下： a href=前沿视频教室/a a{ /* 超链接的样式 */ text-decoration:none; /* 去掉下画线 */ } 7.2 创建按钮式超链接 首先跟所有HTML页面一样，建立最简单的菜单结构，本例使用和上面实例相同的HTML结构，代码如下： body a href=home.htmHome/a a href=east.htmEast/a a href=west.htmWest/a a href=north.htmNorth/a a href=south.htmSouth/a /body style a{ display:block; /*设置为块级元素*/ font-family: Arial; /* 统一设置所有样式 */ font-size: .8em; text-align:center; margin:3px; } a:link, a:visited{ /* 超链接正常状态、被访问过的样式 */ color: #A62020; padding:4px 10px 4px 10px; background-color: #DDD; text-decoration: none; border-top: 1px solid #EEEEEE; /* 边框实现阴影效果 */ border-left: 1px solid #EEEEEE; border-bottom: 1px solid #717171; border-right: 1px solid #717171; } a:hover{ /* 鼠标经过时的超链接 */ color:#821818;` /* 改变文字颜色 */ padding:5px 8px 3px 12px; /* 改变文字位置 */ background-color:#CCC; /* 改变背景色 */ border-top: 1px solid #717171; /* 边框变换，实现“按下去”的效果 */ border-left: 1px solid #717171; border-bottom: 1px solid #EEEEEE; border-right: 1px solid #EEEEEE; } /style 7.3 制作荧光灯效果的菜单 7.3.1 创建HTML框架 首先，从编写基本的HTML文件开始，搭建出这个菜单的基本框架，HTML代码如下。 body div id=menu a href=# Home /a a href=# Contact Us/a a href=# Web Dev/a a href=# Web Design/a a href=# Map /a /div /body /html 7.3.2 设置容器的CSS样式 （1）现在设置菜单div容器的整体区域样式，设置菜单的宽度、背景色，以及文字的字体和大小。 在HTML文件的head部分增加CSS样式表代码如下。 style type=text/css #menu { font-family:Arial;