第7課CSS4-設置超鏈接與導航條

1、1、準備代碼：、準備代碼：Home EastWestNorthSouth2、設置、設置超鏈接各種狀態(tài)下的超鏈接各種狀態(tài)下的CSS樣式：樣式：afont-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-decoration:underline;/* 下劃線 */background-color:blue; afont-fam

2、ily: Arial;font-size: .8em;text-align:center;margin:3px; Home EastWestNorthSoutha:link, a:visited border-top: 1px solid #EEEEEE;border-left: 1px solid #EEEEEE;border-bottom: 1px solid #717171;border-right: 1px solid #717171;padding:4px 10px 4px 10px;background-color: #DDD;text-decoration: none;color

3、: # A62020;2、設置超鏈接正常與已訪問狀態(tài)的樣式：、設置超鏈接正常與已訪問狀態(tài)的樣式：3、設置鼠標懸停時的、設置鼠標懸停時的CSS樣式：樣式：a:hovercolor:#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; Home Contact Us Web Dev Web D

4、esign Map #menu font-family:Arial; font-size:14px; font-weight:bold; width:120px; padding:8px; background:#000; margin:0 auto; border:1px solid #ccc; HomeContact usWeb DevWeb DesignMapUlfont-size:0.9em;color:#00458c;list-style-type: circle;1、設置空心圓的項目符號：、設置空心圓的項目符號：Ulfont-size:0.9em;color:#00458c;lis

5、t-style-type: lower-alpha; li.Special list-style-type: square; 2、設置小寫字母的項目符號：、設置小寫字母的項目符號： 首頁首頁 陽朔概況陽朔概況 景點介紹景點介紹 陽朔美食陽朔美食 陽朔購物陽朔購物 旅游方式旅游方式 陽朔交通陽朔交通 旅游預訂旅游預訂 旅游論壇旅游論壇 旅游投訴旅游投訴 navMenu1#navMenu1 background-image: url(image/nav3.jpg);width: 900px;navMenu1 ul#navMenu1 ul margin: 0px;padding: 0px;list-

6、style-type: none;navMenu1 ul li#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;navMenu1 ul li a#navMenu1 ul li a font-size: 14px;color: #FFF;text-decoration: none;display: block;margin-left: 2px;padding-right: 1em;padding-left: 1em;navMenu1 ul li a:fover#navMenu1 ul li a:hover