2、去掉超链接图片的边框：
<style> a:link img,a:visited img { border: #FFF 1px dotted } </style>
注意：如果边框设置为none，则鼠标经过 图片加边框会出现跳动，因此把边框线设为 背景色一样即可。
3、设置鼠标经过时img的样式：
a:hover { cursor: default; } a:hover img { border: #555 1px dotted }
a: link {color: 白色}
/* 未访问的链接 */ /* 已访问的链接 */ /* 鼠标移动到链接上 */ /* 选定的链接 */
a:visited {color: 蓝色}
a:hover {color: 红色} a:active {color: 绿色}
注意： 1. 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 2. 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 3. 伪类名称对大小写不敏感。
第7课 CSS-4
用css设置超链接与导航条
一、<a>超链接的四种状态
1. 在html语言中，超链接通过<a>标记来实 现的，其默认的显示效果为蓝色加下划线。
2. 利用css可以设置超链接各种状态下的样式， 包括字体、颜色和背景。 3. Css利用伪类选择器设置<a>标记的不同状 态。
超链接有四种状态：活动状态，已被访问状 态，未被访问状态，和鼠标悬停状态。
未设置超链接样式
2、设置<a>超链接各种状态下的CSS样式： <style> a{ /* 超链接整体外观 */ font-size:14px; font-family:“”; line-height:50px; padding:20px } a:link { /* 超链接正常状态下的样式 */ color:red; /* 红色 */ text-decoration:none; /* 无下划线 */ } a:visited { /* 访问过的超链接 */ color:black; /* 黑色 */ text-decoration:none; } a:hover { /* 鼠标指针经过时的超链接 */ color:yellow; /* 黄色 */ text-decoration:underline;/* 下划线 */ background-color:blue; }
5.2 用CSS设置图片符号及位置： list-style-image和list-style-position
1、设置列表的图片符号：
Ul { font-size:0.9em; color:#00458c;
list-style-image: url(list-img/li1.gif);
}
2、设置图片或符号的位置：
3、设置超链接 a 的整体样式：
#menu a { display:block; /*用块方式显示行内元素*/ padding:4px 8px; color:#ccc; text-decoration:none; border-top:8px solid #060; /*制作菜单分隔线*/ height:1em; }
4、设置鼠标悬停状态的CSS样式：
#menu a:hover { color:#FF0; /*改变文字颜色*/ border-top:8px solid #0E0; /*改变分隔线颜色*/ }
5、制作横竖自由转换的导航条
#menu a
{ display:block; /*用块方式显示行内元素 */ float：left /*制作横向导航条时需要*/ }
5.1 用CSS设置列表的符号： list-style-type属性
ie中有效的值：
值 none disc circle square decimal decimal-leading-zero lower-roman upper-roman 描述 无标记。 默认。标记是实心圆。 标记是空心圆。 标记是实心方块。 标记是数字。 0开头的数字标记。(01, 02, 03, 等。) 小写罗马数字(i, ii, iii, iv, v, 等。) 大写罗马数字(I, II, III, IV, V, 等。)
九、鼠标经过时图片加边框
1. 准备html代码：
<body> <a href="#" ><img src="cup.gif" /></a> <a href="#" ><img src="cup.gif" /></a> <a href="#" ><img src="cup.gif" /></a> </body>
1、准备代码：
<body> <div id=“menu”> <a href="home.htm">Home</a> <a href="east.htm">East</a> <a href="west.htm">West</a> <a href="north.htm">North</a> <a href="south.htm">South</a> </div> </body>
注意图片的选择器为 a:hover img ，同时 设置鼠标悬停a:hover的形状为default
思考：如何制作鼠标经过时图片替换
lower-alpha
upper-alpha
小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
1、设置空心圆的项目符号：
Ul { font-size:0.9em; color:#00458c; list-style-type: circle; /* 设置空心圆符号 */ }
Ul {
font-size:0.9em; color:#00458c; list-style-image: url(list-img/li1.gif);
list-style-position:inside;
}
3、设置<li>加点线下边框：
ul li { border-bottom: #999 1px dashed ;
</div> </body：
#navigation { width:800px; font-family:Arial; font-size:14px; }
4、设置<a>超链接整体和鼠标悬停状态下的样式：
#navigation a { line-height:30px; /*设置行高*/ color:#3F3; /*设置字体颜色*/ background-image:url(list-img/bg-g1.jpg); /*设置背景图片*/ padding:4px 10px; /*设置边框与文字的距离*/ text-decoration:none; } #navigation li a:hover { background-image:url(list-img/bg-g2.jpg); /*设置背景图片*/ color: #0FF; }
设置超链接样式后
效果2：制作横向或竖向的荧光灯效果导航条
1、准备代码：
<body> <div id="menu"> <a href="#" id="first"> Home </a> <a href="#"> Contact Us</a> <a href="#"> Web Dev</a> <a href="#"> Web Design</a> <a href="#" id="last"> Map </a> </div> </body>
未设置CSS样式
2、设置#menu盒子的css样式：
<style> #menu { /*设置menu盒子*/ border:1px solid #ccc; font-family:Arial; font-size:14px; font-weight:bold; width:120px; padding:8px; background:#000; } </style> 设置#menu的样式后
四、用CSS属性设置鼠标指针效果--cursor属性
cursor定制的鼠标属性值及指针效果
五、设置无序或有序列表的样式
准备html代码：
<body> <ul> <li><a href="#">Home</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Web Design</a></li> <li><a href="#">Map</a></li> </ul> </body>
![教学设计-建立超链接——制作导航条[1]](https://img.taocdn.com/s1/m/0fbd55db551810a6f52486e1.png)
