《第7课_css4设置超链接与导航条剖析ppt课件》由会员分享，可在线阅读，更多相关《第7课_css4设置超链接与导航条剖析ppt课件（17页珍藏版）》请在金锄头文库上搜索。
1、第7课 CSS-4,用css设置超链接与导航条,一、超链接的四种状态,超链接有四种状态：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。 a: link color: 白色 /* 未访问的链接 */a:visited color: 蓝色 /* 已访问的链接 */a:hover color: 红色 /* 鼠标移动到链接上 */ a:active color: 绿色 /* 选定的链接 */,1、准备代码：Home East West North South ,2、设置超链接各种状态下的CSS样式：a font-size:14px; font-family:“”; line-height:50
2、px; 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; ,二、效果1：创建按钮式超链接,1、准备代码：a font-family: Arial;font-size: .8em;text-align:center;margin:3px; Home East West North South ,
3、3、设置鼠标悬停时的CSS样式：a:hover color:#821818; background-color:#CCC; border-top: 1px solid #717171; border-left: 1px solid #717171;border-bottom: 1px solid #EEEEEE;border-right: 1px solid #EEEEEE;padding:5px 8px 3px 12px; ,三、效果2：制作荧光灯效果的菜单,1、准备代码：Home Contact UsWeb Dev Web Design Map ,2、设置#menu盒子的css样式：#me
4、nu font-family:Arial; font-size:14px;font-weight:bold;width:120px; padding:8px; background:#000;margin:0 auto; border:1px solid #ccc; ,3、设置超链接在正常和已访问状态下的css样式：#menu a:link, #menu a:visited padding:4px 8px;color:#ccc; text-decoration:none;border-top:8px solid #060; height:1em;4、设置鼠标悬停状态的CSS样式：#menu a
5、:hover color:#FF0; border-top:8px solid #0E0; ,四、设置无序或有序列表的样式,准备html代码：,HomeContact usWeb DevWeb DesignMap,五：列表制作导行菜单,1、准备代码：首页阳朔概况景点介绍阳朔美食阳朔购物旅游方式阳朔交通旅游预订旅游论坛旅游投诉,2、设置navMenu1盒子的css样式：#navMenu1 background-image: url(image/nav3.jpg);width: 900px; ,3、设置navMenu1 ul的css样式：#navMenu1 ul margin: 0px;paddi
6、ng: 0px;list-style-type: none; ,4、设置navMenu1 ul li的css样式：#navMenu1 ul li line-height: 34px;background-image: url(image/nav1.jpg);background-repeat: no-repeat;background-position: left center;float: left;height: 34px;margin-left: 2px; ,5、设置navMenu1 ul li a的css样式：#navMenu1 ul li a font-size: 14px;color: #FFF;text-decoration: none;display: block;margin-left: 2px;padding-right: 1em;padding-left: 1em; ,6、设置navMenu1 ul li a:fover的css样式：#navMenu1 ul li a:hover background-image: url(image/nav2.jpg);background-repeat: no-repeat;background-position: center top; ,
