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

《CSS3-设置超链接与导航条.ppt》由会员分享，可在线阅读，更多相关《CSS3-设置超链接与导航条.ppt（24页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

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

2、链接已访问的链接*/n n a:hovera:hover color:color:红色红色 /*/*鼠标移动到链接上鼠标移动到链接上鼠标移动到链接上鼠标移动到链接上*/n na:activea:active color:color:绿色绿色 /*/*选定的链接选定的链接选定的链接选定的链接*/注意：注意：1.在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。2.在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。3.伪类名称对大小写不敏感。1、准备代码：、准备代码：Home EastWestNorthSout

3、h未设置超链接样式未设置超链接样式2、设置、设置超链接各种状态下的超链接各种状态下的CSS样式：样式：a/*超链接整体外观*/font-size:14px;font-family:“”;line-height:50px;padding:20pxa:link /*超链接正常状态下的样式*/color:red;/*红色*/text-decoration:none;/*无下划线*/a:visited /*访问过的超链接*/color:black;/*黑色*/text-decoration:none;a:hover /*鼠标指针经过时的超链接*/color:yellow;/*黄色*/text-deco

4、ration: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:14px;font-weight:bold;width:120px;pa

5、dding:8px;background:#000;设置设置#menu的样式后的样式后3 3、设置超链接、设置超链接、设置超链接、设置超链接 a a 的整体样式：的整体样式：的整体样式：的整体样式：#menu a#menu a display:block;display:block;/*/*用块方式显示行内元素用块方式显示行内元素用块方式显示行内元素用块方式显示行内元素*/*/padding:4px 8px;padding:4px 8px;color:#ccc;color:#ccc;text-decoration:none;text-decoration:none;border-top:8px

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

7、隔线颜色改变分隔线颜色改变分隔线颜色*/*/5 5、制作横竖自由转换的导航条、制作横竖自由转换的导航条、制作横竖自由转换的导航条、制作横竖自由转换的导航条#menu adisplay:block;/*用块方式显示行内元素用块方式显示行内元素*/float：left /*制作横向导航条时需要制作横向导航条时需要*/四、用四、用CSS属性设置鼠标指针效果属性设置鼠标指针效果-cursor属性属性cursor定制的鼠标属性值及指针效果定制的鼠标属性值及指针效果五、设置无序或有序列表的样式五、设置无序或有序列表的样式n准备准备html代码：代码：HomeContact usWeb DevWeb Des

8、ignMap 5.1 用用CSS设置列表的符号：设置列表的符号：list-style-type属性属性值值值值描述描述描述描述nonenone无标记。无标记。无标记。无标记。discdisc默认。标记是实心圆。默认。标记是实心圆。circlecircle标记是空心圆。标记是空心圆。squaresquare标记是实心方块。标记是实心方块。decimaldecimal标记是数字。标记是数字。decimal-leading-zerodecimal-leading-zero0 0开头的数字标记。开头的数字标记。(01,02,03,(01,02,03,等。等。)lower-romanlower-roma

9、n小写罗马数字小写罗马数字(i,ii,iii,iv,v,(i,ii,iii,iv,v,等。等。)upper-romanupper-roman大写罗马数字大写罗马数字(I,II,III,IV,V,(I,II,III,IV,V,等。等。)lower-alphalower-alpha小写英文字母小写英文字母The marker is lower-alpha(a,b,c,d,e,The marker is lower-alpha(a,b,c,d,e,等。等。)upper-alphaupper-alpha大写英文字母大写英文字母The marker is upper-alpha(A,B,C,D,E,Th

10、e marker is upper-alpha(A,B,C,D,E,等。等。)ie中有效的值：中有效的值：Ulfont-size:0.9em;color:#00458c;list-style-type:circle;/*设置空心圆符号设置空心圆符号*/1、设置空心圆的项目符号：、设置空心圆的项目符号：5.2 用用CSS设置图片符号及位置：设置图片符号及位置：list-style-image和和list-style-position1、设置列表的图片符号：、设置列表的图片符号：Ul font-size:0.9em;color:#00458c;list-style-image:url(list-i

11、mg/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 ul li border-bottom:#999 1px dashed;border-bottom:#999 1px dashed;4、设置、设置超链接整体样式：超链接整体样式：ul li a ul li a text-decoration:none;text-decora

12、tion:none;color:#09C;color:#09C;font-size:16px font-size:16px；padding:5px 10px padding:5px 10px；4、设置、设置超链接鼠标悬停状态的样式：超链接鼠标悬停状态的样式：Ul li a:hover/*鼠标经过时鼠标经过时*/background-color:#002099;/*改变背景色改变背景色*/color:#ffff00;/*改变文字颜色改变文字颜色*/border-bottom:1px solid blue;/*鼠标经过时加下边框鼠标经过时加下边框*/六、设置鼠标经过图片翻转效果六、设置鼠标经过图片

13、翻转效果n技术关键是设置各种状态下显示不同的背景图片。Bg-g1.jpgBg-g2.jpg1、准备两张背景图片：、准备两张背景图片：2、准备、准备html代码：代码：Home EastWestNorthSouth3、设置、设置#navigation 容器整体效果：容器整体效果：#navigation width:800px;font-family:Arial;font-size:14px;4、设置、设置超链接整体和鼠标悬停状态下的样式：超链接整体和鼠标悬停状态下的样式：#navigation a line-height:30px;/*设置行高设置行高*/color:#3F3;/*设置字体颜色设

14、置字体颜色*/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;九、鼠标经过时图片加边框九、鼠标经过时图片加边框 1.准备html代码：a:link img,a:visited img border:#FFF 1px dotted

15、 2、去掉超链接图片的边框：、去掉超链接图片的边框：注意：如果边框设置为注意：如果边框设置为none，则鼠标经过，则鼠标经过图片加边框会出现跳动，因此把边框线设为图片加边框会出现跳动，因此把边框线设为背景色一样即可。背景色一样即可。3、设置鼠标经过时、设置鼠标经过时img的样式：的样式：a:hover cursor:default;a:hover img border:#555 1px dotted注意图片的选择器为注意图片的选择器为 a:hover img ，同时，同时设置鼠标悬停设置鼠标悬停a:hover的形状为的形状为default思考：如何制作鼠标经过时图片替换思考：如何制作鼠标经过时图片替换