CSS3-设置超链接与导航条.ppt

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

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

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

3、: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盒子的css样式：#menu/*设置menu盒子*/border:1px solid#ccc;font-family:Arial;font-size:

4、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;/*制作菜单分隔线*/height:1em;4、设置鼠标悬停状态的CSS样式：#menu a:hover color:#FF0;/*改变文字颜色*/border-top:8px solid#0E0;/

5、*改变分隔线颜色*/,5、制作横竖自由转换的导航条,#menu adisplay:block;/*用块方式显示行内元素*/float：left/*制作横向导航条时需要*/,四、用CSS属性设置鼠标指针效果-cursor属性,cursor定制的鼠标属性值及指针效果,五、设置无序或有序列表的样式,准备html代码：,HomeContact usWeb DevWeb DesignMap,5.1 用CSS设置列表的符号：list-style-type属性,ie中有效的值：,Ulfont-size:0.9em;color:#00458c;list-style-type:circle;/*设置空心圆符号*

6、/,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 font-size:0.9em;color:#00458c;list-style-image:url(list-img/li1.gif);list-style-position:inside;,3、设置加点线下边框：ul li border-bottom:

7、#999 1px dashed;4、设置超链接整体样式：ul li a text-decoration:none;color:#09C;font-size:16px；padding:5px 10px；,4、设置超链接鼠标悬停状态的样式：Ul li a:hover/*鼠标经过时*/background-color:#002099;/*改变背景色*/color:#ffff00;/*改变文字颜色*/border-bottom:1px solid blue;/*鼠标经过时加下边框*/,六、设置鼠标经过图片翻转效果,技术关键是设置各种状态下显示不同的背景图片。,2、准备html代码：Home EastW

8、estNorthSouth,3、设置#navigation 容器整体效果：#navigation width:800px;font-family:Arial;font-size:14px;,4、设置超链接整体和鼠标悬停状态下的样式：#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;,九、鼠标经过时图片加边框,准备html代码：,3、设置鼠标经过时img的样式：,a:hover cursor:default;a:hover img border:#555 1px dotted,注意图片的选择器为 a:hover img，同时设置鼠标悬停a:hover的形状为default,思考：如何制作鼠标经过时图片替换,