网页制作CSS设置链接与导航菜单.pptVIP

网页制作综合技术教程第3局部CSS样式设计

第11章用CSS设置链接与导航菜单

丰富的超链接特效11.1控制鼠标指针11.2设置项目列表样式11.3创建简单的导航菜单举例11.4

在一个网站中，所有页面都会通过超链接相互链接在一起，这样才会形成一个有机的整体。在各种网站中，导航都是网页中最重要的组成局部之一。

因此，也出现了各式各样非常美观、实用性很强的导航样式，如图11.1所示的是Microsoft公司关于Office的网站，上部的导航条和Office2007软件风格非常一致。

图11.1Office网站导航风格与软件风格一致

11.1丰富的超链接特效

在HTML中，超链接是通过a标记来实现的，链接的具体地址那么是利用a标记的href属性设置，例如： ahref=://前沿视频教室/a

在默认的浏览器浏览方式下，超链接统一为蓝色并且有下画线，被点击过的超链接那么为紫色并且也有下画线，如图11.3所示。

图11.3普通的超链接

a{ /*超链接的样式*/ text-decoration:none; /*去掉下画线*/ }

图11.4没有下划线的超链接

属性说明a:link超链接的普通样式，即正常浏览状态的样式a:visited被点击过的超链接的样式a:hover鼠标指针经过超链接时的样式a:active在超链接上点击时，即“当前激活”时超链接的样式表11.1 可制作动态效果的CSS伪类别属性

11.2控制鼠标指针

表11.2 cursor定制的鼠标指针效果

测试鼠标指针!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN://w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdhtmlxmlns=://w3.org/1999/xhtmlheadmeta-equiv=Content-Typecontent=text/html;charset=utf-8/title测试鼠标/title/headstylep{cursor:wait}/stylebodyp测试鼠标/p/body/html

3.2.2层的应用1.图层的创立2.创立嵌套图层3.层的属性设置4.图层的实际应用

1.图层的创立图层也是网页制作中用于定位元素或者布局的一种技术，但是图层比表格更灵活，它能够将层中的内容摆放到浏览器的任意位置，同时放入到层中的HTML元素包括：文字、图像、动画甚至是图层。

1.图层的创立bodydivid=Layer1style=position:absolute;left:29px;top:12px;width:165px;height:104px;/div/body创立一个图层的根本语法：

认识“层”面板“层”面板是对层进行管理的场所，可以方便地查看层的结构。要显示或隐藏“层”面板，可选择[窗口]?[层]菜单命令或按【F2】键。

1.图层的创立background-colorDIV背景的颜色。layer-background-colorNetscape的DIV背景颜色.htmlheadtitle层的创立/title/headbodydivid=Layer1style=position:absolute;left:29px;top:12px;width:165px;height:104px;background-color:#666666;layer-background-color:#666666;border:1pxnone#000000;p技术凝聚实力brnbsp;nbsp;nbsp;nbsp;专业创新出版/ppnbsp;/p/div/body/htmlHTML代码(例8-1)

1.图层的创立一个网页中可以使用多个层，层与层之间可以任意重叠。

2.创立嵌套图层在网页制作中，不仅只有表格可以实现嵌套的功能，图层也可以实现嵌套功能。但是层的嵌套不像表格的那么复杂，它不需要在层标记中嵌套层标记，只要添加层的标记，进行属性上的设置就可以实现。根本语法divid=Layer1style=position:absolute;left:29px;top:12px;width:165px