第6课用CSS设置链接与导航菜单_第1页
第6课用CSS设置链接与导航菜单_第2页
第6课用CSS设置链接与导航菜单_第3页
第6课用CSS设置链接与导航菜单_第4页
第6课用CSS设置链接与导航菜单_第5页
已阅读5页，还剩23页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第7章用CSS设置链接与导航菜单制作丰富的超链接特效创建按钮式超链接制作荧光灯效果的菜单控制鼠标指针设置项目列表样式创建基于列表的导航菜单应用滑动门技术的玻璃效果菜单

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

图7.2WindowsMobile网站的菜单式导航7.1制作丰富的超链接特效

在HTML语言中，超链接是通过标记<a>来实现的，链接的具体地址则是利用<a>标记的href属性，代码如下：

<ahref=“http://”>广州大学</a>

a{text-decoration:none; /*去掉下画线*/}7.1制作丰富的超链接特效可制作动态效果的CSS伪类别属性属性说明a:link超链接正常状态的样式a:visited超链接被点击过的样式a:hover超链接在鼠标经过时的样式a:active超链接被点击（激活）时的样式7.2创建按钮式超链接

首先跟所有HTML页面一样，建立最简单的菜单结构，本例使用和上面实例相同的HTML结构，代码如下：<body><divid=“menu”><ahref="home.htm">Home</a><ahref="east.htm">East</a><ahref="west.htm">West</a><ahref="north.htm">North</a><ahref="south.htm">South</a></div></body>

<head><title>按钮超链接</title><style>#menu{height:2.5em;background-color:#CCC;}

a{text-align:center; margin:20px; padding:5px10px; line-height:2.5em; text-decoration:none;}

a:link,a:visited{color:#A62020; background-color:#DDD; border-top:1pxsolid#EEEEEE; /*边框实现阴影效果*/ border-left:1pxsolid#EEEEEE; border-bottom:1pxsolid#717171; border-right:1pxsolid#717171;}a:hover{color:#821818; /*改变文字颜色*/ background-color:#CCC; /*改变背景色*/ border-top:1pxsolid#717171; /*边框变换，实现“按下去”的效果*/ border-left:1pxsolid#717171; border-bottom:1pxsolid#EEEEEE; border-right:1pxsolid#EEEEEE;}</style></head>

图7.8最终效果7.3制作荧光灯效果的菜单

图7.9荧光灯效果菜单7.3.1创建HTML框架

首先，从编写基本的HTML文件开始，搭建出这个菜单的基本框架，HTML代码如下。<html><body><divid="menu"><ahref="#">Home</a><ahref="#">ContactUs</a><ahref="#">WebDev</a><ahref="#">WebDesign</a><ahref="#">Map</a> </div> </body></html>7.3.2设置容器的CSS样式

（1）现在设置菜单div容器的整体区域样式，设置菜单的宽度、背景色，以及文字的字体和大小。在HTML文件的head部分增加CSS样式表代码如下。

<styletype="text/css">#menu{font-family:Arial;font-size:14px;font-weight:bold;width:120px;padding:8px;background:#000;margin:0auto;border:1pxsolid#ccc;}</style>

7.3.3设置菜单项的CSS样式

（1）现在就需要设置文字链接了。为了使5个文字链接依次竖直排列，需要将它们从“行内元素”变为“块级元素”。此外还应该为它们设置背景色和内边距。具体代码如下：

#menua,#menua:visited{

display:block;padding:4px8px;

（2）接下来设置文字的样式，取消下画线，并将文字设置为灰色，代码如下：

color:#ccc;text-decoration:none;

（3）还需要给每个菜单项的上面增加一个“荧光灯”，这可以通过设置上边框来实现，代码如下：

border-top:8pxsolid#060;}

文字链接的代码：#menua,#menua:visited{

display:block; padding:4px8px;

color:#ccc; text-decoration:none; border-top:8pxsolid#060; height:1em; }图7.14在Firefox浏览器中的效果

鼠标经过文字链接的代码：#menua:hover{ color:#FF0; border-top:8pxsolid#0E0; }图7.14在Firefox浏览器中的效果7.4控制鼠标指针

表7.2 cursor定制的鼠标属性值及指针效果7.5设置项目列表样式

7.5.1列表的符号通常的项目列表主要采用<ul>或者<ol>标记，然后配合<li>标记列出各个项目。项目列表符号可用如下属性设置：list-style-type:

图7.16普通项目列表7.5.2图片符号

除了传统的各种项目符号外，CSS还提供了属性list-style-image，可以将项目符号显示为任意的图片，例如有下面一段代码。

<head><title>项目列表</title><style>ul{font-size:0.9em;color:#00458c;list-style-image:url(icon1.jpg);}</style></head><body><ul><li>Home</li><li>Contactus</li><li>WebDev</li><li>WebDesign</li><li>Map</li></ul></body>在IE

7和Firefox中的显示效果不一样图7.19图片符号在IE

7和Firefox中的显示效果一样的做法

<head><title>项目列表</title><style>ul{font-size:0.9em;color:#00458c;list-style-type:none;}li{background:url(icon1.jpg)no-repeat; /*添加为背景图片*/

padding-left:25px;} /*设置图标与文字的间隔*/</style></head><body><ul><li>Home</li><li>Contactus</li><li>WebDev</li><li>WebDesign</li>

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论