《第5课CSS3-设置超链接与导航条.ppt》由会员分享，可在线阅读，更多相关《第5课CSS3-设置超链接与导航条.ppt（24页珍藏版）》请在三一文库上搜索。
1、第7课 CSS-4,用css设置超链接与导航条,一、超链接的四种状态,在html语言中，超链接通过标记来实现的，其默认的显示效果为蓝色加下划线。 利用css可以设置超链接各种状态下的样式，包括字体、颜色和背景。 Css利用伪类选择器设置标记的不同状态。,超链接有四种状态：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。 a: link color: 白色 /* 未访问的链接 */ a:visited color: 蓝色 /* 已访问的链接 */ a:hover color: 红色 /* 鼠标移动到链接上 */ a:active color: 绿色 /* 选定的链接 */,注意： 在 CS
2、S 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 伪类名称对大小写不敏感。,1、准备代码： Home East West North South ,未设置超链接样式,2、设置超链接各种状态下的CSS样式： a /* 超链接整体外观 */ font-size:14px; font-family:“”; line-height:50px; padding:20px a:link /* 超链接正常状态下的样式 */ color:red; /* 红色 */ text-d
3、ecoration:none; /* 无下划线 */ a:visited /* 访问过的超链接 */ color:black; /* 黑色 */ text-decoration:none; a:hover /* 鼠标指针经过时的超链接 */ color:yellow; /* 黄色 */ text-decoration:underline;/* 下划线 */ background-color:blue; ,设置超链接样式后,效果2：制作横向或竖向的荧光灯效果导航条,1、准备代码： Home Contact Us Web Dev Web Design Map ,未设置CSS样式,2、设置#menu
4、盒子的css样式： #menu /*设置menu盒子*/ border:1px solid #ccc; font-family:Arial; font-size:14px; font-weight:bold; width:120px; padding:8px; background:#000; ,设置#menu的样式后,3、设置超链接 a 的整体样式： #menu a display:block; /*用块方式显示行内元素*/ padding:4px 8px; color:#ccc; text-decoration:none; border-top:8px solid #060; /*制作菜单
5、分隔线*/ height:1em; 4、设置鼠标悬停状态的CSS样式： #menu a:hover color:#FF0; /*改变文字颜色*/ border-top:8px solid #0E0; /*改变分隔线颜色*/ ,5、制作横竖自由转换的导航条,#menu a display:block; /*用块方式显示行内元素*/ float：left /*制作横向导航条时需要*/ ,四、用CSS属性设置鼠标指针效果-cursor属性,cursor定制的鼠标属性值及指针效果,五、设置无序或有序列表的样式,准备html代码：, Home Contact us Web Dev Web Design
6、Map ,5.1 用CSS设置列表的符号： list-style-type属性,ie中有效的值：,Ul font-size:0.9em; color:#00458c; list-style-type: circle; /* 设置空心圆符号 */ ,1、设置空心圆的项目符号：,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、设置图片或符号的位置： Ul
7、 font-size:0.9em; color:#00458c; list-style-image: url(list-img/li1.gif); list-style-position:inside; ,3、设置加点线下边框： ul li border-bottom: #999 1px dashed ; 4、设置超链接整体样式： ul li a text-decoration:none; color:#09C; font-size:16px； padding:5px 10px； ,4、设置超链接鼠标悬停状态的样式： Ul li a:hover /* 鼠标经过时 */ background-c
8、olor:#002099; /* 改变背景色 */ color:#ffff00; /* 改变文字颜色 */ border-bottom:1px solid blue; /* 鼠标经过时加下边框 */ ,六、设置鼠标经过图片翻转效果,技术关键是设置各种状态下显示不同的背景图片。,2、准备html代码： Home East West North South ,3、设置#navigation 容器整体效果： #navigation width:800px; font-family:Arial; font-size:14px; ,4、设置超链接整体和鼠标悬停状态下的样式： #navigation a
9、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; ,九、鼠标经过时图片加边框,准备html代码：,3、设置鼠标经过时img的样式：,a:hover cursor: default; a:hover img border: #555 1px dotted ,注意图片的选择器为 a:hover img ，同时设置鼠标悬停a:hover的形状为default,思考：如何制作鼠标经过时图片替换,