模塊十使用CSS3美化網(wǎng)站元素《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程》目錄任務(wù)一任務(wù)二任務(wù)三用CSS3設(shè)計(jì)網(wǎng)站導(dǎo)航用CSS3美化表格用CSS3美化表單任務(wù)描述任務(wù)1用CSS3設(shè)計(jì)網(wǎng)站導(dǎo)航網(wǎng)站導(dǎo)航是網(wǎng)站中最重要的元素，也是網(wǎng)站提供給用戶(hù)簡(jiǎn)便、快捷的訪問(wèn)內(nèi)容的入口，幫助用戶(hù)快速地找到網(wǎng)頁(yè)中的內(nèi)容。從形式上看，網(wǎng)站導(dǎo)航主要分橫向?qū)Ш?、縱向?qū)Ш健⑾吕岸嗉?jí)菜單導(dǎo)航等形式。引入知識(shí)點(diǎn)任務(wù)1用CSS3設(shè)計(jì)網(wǎng)站導(dǎo)航10.1CSS3背景漸變及陰影10.2CSS超鏈接樣式任務(wù)1用CSS3設(shè)計(jì)網(wǎng)站導(dǎo)航10.1CSS3背景漸變及陰影1、CSS3漸變CSS3漸變（gradients）可以讓你在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過(guò)渡。以前，你必須使用圖像來(lái)實(shí)現(xiàn)這些效果。但是，通過(guò)使用CSS3漸變，你可以減少下載的時(shí)間和寬帶的使用。此外，漸變效果的元素在放大時(shí)看起來(lái)效果更好，因?yàn)闈u變（gradient）是由瀏覽器生成的。CSS3定義了兩種類(lèi)型的漸變（gradients）：線性漸變（LinearGradients）-向下/向上/向左/向右/對(duì)角方向徑向漸變（RadialGradients）-由它們的中心定義本文主要介紹線性漸變的應(yīng)用。為了創(chuàng)建一個(gè)線性漸變，你必須至少定義兩種顏色結(jié)點(diǎn)。顏色結(jié)點(diǎn)即你想要呈現(xiàn)平穩(wěn)過(guò)渡的顏色，其語(yǔ)法格式為：background:linear-gradient(direction,color-stop1,color-stop2,...);任務(wù)1用CSS3設(shè)計(jì)網(wǎng)站導(dǎo)航10.1CSS3背景漸變及陰影2、CSS3陰影陰影在CSS3中可以應(yīng)用在盒狀元素的邊框和文字上，就像圖片的陰影效果一樣。一般可以分為box-shadow盒子陰影和textshadow文字陰影兩類(lèi)。例如CSS3的box-shadow可以寫(xiě)做：box-shadow:ApxBpxCpx#xxx;Apx指定了水平陰影的距離，Bpx為垂直陰影的距離，Cpx為模糊的距離，#xxx表示陰影的顏色。例如：box-shadow:5px10px10px#999;即可為盒狀元素產(chǎn)生陰影。任務(wù)1用CSS3設(shè)計(jì)網(wǎng)站導(dǎo)航10.2CSS超鏈接樣式HTML文檔最大的特點(diǎn)是，通過(guò)超鏈接打破了傳統(tǒng)的一般從上至下的閱讀順序。整個(gè)網(wǎng)站可以由超鏈接串連而成，無(wú)論從首頁(yè)到每個(gè)欄目，還是進(jìn)入其他網(wǎng)站都由無(wú)數(shù)超鏈接來(lái)實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)。CSS對(duì)鏈接的樣式控制主要通過(guò)偽類(lèi)來(lái)實(shí)現(xiàn)，鏈接的特殊性在于能夠根據(jù)它們所處的狀態(tài)來(lái)設(shè)置它們的樣式，鏈接的四種狀態(tài)：a:link-普通的、未被訪問(wèn)的鏈接a:visited-用戶(hù)已訪問(wèn)的鏈接a:hover-鼠標(biāo)指針位于鏈接的上方a:active-鏈接被點(diǎn)擊的時(shí)刻超鏈接的四種狀態(tài)控制，為我們的鏈接樣式設(shè)計(jì)提供了良好的接口，特別是通過(guò)鼠標(biāo)經(jīng)過(guò)時(shí)的鏈接樣式設(shè)計(jì)，可以實(shí)現(xiàn)豐富的交互效果，接下來(lái)在任務(wù)中的導(dǎo)航設(shè)計(jì)即可體會(huì)到其中的好處。任務(wù)1用CSS3設(shè)計(jì)網(wǎng)站導(dǎo)航任務(wù)實(shí)現(xiàn)（1）在DreamweaverCC中創(chuàng)建一個(gè)空白創(chuàng)建一個(gè)HTML5頁(yè)面，保存為index.html，為使HTML簡(jiǎn)潔，直接使用<a>標(biāo)記進(jìn)行塊狀化對(duì)每一個(gè)導(dǎo)航項(xiàng)進(jìn)行浮動(dòng)布局，并使用一個(gè)<div>容器作為總?cè)萜骶又酗@示。HTML結(jié)構(gòu)如下： <divclass="nav"> <ahref="#">首頁(yè)</a> <ahref="#">學(xué)院概況</a> <ahref="#">管理機(jī)構(gòu)</a> <ahref="#">教學(xué)部門(mén)</a> <ahref="#">招生就業(yè)</a> <ahref="#">創(chuàng)新創(chuàng)業(yè)</a> <ahref="#">教輔部門(mén)</a> <ahref="#">教輔部門(mén)</a> </div>任務(wù)1用CSS3設(shè)計(jì)網(wǎng)站導(dǎo)航任務(wù)實(shí)現(xiàn)（2）接下來(lái)設(shè)計(jì)CSS樣式，首先將div容器進(jìn)行固定，居中顯示，再完成導(dǎo)航的布局，因?yàn)?lt;a>標(biāo)記是行間元素，一般無(wú)法實(shí)現(xiàn)布局效果，所以需要對(duì)<a>標(biāo)記進(jìn)行display:block塊狀化，這樣<a>標(biāo)記具有了盒模型的特性，并可以進(jìn)行浮動(dòng)定位。（3）給鏈接添加一些文本、字體屬性，為有更好的顯示效果，為整個(gè)導(dǎo)航條添加背景漸變、陰影、圓角效果，添加漸變時(shí)，如要考慮到不同瀏覽器內(nèi)核問(wèn)題，需要針對(duì)不同內(nèi)核的前綴，對(duì)應(yīng)添加樣式，CSS代碼任務(wù)1用CSS3設(shè)計(jì)網(wǎng)站導(dǎo)航任務(wù)實(shí)現(xiàn)（4）添加鼠標(biāo)經(jīng)過(guò)超鏈接時(shí)的a:hover效果增強(qiáng)交互性，這里可以設(shè)置變換背景顏色等效果，完成后在瀏覽器中預(yù)覽其效果，效果見(jiàn)圖10-2所示。瀏覽時(shí)若無(wú)法顯示出CSS3的效果，請(qǐng)更換最新版的瀏覽器測(cè)試其效果。任務(wù)描述任務(wù)2用CSS3美化表格表格作為一種非常特殊而實(shí)用的數(shù)據(jù)表達(dá)方式，是網(wǎng)頁(yè)中經(jīng)常使用的元素，一般用來(lái)顯示從后臺(tái)讀取出的數(shù)據(jù)，也可以用表格進(jìn)行布局操作。同其他HTML標(biāo)記一樣，我們也可以使用CSS對(duì)表格進(jìn)行美化，例如制作細(xì)線表格、隔行變色表格、鼠標(biāo)經(jīng)過(guò)時(shí)變色的表格等。本任務(wù)主要通過(guò)使用CSS來(lái)控制表格的樣式，完成一個(gè)“隔行變色”的表格效果。表格數(shù)據(jù)展示效果如圖10-3所示。引入知識(shí)點(diǎn)任務(wù)2用CSS3美化表格10.3HTML表格任務(wù)2用CSS3美化表格10.3HTML表格1、表格相關(guān)的標(biāo)記表格由<table>標(biāo)記來(lái)定義。每個(gè)表格均有若干行（由<tr>標(biāo)記定義），每行被分割為若干單元格（由<td>標(biāo)記定義）。字母td指表格數(shù)據(jù)（tabledata），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。除此之處，還有幾個(gè)專(zhuān)用標(biāo)記，如<caption>定義表格的名稱(chēng)，<thead>定義表格的表頭，<tbody>定義表格的主體，<th>定義表頭的單元格，這些標(biāo)記都有各自的語(yǔ)義。在應(yīng)用表格排版時(shí)，應(yīng)充分使用各個(gè)標(biāo)記之間的嵌套來(lái)減少CSS類(lèi)的定義，提升代碼的可閱讀性。2、CSS3中的nth-child()選擇器表格往往用來(lái)顯示多行的數(shù)據(jù)，每一行的位置都是平等的，若要設(shè)置其中某一行的樣式，不是那么方便。如要本次任務(wù)中要設(shè)置隔行變色，涉及到基數(shù)行和偶數(shù)行的樣式不同的問(wèn)題。CSS3中的nth-child選擇器為此提供了便利，:nth-child(n)選擇器匹配屬于其父元素的第N個(gè)子元素，不論元素的類(lèi)型，其語(yǔ)法格式為：:nth-child(n|even|odd|formula)，各參數(shù)的作用見(jiàn)表所示。除IE8及更早的版本以外，所有主流瀏覽器均支持:nth-child()選擇器。任務(wù)2用CSS3美化表格10.3HTML表格3、hover選擇器在前面一個(gè)任務(wù)中，鼠標(biāo)經(jīng)過(guò)超鏈接時(shí)，使用:hover在鼠標(biāo)移到鏈接上時(shí)添加的特殊樣式。其實(shí)::hover選擇器可用于所有元素，不僅是鏈接。所有主流瀏覽器都支持:hover選擇器。做表格隔行變色，高亮顯示時(shí)，可以通過(guò)設(shè)置CSS中的tr:hover偽類(lèi)選擇器達(dá)到效果，一個(gè)表格中，要求是當(dāng)鼠標(biāo)滑過(guò)每一行時(shí)，該行就有高亮顯示，就是在表格里面的tr加上一個(gè)hover樣式就行，例如tr:hover{background:yellow;}，這樣可以更換行的背景色，但是如果給td加上了背景色，tr:hovertd{...}這樣才能出現(xiàn)背景色的變換效果。任務(wù)2用CSS3美化表格任務(wù)實(shí)現(xiàn)（1）創(chuàng)建一個(gè)空白HTML5頁(yè)面，在標(biāo)題處輸入“CSS3表格美化”，保存為index.html。充分選用表格的語(yǔ)義化標(biāo)記，進(jìn)行表格內(nèi)容的結(jié)構(gòu)定義，主要包括表格的標(biāo)題、表頭、主體等任務(wù)2用CSS3美化表格任務(wù)實(shí)現(xiàn)（2）為顯示更加直觀，本任務(wù)選用內(nèi)部樣式表的方式編寫(xiě)CSS代碼，直接在<head>中寫(xiě)入<style>標(biāo)記來(lái)編寫(xiě)CSS，為使代碼簡(jiǎn)潔，本任務(wù)直接使用標(biāo)記選擇器來(lái)控制表格各元素的屬性。（3）設(shè)置表格的邊框，表格的邊框主要是對(duì)table、td、th這三個(gè)標(biāo)記進(jìn)行設(shè)置，table負(fù)責(zé)表格外邊框，對(duì)重復(fù)的線條，使用border-collapse:collapse屬性進(jìn)行重合，適當(dāng)設(shè)置一些內(nèi)容的填充，表格會(huì)按所在單元格的內(nèi)容自動(dòng)擴(kuò)充容器而占據(jù)寬度。（4）設(shè)置表頭的背景顏色，此處有兩種設(shè)置方法，一種是對(duì)th進(jìn)行設(shè)置，一種是對(duì)thead設(shè)置。顯然thead是外層元素，表示整個(gè)表頭，選擇thead更加合適一些。（5）設(shè)置隔行變色效果，注意此處針對(duì)的行，是表格主體內(nèi)容的行，因此選擇器應(yīng)該選擇tbody下面的偶數(shù)個(gè)tr進(jìn)行樣式設(shè)計(jì)，代碼格式為：tbodytr:nth-child(even){}。任務(wù)2用CSS3美化表格任務(wù)實(shí)現(xiàn)（6）設(shè)置鼠標(biāo)經(jīng)過(guò)時(shí)，高亮顯示效果，此時(shí)使用hover偽類(lèi)，即可方便實(shí)現(xiàn)，代碼格式為：tbodytr:hover｛｝。最后給元素添加字體、文本等屬性，CSS代碼如下：<style> caption{/*設(shè)置表格標(biāo)題的樣式*/ font-family:"黑體"; font-size:1.6em; line-height:1.8em; } table{ border:solid4px#829B7E; } td,th{ border:dashed1px#829B7E; text-align:center; } table,td,th{ border-collapse:collapse;/*將邊框進(jìn)行重合*/ } td,th{ padding:10px20px; } thead{ background:#D7FBDF } tbodytr:nth-child(even){ background:#eee;/*對(duì)表格內(nèi)容區(qū)域設(shè)置偶數(shù)行變色*/ } tbodytr:hover{ background:#033805;/*鼠標(biāo)經(jīng)過(guò)時(shí)高亮顯示*/ color:#fff; }</style>任務(wù)2用CSS3美化表格任務(wù)實(shí)現(xiàn)（7）在瀏覽器中瀏覽網(wǎng)頁(yè)效果，效果如圖10-4所示，若部分CSS3的效果無(wú)法顯示，請(qǐng)使用新版的瀏覽器測(cè)試。任務(wù)描述任務(wù)3用CSS3美化表單表單(form)在功能型網(wǎng)站中，是網(wǎng)頁(yè)瀏覽者與網(wǎng)站服務(wù)器之間進(jìn)行信息傳遞的重要工具，也是網(wǎng)站交互中重要的元素。在網(wǎng)頁(yè)中，小到搜索框，大到注冊(cè)表單，用戶(hù)控制面板，都需要使用表單及表單元素進(jìn)行設(shè)計(jì)。用戶(hù)在網(wǎng)頁(yè)上進(jìn)行注冊(cè)、登陸、留言等操作時(shí)，都是通過(guò)表單向網(wǎng)站數(shù)據(jù)庫(kù)提交或讀取數(shù)據(jù)的。本任務(wù)中，我們通過(guò)模仿QQ注冊(cè)表單頁(yè)面，來(lái)學(xué)習(xí)CSS3對(duì)表單的美化方法，瀏覽效果如圖10-5所示，部分交互效果可通過(guò)網(wǎng)址在QQ官方網(wǎng)站瀏覽。引入知識(shí)點(diǎn)任務(wù)3用CSS3美化表單10.4CSS屬性選擇器任務(wù)3用CSS3美化表單10.4CSS屬性選擇器CSS選擇器中，比較常用的是標(biāo)記選擇器、類(lèi)選擇器、ID選擇器、偽類(lèi)選擇器等，而屬性選擇器是一種特殊類(lèi)型的選擇器。屬性選擇器可以指定具有特定屬性的HTML元素樣式，具有特定屬性的HTML元素樣式不僅僅是class和id。例如，給表單元素設(shè)置樣式時(shí)，可以通過(guò)以下代碼設(shè)置相同類(lèi)型的元素，但擁有的屬性不同的CSS樣式：任務(wù)3用CSS3美化表單任務(wù)實(shí)現(xiàn)（1）創(chuàng)建HTML文件，添加布局元素，左側(cè)放圖片，右側(cè)放表單，并保持一定的距離。（2）在右側(cè)的表單中，加入各表單元素，主要有文本輸入框、密碼框、下拉列表、電話號(hào)碼輸入框，以及提交按鈕，主要的HTML代碼如下：

<divclass="left"> <imgsrc="01-4.jpg"/> </div> <divclass="zc"> <h1>歡迎注冊(cè)QQ</h1> <h3>每一天，樂(lè)在溝通。</h3> <form> <p><inputtype="text"placeholder="昵稱(chēng)"autofocus="autofocus"/></p> <p><inputtype="password"placeholder="密碼"/></p> <p> <select> <option>+86</option> <option>中國(guó)+86</option> <option>中國(guó)香港特別行政區(qū)+852</option> <option>中國(guó)澳門(mén)特別行政區(qū)+853</option> </select> <inputtype="tel"placeholder="手機(jī)號(hào)碼"/></p> <p><inputtype="submit"value="立即注冊(cè)"/></p>