第5课CSS3-设置超链接与导航条

1、第7课 CSS-4用css设置超链接与导航条1一、超链接的四种状态在html语言中，超链接通过标记来实现的，其默认的显示效果为蓝色加下划线。利用css可以设置超链接各种状态下的样式，包括字体、颜色和背景。Css利用伪类选择器设置标记的不同状态。2超链接有四种状态：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。a: link color: 白色 /* 未访问的链接 */ a:visited color: 蓝色 /* 已访问的链接 */ a:hover color: 红色 /* 鼠标移动到链接上 */ a:active color: 绿色 /* 选定的链接 */注意：在 CSS 定义中，a

2、:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。伪类名称对大小写不敏感。31、准备代码：Home EastWestNorthSouth未设置超链接样式42、设置超链接各种状态下的CSS样式：a /* 超链接整体外观 */font-size:14px;font-family:“”;line-height:50px;padding:20pxa:link /* 超链接正常状态下的样式 */color:red; /* 红色 */text-decoration:none;/* 无下划线

3、*/a:visited /* 访问过的超链接 */color:black;/* 黑色 */text-decoration:none;a:hover /* 鼠标指针经过时的超链接 */color:yellow;/* 黄色 */text-decoration:underline;/* 下划线 */background-color:blue;设置超链接样式后5效果2：制作横向或竖向的荧光灯效果导航条1、准备代码： Home Contact Us Web Dev Web Design Map 未设置CSS样式62、设置#menu盒子的css样式：#menu /*设置menu盒子*/ border:1p

4、x solid #ccc; font-family:Arial; font-size:14px; font-weight:bold; width:120px; padding:8px; background:#000; 设置#menu的样式后73、设置超链接 a 的整体样式：#menu a display:block; /*用块方式显示行内元素*/ padding:4px 8px; color:#ccc; text-decoration:none; border-top:8px solid #060; /*制作菜单分隔线*/ height:1em; 4、设置鼠标悬停状态的CSS样式：#menu

5、 a:hover color:#FF0; /*改变文字颜色*/ border-top:8px solid #0E0; /*改变分隔线颜色*/85、制作横竖自由转换的导航条#menu adisplay:block; /*用块方式显示行内元素*/float：left /*制作横向导航条时需要*/910四、用CSS属性设置鼠标指针效果-cursor属性cursor定制的鼠标属性值及指针效果11五、设置无序或有序列表的样式准备html代码： HomeContact usWeb DevWeb DesignMap 125.1 用CSS设置列表的符号： list-style-type属性值描述none无标记

6、。disc默认。标记是实心圆。circle标记是空心圆。square标记是实心方块。decimal标记是数字。decimal-leading-zero0开头的数字标记。(01, 02, 03, 等。)lower-roman小写罗马数字(i, ii, iii, iv, v, 等。)upper-roman大写罗马数字(I, II, III, IV, V, 等。)lower-alpha小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)upper-alpha大写英文字母The marker is upper-alpha (A, B, C, D, E,

7、 等。) ie中有效的值：13Ulfont-size:0.9em;color:#00458c;list-style-type: circle;/* 设置空心圆符号 */1、设置空心圆的项目符号：145.2 用CSS设置图片符号及位置：list-style-image和list-style-position1、设置列表的图片符号：Ul font-size:0.9em;color:#00458c;list-style-image: url(list-img/li1.gif);2、设置图片或符号的位置：Ul font-size:0.9em;color:#00458c;list-style-image

8、: url(list-img/li1.gif);list-style-position:inside;153、设置加点线下边框： ul li border-bottom: #999 1px dashed ;4、设置超链接整体样式： ul li a text-decoration:none; color:#09C; font-size:16px； padding:5px 10px；164、设置超链接鼠标悬停状态的样式：Ul li a:hover/* 鼠标经过时 */background-color:#002099;/* 改变背景色 */color:#ffff00;/* 改变文字颜色 */bord

9、er-bottom:1px solid blue; /* 鼠标经过时加下边框 */17六、设置鼠标经过图片翻转效果技术关键是设置各种状态下显示不同的背景图片。Bg-g1.jpgBg-g2.jpg1、准备两张背景图片：182、准备html代码：Home EastWestNorthSouth193、设置#navigation 容器整体效果：#navigation width:800px;font-family:Arial;font-size:14px;204、设置超链接整体和鼠标悬停状态下的样式：#navigation a line-height:30px;/*设置行高*/color:#3F3;

10、/*设置字体颜色*/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;21九、鼠标经过时图片加边框 准备html代码：22a:link img,a:visited img border: #FFF 1px dotted 2、去掉超链接图片的边框：注意：如果边框设置为none，则鼠标经过图片加边框会出现跳动，因此