1、第7課 CSS-4用css設(shè)置超鏈接與導(dǎo)航條1一、超鏈接的四種狀態(tài)在html語言中，超鏈接通過標記來實現(xiàn)的，其默認的顯示效果為藍色加下劃線。利用css可以設(shè)置超鏈接各種狀態(tài)下的樣式，包括字體、顏色和背景。Css利用偽類選擇器設(shè)置標記的不同狀態(tài)。2超鏈接有四種狀態(tài)：活動狀態(tài)，已被訪問狀態(tài)，未被訪問狀態(tài)，和鼠標懸停狀態(tài)。a: link color: 白色 /* 未訪問的鏈接 */ a:visited color: 藍色 /* 已訪問的鏈接 */ a:hover color: 紅色 /* 鼠標移動到鏈接上 */ a:active color: 綠色 /* 選定的鏈接 */注意：在 CSS 定義中，a

2、:hover 必須被置于 a:link 和 a:visited 之后，才是有效的。在 CSS 定義中，a:active 必須被置于 a:hover 之后，才是有效的。偽類名稱對大小寫不敏感。31、準備代碼：Home EastWestNorthSouth未設(shè)置超鏈接樣式42、設(shè)置超鏈接各種狀態(tài)下的CSS樣式：a /* 超鏈接整體外觀 */font-size:14px;font-family:“”;line-height:50px;padding:20pxa:link /* 超鏈接正常狀態(tài)下的樣式 */color:red; /* 紅色 */text-decoration:none;/* 無下劃線

3、*/a:visited /* 訪問過的超鏈接 */color:black;/* 黑色 */text-decoration:none;a:hover /* 鼠標指針經(jīng)過時的超鏈接 */color:yellow;/* 黃色 */text-decoration:underline;/* 下劃線 */background-color:blue;設(shè)置超鏈接樣式后5效果2：制作橫向或豎向的熒光燈效果導(dǎo)航條1、準備代碼： Home Contact Us Web Dev Web Design Map 未設(shè)置CSS樣式62、設(shè)置#menu盒子的css樣式：#menu /*設(shè)置menu盒子*/ border:1p

4、x solid #ccc; font-family:Arial; font-size:14px; font-weight:bold; width:120px; padding:8px; background:#000; 設(shè)置#menu的樣式后73、設(shè)置超鏈接 a 的整體樣式：#menu a display:block; /*用塊方式顯示行內(nèi)元素*/ padding:4px 8px; color:#ccc; text-decoration:none; border-top:8px solid #060; /*制作菜單分隔線*/ height:1em; 4、設(shè)置鼠標懸停狀態(tài)的CSS樣式：#menu

5、 a:hover color:#FF0; /*改變文字顏色*/ border-top:8px solid #0E0; /*改變分隔線顏色*/85、制作橫豎自由轉(zhuǎn)換的導(dǎo)航條#menu adisplay:block; /*用塊方式顯示行內(nèi)元素*/float：left /*制作橫向?qū)Ш綏l時需要*/910四、用CSS屬性設(shè)置鼠標指針效果-cursor屬性cursor定制的鼠標屬性值及指針效果11五、設(shè)置無序或有序列表的樣式準備html代碼： HomeContact usWeb DevWeb DesignMap 125.1 用CSS設(shè)置列表的符號： list-style-type屬性值描述none無標記

6、。disc默認。標記是實心圓。circle標記是空心圓。square標記是實心方塊。decimal標記是數(shù)字。decimal-leading-zero0開頭的數(shù)字標記。(01, 02, 03, 等。)lower-roman小寫羅馬數(shù)字(i, ii, iii, iv, v, 等。)upper-roman大寫羅馬數(shù)字(I, II, III, IV, V, 等。)lower-alpha小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)upper-alpha大寫英文字母The marker is upper-alpha (A, B, C, D, E,

7、 等。) ie中有效的值：13Ulfont-size:0.9em;color:#00458c;list-style-type: circle;/* 設(shè)置空心圓符號 */1、設(shè)置空心圓的項目符號：145.2 用CSS設(shè)置圖片符號及位置：list-style-image和list-style-position1、設(shè)置列表的圖片符號：Ul font-size:0.9em;color:#00458c;list-style-image: url(list-img/li1.gif);2、設(shè)置圖片或符號的位置：Ul font-size:0.9em;color:#00458c;list-style-image

8、: url(list-img/li1.gif);list-style-position:inside;153、設(shè)置加點線下邊框： ul li border-bottom: #999 1px dashed ;4、設(shè)置超鏈接整體樣式： ul li a text-decoration:none; color:#09C; font-size:16px； padding:5px 10px；164、設(shè)置超鏈接鼠標懸停狀態(tài)的樣式：Ul li a:hover/* 鼠標經(jīng)過時 */background-color:#002099;/* 改變背景色 */color:#ffff00;/* 改變文字顏色 */bord

9、er-bottom:1px solid blue; /* 鼠標經(jīng)過時加下邊框 */17六、設(shè)置鼠標經(jīng)過圖片翻轉(zhuǎn)效果技術(shù)關(guān)鍵是設(shè)置各種狀態(tài)下顯示不同的背景圖片。Bg-g1.jpgBg-g2.jpg1、準備兩張背景圖片：182、準備html代碼：Home EastWestNorthSouth193、設(shè)置#navigation 容器整體效果：#navigation width:800px;font-family:Arial;font-size:14px;204、設(shè)置超鏈接整體和鼠標懸停狀態(tài)下的樣式：#navigation a line-height:30px;/*設(shè)置行高*/color:#3F3;

10、/*設(shè)置字體顏色*/background-image:url(list-img/bg-g1.jpg); /*設(shè)置背景圖片*/padding:4px 10px; /*設(shè)置邊框與文字的距離*/text-decoration:none;#navigation li a:hover background-image:url(list-img/bg-g2.jpg); /*設(shè)置背景圖片*/color: #0FF;21九、鼠標經(jīng)過時圖片加邊框 準備html代碼：22a:link img,a:visited img border: #FFF 1px dotted 2、去掉超鏈接圖片的邊框：注意：如果邊框設(shè)置為none，則鼠標經(jīng)過圖片加邊框會出現(xiàn)跳動，因此