第7课 CSS-4.pptxVIP

第7课 CSS-4;一、a超链接的四种状态;超链接有四种状态：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。 a: link {color: 白色} /* 未访问的链接 */ a:visited {color: 蓝色} /* 已访问的链接 */ a:hover {color: 红色} /* 鼠标移动到链接上 */ a:active {color: 绿色} /* 选定的链接 */;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;效果2：制作横向或竖向的荧光灯效果导航条;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 ;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、制作横竖自由转换的导航条;四、用CSS属性设置鼠标指针效果--cursor属性;五、设置无序或有序列表的样式;5.1 用CSS设置列表的符号： list-style-type属性;Ul { font-size:0.9em; color:#00458c; list-style-type: circle; /* 设置空心圆符号 */ };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； }; 4、设置a超链接鼠标悬停状态的样式： Ul li a:hover /* 鼠标经过时 */ { background-color:#002099; /* 改变背景色 */ color:#ffff00; /* 改变文字颜色 */ border-bottom:1px solid blue; /* 鼠标经过时加下边框 */ };六、设置鼠标经过图片翻转效果;2、准备html代码： body div id=navigation a href=home.htmHome/a a href=east.htmEast/a a href=west.htmWest/a a href=north.htmNor