《HTML5+CSS3任務(wù)驅(qū)動教程(第2版)（微課版）》課件 模塊10 使用CSS3美化網(wǎng)站元素

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

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