HTML5+CSS3網(wǎng)頁設(shè)計與制作設(shè)置按鈕交互格式能按需求選擇超鏈接的4種偽類選擇符就行樣式效果設(shè)置。能使用偽類選擇符“clild”和“type”簡化元素選擇。能使用偽類選擇符設(shè)置D清單頁面的按鈕交互格式。任務(wù)目標

設(shè)置按鈕交互格式本次任務(wù)要求根據(jù)D清單頁面效果圖，使用CSS樣式在的基礎(chǔ)上設(shè)置該網(wǎng)頁中的按鈕交互格式。本次任務(wù)任務(wù)包括：1、設(shè)置D清單網(wǎng)頁按鈕鼠標經(jīng)過時的樣式變化；2、修改按鈕表單鼠標經(jīng)過時的陰影效果。任務(wù)描述

設(shè)置按鈕交互格式要完成D清單頁面超鏈接樣式設(shè)置，需要：學習超鏈接相關(guān)的四個偽類選擇符的語法；學習偽類選擇符選擇子元素及選擇類型子元素的方法；分析D清單頁面中按鈕交互效果，正確使用相關(guān)的樣式設(shè)置完成D清單網(wǎng)頁中按鈕的交互效果。D清單網(wǎng)頁按鈕交互效果如圖2-6-1所示。任務(wù)分析

設(shè)置按鈕交互格式任務(wù)分析圖2-6-1D清單網(wǎng)頁的按鈕網(wǎng)頁效果

設(shè)置按鈕交互格式知識與技能準備超鏈接標簽<a>通過四個偽類選擇符定義了超鏈接的四種不同狀態(tài)。偽類選擇符以“:”的形式附加在選擇符的后面，如下表2-6-1所示。

1、與超鏈接相關(guān)的四個偽類選擇符表2-6-1超鏈接的四種狀態(tài)課堂練習2-6-1制作一個漸變背景的導航欄，鼠標經(jīng)過時背景漸變色方向相反HTML代碼：CSS代碼：123456<divclass="menu"> <span>HOME</span> <span>BlOG</span> <span>ABOUT</span><span>CONTACT</span></div>12345678910span{/*導航欄默認效果*/ color:white; background:linear-gradient( tobottom, #58bdf9, #6086ef ); float:left;/*消除項與項之間的間隔*/ padding:10px20px;/*產(chǎn)生上下左右間距*/}利用漸變背景色使導航欄有立體感，通過鼠標經(jīng)過時漸變方向相反，使導航欄有動態(tài)感。如下表所示。顯示效果如圖2-6-2所示：圖2-6-2漸變背景導航欄效果課堂練習2-6-1制作一個漸變背景的導航欄，鼠標經(jīng)過時背景漸變色方向相反CSS代碼：1234567span:hover{/*鼠標經(jīng)過時效果*/background:linear-gradient(totop,#58bdf9,#6086ef);}使用hover偽類設(shè)置出導航欄鼠標經(jīng)過時的樣式改變效果：顯示效果如圖2-6-3所示：圖2-6-3鼠標經(jīng)過時導航菜單變化效果知識與技能準備通過偽類選擇符“child”，可以選擇特定的子元素進行樣式設(shè)置。要使這個選定的子元素屬性生效，它必須是某個元素的子元素，最高的父元素標簽是body。2、偽類選擇符“child”選擇指定的子元素標簽表2-6-2偽類選擇符“child”課堂練習2-6-2使用偽類選擇符選擇特定的標簽進行更改樣式屬性HTML代碼：CSS代碼：12345678910111213<div><p>第一個p：我想變藍色</p><div>第一個div：我想變紅色</div><p>第二個p：我想變紫色</p><p>第三個p：我想變粉色</p><p>最后一個p：我想變橙色</p></div><div><div>唯一的div：我想變紅色</div></div>12345678910111213141516/*其它設(shè)置省略*/p:first-child{/*選擇第1個子元素是p的標簽*/color:blue;}p:last-child{/*選擇最后1個子元素是p的標簽*/color:orange;}p:nth-child(3){/*選擇第3個子元素是p的標簽*/color:purple;}p:nth-last-child(2){/*選擇倒數(shù)第2個子元素是p的標簽*/color:pink;}div:only-child{/*選擇只有唯一一個子元素是div的標簽*/color:red;}注意觀察html的代碼結(jié)構(gòu)和代碼順序，根據(jù)表2-6-2的說明使用相應(yīng)的偽類選擇符選擇特定的標簽更改樣式屬性。課堂練習2-6-2使用偽類選擇符選擇特定的標簽進行更改樣式屬性顯示效果如圖2-6-4所示：圖2-6-4偽類選擇符選擇設(shè)置效果課堂練習2-6-3制作如下圖的導航欄制作圖2-6-5所示的導航欄，要求菜單項之間有“|”隔開，每個項之間都留有左右間距，注意該導航欄的上下邊框線的不同，以及項與項之間的邊框線間隔，第一個的左邊和最后一個的右邊這是沒有“|”的。圖2-6-5導航欄課堂練習2-6-3制作如下圖的導航欄HTML代碼：CSS代碼：1234567<ul><li><ahref="">HOME</a></li><li><ahref="">SERVICES</a></li><li><ahref="">BLOG</a></li><li><ahref="">ABOUT</a></li><li><ahref="">CONTACT</a></li></ul>1234567891011121314151617181920212223ul{/*去除列表項目符號和間隔*/list-style:none;margin:0;padding:0;}li{float:left;border-top:3pxsolidgreen;border-bottom:1pxsolidgray;height:50px;line-height:50px;/*使文字垂直居中*/}a{text-decoration:none;color:black;padding:015px;/*使文字左右有相同間隔*/border-right:1pxsolidred;/*右邊框線，高度與文字高度一樣*/}li:last-childa{border-right-color:transparent;/*最后一個列表元素的a標簽右邊框線顏色透明*/}課堂練習2-6-4利用偽類選擇符制作如下圖的表格根據(jù)偽類選擇符的奇偶數(shù)實現(xiàn)下圖2-6-6所示的表格，鼠標經(jīng)過時實現(xiàn)背景變化如圖2-6-7所示。圖2-6-6表格效果課堂練習2-6-4利用偽類選擇符制作如下圖的表格CSS代碼：CSS代碼：1234567891011table{border-collapse:collapse;}td,th{width:150px;height:30px;border:1pxsolidwhite;}tr:nth-child(2n){/*偶數(shù)行背景色*/background-color:#d3dff0;}1213141516171819202122tr:nth-child(2n+1){/*奇數(shù)行背景色*/background-color:#ebf0f7;}tr:first-child{/*首行背景色*/background-color:#5b9cd6;}td:first-child{width:30px;text-align:center;background-color:#5B9CD6;/*首列背景色*/}制作圖2-6-6所示的五行四列表格，根據(jù)首行、首列的背景相同設(shè)置，其他奇數(shù)行和偶數(shù)行不一樣的設(shè)置。課堂練習2-6-4利用偽類選擇符制作如下圖的表格圖2-6-7鼠標經(jīng)過表格時效果課堂練習2-6-4利用偽類選擇符制作如下圖的表格CSS代碼：123456tr:hovertd{/*鼠標經(jīng)過表格行時背景色的變化*/background-color:rgba(255,255,0,0.3);}tr:first-child:hovertd,tr:hovertd:first-child{background-color:#5B9CD6;}/*鼠標經(jīng)過表格行首行和首列時背景色不變化*/鼠標經(jīng)過表格時，注意首行和首列是不變化的，其他的單元格是變化的。知識與技能準備前面講的偽類選擇符“child”是某個元素的第n個子元素，不管這個父元素下的子元素是什么類型的標簽，都是一起排序的。而這里指定的是第n個類型的子元素，是以相同類型的標簽進行排序的。如p:first-of-type這個p不一定是排在父元素的第一個子元素中，這選擇的是在父元素中的第一個p標簽。3、偽類選擇符“type”選擇指定類型的子元素標簽表2-6-3偽類選擇符“type”課堂練習2-6-5使用偽類選擇符“type”相關(guān)的選擇特定的標簽進行更改樣式屬性HTML代碼：CSS代碼：12345678910<div> <div>div</div> <p>p1</p> <span>span1</span> <p>p2</p> <p>p3</p> <h3>h3-1</h3> <p>p4</p> <span>span2</span></div>12345678910111213141516/*其它設(shè)置省略*/h3:only-of-type{/*唯一的h3元素*/ color:red;}p:first-of-type{/*第一個p元素*/ color:blue;}p:nth-last-of-type(2){/*倒數(shù)第二個p元素*/ color:pink; }p:last-of-type{/*最后一個p元素*/ color:green;}span:only-of-type{ color:gold;}根據(jù)表2-6-3的說明使用相應(yīng)的偽類選擇符選擇特定的標簽更改樣式屬性，這里的順序是以標簽類型來排序的。課堂練習2-6-5使用偽類選擇符“type”相關(guān)的選擇特定的標簽進行更改樣式屬性顯示效果如圖2-6-8所示：圖2-6-8偽類選擇符“type”選擇設(shè)置效果任務(wù)實施D清單網(wǎng)頁中的的按鈕都有進行鼠標經(jīng)過時的樣式變化，并通過偽類選擇符完善高級會員中的表格樣式設(shè)置，修改表單中的按鈕鼠標經(jīng)過時陰影效果。1、設(shè)置頁面中home、apply、member模塊中的按鈕鼠標經(jīng)過時的樣式效果，鼠標經(jīng)過按鈕時背景顏色設(shè)置為白色，文字設(shè)置為黑色。home模塊中<a>標簽只有一個，設(shè)置起來比較方便，而apply、member這兩個模塊中的<a>標簽除了按鈕外，還有錨鏈接，而且按鈕還不止一個，如果全部都用類選擇符來設(shè)置按鈕，會非常麻煩，但是這些按鈕的結(jié)構(gòu)都是相同的，這里可以利用偽類選擇符或者關(guān)系選擇符來修改，會更加方便快捷，簡化代碼。下面以apply模塊為例進行設(shè)置：注意：這里的偽類選擇符a:nth-child(3){}因為html結(jié)構(gòu)都是一樣的，所以可以用關(guān)系選擇符代替，即p+a{}。顯示效果如圖2-6-9所示：圖2-6-9按鈕鼠標經(jīng)過時的樣式效果任務(wù)實施2、修改表單中的按鈕鼠標經(jīng)過時陰影效果。鼠標經(jīng)過contact模塊中的提交按鈕時，產(chǎn)生內(nèi)陰影效果。顯示效果如圖2-6-11所示：圖2-6-11按鈕鼠標經(jīng)過陰影樣式設(shè)置效果CSS代碼：12345/*提交按鈕鼠標經(jīng)過時的內(nèi)陰影效果*/.contactbutton:hover{box-shadow:0010pxrgba(0,0,0,0.5)inset;}任務(wù)實施3、學習偽類選擇符后，我們可以利用偽類選擇符完善頁面中高級會員的表格樣式設(shè)置。將member模塊中的表格部分進行詳細樣式設(shè)置，要求表頭行的表格線較粗，清除最后一行的表格線，第一列的單元格寬10%，第二列的單元格寬50%，第三、第四列單元格寬20%。顯示效果如圖2-6-10所示：圖2-6-10表格樣式設(shè)置效果CSS代碼：1234567891011121314/*設(shè)置表頭行的下邊框線寬度*/.member.table