《HTML5+CSS3任務驅動教程(第2版)（微課版）》課件 模塊10 使用CSS3美化網站元素_第1頁
《HTML5+CSS3任務驅動教程(第2版)（微課版）》課件 模塊10 使用CSS3美化網站元素_第2頁
《HTML5+CSS3任務驅動教程(第2版)（微課版）》課件 模塊10 使用CSS3美化網站元素_第3頁
《HTML5+CSS3任務驅動教程(第2版)（微課版）》課件 模塊10 使用CSS3美化網站元素_第4頁
《HTML5+CSS3任務驅動教程(第2版)（微課版）》課件 模塊10 使用CSS3美化網站元素_第5頁
已閱讀5頁，還剩20頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論