第5课 CSS3-设置超链接及导航条.ppt

第7课 CSS-4 用css设置超链接与导航条 一、a超链接的四种状态 在html语言中，超链接通过a标记来实现的，其默认的显示效果为蓝色加下划线。 利用css可以设置超链接各种状态下的样式，包括字体、颜色和背景。 Css利用伪类选择器设置a标记的不同状态。 超链接有四种状态：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。 a: link {color: 白色} /* 未访问的链接 */ a:visited {color: 蓝色} /* 已访问的链接 */ a:hover {color: 红色} /* 鼠标移动到链接上 */ a:active {color: 绿色} /* 选定的链接 */ 效果2：制作横向或竖向的荧光灯效果导航条 5、制作横竖自由转换的导航条 #menu a { display:block; /*用块方式显示行内元素*/ float：left /*制作横向导航条时需要*/ } 四、用CSS属性设置鼠标指针效果--cursor属性 五、设置无序或有序列表的样式 准备html代码： 5.1 用CSS设置列表的符号： list-style-type属性 5.2 用CSS设置图片符号及位置：list-style-image和list-style-position 3、设置li加点线下边框： ul li { border-bottom: #999 1px dashed ; } 4、设置a超链接整体样式： ul li a { text-decoration:none; color:#09C; font-size:16px； padding:5px 10px； } 六、设置鼠标经过图片翻转效果 技术关键是设置a各种状态下显示不同的背景图片。 九、鼠标经过时图片加边框 准备html代码： 思考：如何制作鼠标经过时图片替换 * * 注意： 在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。 伪类名称对大小写不敏感。 1、准备代码： body div id=“menu” a href=home.htmHome/a a href=east.htmEast/a a href=west.htmWest/a a href=north.htmNorth/a a href=south.htmSouth/a /div /body 未设置超链接样式 2、设置a超链接各种状态下的CSS样式： style a{ /* 超链接整体外观 */ font-size:14px; font-family:“”; line-height:50px; padding:20px } a:link { /* 超链接正常状态下的样式 */ color:red; /* 红色 */ text-decoration:none; /* 无下划线 */ } a:visited { /* 访问过的超链接 */ color:black; /* 黑色 */ text-decoration:none; } a:hover { /* 鼠标指针经过时的超链接 */ color:yellow; /* 黄色 */ text-decoration:underline;/* 下划线 */ background-color:blue; } /style 设置超链接样式后 1、准备代码： body div id=menu a href=# id=first Home /a a href=# Contact Us/a a href=# Web Dev/a a href=# Web Design/a a href=# id=last Map /a /div /body 未设置CSS样式 2、设置#menu盒子的css样式： style #menu { /*设置menu盒子*/ border:1px solid #ccc; font-family:Arial; font-size:14px; font-weight:bold; width:120px; padding:8px; background:#000; } /style 设置#menu的样式后 3、设置超链接 a 的整体样式： #menu a { display:block;