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

用CSS设置链接与导航菜单在HTML语言中，超链接是通过标记a来实现的，链接的具体地址则是利用a标记的href属性，代码如下：ahref=“”百度/aa{/*超链接的样式*/text-decoration:none;/*去掉下画线*/}首先跟所有HTML页面一样，建立最简单的菜单结构，本例使用和上面实例相同的HTML结构，代码如下：bodyahref=home.htmHome/aahref=east.htmEast/aahref=west.htmWest/aahref=north.htmNorth/aahref=south.htmSouth/a/bodystylea{display:block;/*设置为块级元素*/font-family:Arial;/*统一设置所有样式*/font-size:.8em;text-align:center;margin:3px;}a:link,a:visited{/*超链接正常状态、被访问过的样式*/color:#A62020;padding:4px10px4px10px;background-color:#DDD;text-decoration:none;border-top:1pxsolid#EEEEEE;/*边框实现阴影效果border-left:1pxsolid#EEEEEE;border-bottom:1pxsolid#717171;border-right:1pxsolid#717171;}a:hover{/*鼠标经过时的超链接*/color:#821818;`/*改变文字颜色*/padding:5px8px3px12px;/*改变文字位置*/background-color:#CCC;/*改变背景色*/border-top:1pxsolid#717171;/*边框变换，实现“按下去”的效果*/border-left:1pxsolid#717171;border-bottom:1pxsolid#EEEEEE;border-right:1pxsolid#EEEEEE;}/style图最终效果图荧光灯效果菜单首先，从编写基本的HTML文件开始，搭建出这个菜单的基本框架，HTML代码如下。bodydivid=menuahref=#Home/aahref=#ContactUs/aahref=#WebDev/aahref=#WebDesign/aahref=#Map/a/div/body/html（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（1）现在就需要设置文字链接了。为了使5个文字链接依次竖直排列，需要将它们从“行内元素”变为“块级元素”。此外还应该为它们设置背景色和内边距，以使菜单文字之间不要过于局促。具体代码如下：#menua,#menua:visiteddisplay:block;块级元素padding:4px8px;}效果如图所示，斜线部分就是padding属性设置的内边距。（2）接下来设置文字的样式，取消下画线，并将文字设置为灰色，代码如下：color:#ccc;text-decoration:none;（3）还需要给每个菜单项的上面增加一个“荧光灯”，这可以通过设置上边框来实现，代码如下：border-top:8pxsolid#060;#menua:hover{color:#FF0;border-top:8pxsolid#0E0;}表11.2cursor定制的鼠标指针效果CSS列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。列表类型要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。例如，在一个无序列表中，列表项的标志(marker)是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。要修改用于列表项的标志类型，可以使用属性list-style-type：ul{list-style-type:square}上面的声明把无序列表中的列表项标志设置为方块。列表项图像•有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用list-style-image属性做到：•ulli{list-style-image:url(xxx.gif)}只需要简单地使用一个url()值，就可以使用图像作为标志。列表标志位置•CSS2.1可以确定标志出现在列表项内容之外还是内容内部。这是利用list-style-position完成的。简写列表样式•为简单起见，可以将以上3个列表样式属性合并为一个方便的属性：list-style，就像这样：•li{list-style:url(example.gif)squareinside}list-style的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。图11.6普通项目列表图11.7项目编号6.1简单的竖直排列菜单无需表格的菜单①基本页面②页面背景色③项目列表为普通超链接④添加边框，分割超链接⑤设置超链的样式水平菜单水平菜单可以自由地转换为竖直菜单和折行菜单玻璃效果的菜单①基本页面②设置菜单整体效果③应用滑动门技术