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

ID：52266672

大小：672.01 KB

页数：24页

时间：2020-04-03

资源描述：

《CSS3-设置超链接与导航条.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

2、ive{color:绿色}/*选定的链接*/注意：在CSS定义中，a:hover必须被置于a:link和a:visited之后，才是有效的。在CSS定义中，a:active必须被置于a:hover之后，才是有效的。伪类名称对大小写不敏感。1、准备代码：HomeEastWestNorth

3、href="south.htm">South

未设置超链接样式2、设置超链接各种状态下的CSS样式：设置超链接样式后效果2：制作横向或竖向的荧光灯效果导航条1、准备代码：HomeContactUsWebDe

5、vWebDesignMap

未设置CSS样式2、设置#menu盒子的css样式：设置#menu的样式后3、设置

6、超链接a的整体样式：#menua{display:block;/*用块方式显示行内元素*/padding:4px8px;color:#ccc;text-decoration:none;border-top:8pxsolid#060;/*制作菜单分隔线*/height:1em;}4、设置鼠标悬停状态的CSS样式：#menua:hover{color:#FF0;/*改变文字颜色*/border-top:8pxsolid#0E0;/*改变分隔线颜色*/}5、制作横竖自由转换的导航条#menua{display

7、:block;/*用块方式显示行内元素*/float：left/*制作横向导航条时需要*/}四、用CSS属性设置鼠标指针效果--cursor属性cursor定制的鼠标属性值及指针效果五、设置无序或有序列表的样式准备html代码：

Home
Contactus
WebDev
WebDesign
8、href="#">Map

5.1用CSS设置列表的符号：list-style-type属性值描述none无标记。disc默认。标记是实心圆。circle标记是空心圆。square标记是实心方块。decimal标记是数字。decimal-leading-zero0开头的数字标记。(01,02,03,等。)lower-roman小写罗马数字(i,ii,iii,iv,v,等。)upper-roman大写罗马

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

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

相关文章

相关标签