HTML5+CSS3網(wǎng)頁設(shè)計(jì)與制作課件：設(shè)置按鈕交互格式

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

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

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

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

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

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