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

《用CSS设置超链接与导航菜单.ppt》由会员分享，可在线阅读，更多相关《用CSS设置超链接与导航菜单.ppt（30页珍藏版）》请在三一办公上搜索。

1、,用CSS设置链接与导航菜单,1 制作丰富的超链接特效,在HTML语言中，超链接是通过标记来实现的，链接的具体地址则是利用标记的href属性，代码如下：百度,a/*超链接的样式*/text-decoration:none;/*去掉下画线*/,2 创建按钮式超链接,首先跟所有HTML页面一样，建立最简单的菜单结构，本例使用和上面实例相同的HTML结构，代码如下：,Home East West North South,a display:block;/*设置为块级元素*/font-family:Arial;/*统一设置所有样式*/font-size:.8em;text-align:center;m

2、argin: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;/*改变文字颜

3、色*/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;,图 最终效果,3 制作荧光灯效果的菜单,图 荧光灯效果菜单,3.1 创建HTML框架,首先，从编写基本的HTML文件开始，搭建出这个菜单的基本框架，HTML代码如下。,Home Cont

4、act Us Web Dev Web Design Map,3.2 设置容器的CSS样式,（1）现在设置菜单div容器的整体区域样式，设置菜单的宽度、背景色，以及文字的字体和大小。在HTML文件的head部分增加CSS样式表代码如下。,#menu font-family:Arial;font-size:14px;font-weight:bold;width:120px;padding:8px;background:#000;margin:0 auto;border:1px solid#ccc;,3.3 设置菜单项的CSS样式,（1）现在就需要设置文字链接了。为了使5个文字链接依次竖直排列，需要

5、将它们从“行内元素”变为“块级元素”。此外还应该为它们设置背景色和内边距，以使菜单文字之间不要过于局促。,具体代码如下：#menu a,#menu a:visited display:block;块级元素 padding:4px 8px;,效果如图所示，斜线部分就是padding属性设置的内边距。,（2）接下来设置文字的样式，取消下画线，并将文字设置为灰色，代码如下：color:#ccc;text-decoration:none;,（3）还需要给每个菜单项的上面增加一个“荧光灯”，这可以通过设置上边框来实现，代码如下：border-top:8px solid#060;#menu a:hover

6、 color:#FF0;border-top:8px solid#0E0;,4 控制鼠标指针,表11.2 cursor定制的鼠标指针效果,5 设置项目列表样式,CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。列表类型要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。例如，在一个无序列表中，列表项的标志(marker)是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。要修改用于列表项的标志类型，可以使用属性 list-style-type：ul list-style-type:square 上面的声明把无序列表中

7、的列表项标志设置为方块。,列表项图像有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：ul li list-style-image:url(xxx.gif)只需要简单地使用一个 url()值，就可以使用图像作为标志。列表标志位置CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。简写列表样式为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style，就像这样：li list-style:url(example.gif)square inside list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。,图11.6 普通项目列表,图11.7 项目编号,6 创建简单的导航菜单,6.1 简单的竖直排列菜单,无需表格的菜单,基本页面页面背景色项目列表为普通超链接添加边框，分割超链接设置超链的样式,6.2 横竖自由转换菜单,水平菜单,水平菜单可以自由地转换为竖直菜单和折行菜单,7 应用滑动门技术的玻璃效果菜单,玻璃效果的菜单,基本页面设置菜单整体效果应用滑动门技术,