用CSS设置链接与导航菜单.ppt

网页制作综合技术教程 第3部分 CSS样式设计 第11章 用CSS设置 链接与导航菜单 在一个网站中，所有页面都会通过超链 接相互链接在一起，这样才会形成一个有机 的整体。 在各种网站中，导航都是网页中最重要 的组成部分之一。 因此，也出现了各式各样非常美观、实 用性很强的导航样式，如图11.1所示的是 Microsoft公司关于Office的网站，上部的导 航条和Office 2007软件风格非常一致。 11.1 丰富的超链接特效 在HTML中，超链接是通过a标记来 实现的，链接的具体地址则是利用a标记的 href属性设置，例如： a href=前沿视频教室/a 在默认的浏览器浏览方式下，超链接统 一为蓝色并且有下画线，被点击过的超链接 则为紫色并且也有下画线，如图11.3所示。 a{ /* 超链接的样式 */ text-decoration:none; /* 去掉下画线 */ } 11.2 控制鼠标指针 测试鼠标指针 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / title测试鼠标/title /head style p{ cursor:wait} /style body p 测试鼠标/p /body /html display:block 通过该语句，超级链接被设置成了块元素。当鼠标指针进入该块的任何部分都会被激活，而不是仅在文字上方时才被激活。 float:left或float:right命令，对象就会向左或向右移动直到遇到边框( border) 、填充( padding） 、边界( margin ）或者另一个块对象的边缘为止 * * * 丰富的超链接特效 11.1 控制鼠标指针 11.2 设置项目列表样式 11.3 创建简单的导航菜单举例 11.4 图11.1 Office网站导航风格与软件风格一致 图11.3 普通的超链接 图11.4 没有下划线的超链接 在超链接上点击时，即“当前激活”时超链接的样式 a:active 鼠标指针经过超链接时的样式 a:hover 被点击过的超链接的样式 a:visited 超链接的普通样式，即正常浏览状态的样式 a:link 说 明 属 性 表11.1 可制作动态效果的CSS伪类别属性 表11.2 cursor定制的鼠标指针效果 3.2.2 层的应用 1. 图层的创建 2. 创建嵌套图层 3. 层的属性设置 4. 图层的实际应用 1. 图层的创建 图层也是网页制作中用于定位元素或者布局的一种技术， 但是图层比表格更灵活，它能够将层中的内容摆放到浏 览器的任意位置，同时放入到层中的HTML元素包括： 文字、图像、动画甚至是图层。 1. 图层的创建 body div id=Layer1 style=position:absolute; left:29px; top:12px; width:165px; height:104px; /div /body 创建一个图层的基本语法： 认识“层”面板 “层”面板是对层进行管理的场所，可以方便地查看层的结构。要显示或隐藏“层”面板，可选择[窗口]?[层]菜单命令或按【F2】键。 1. 图层的创建 background-color DIV 背景的颜色。 layer-background-color Netscape 的 DIV 背景颜色. html head title层的创建/title /head body div id=Layer1 style=position:absolute; left:29px; top:12px; width:165px; height:104px; background-color: #666666; layer-background-color: #666666; border: 1px none #000000; p技术凝聚实力 br nbsp;nbsp;nbsp;nbsp;专业创新出版 /p pnbsp; /p /div /body /html HTML