《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程(第2版)（微課版）》課件 趙峰 模塊6-11 創(chuàng)建網(wǎng)頁(yè)中的超鏈接- 綜合案例

模塊六創(chuàng)建網(wǎng)頁(yè)

中的超鏈接目錄任務(wù)創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁(yè)面的超鏈接引入知識(shí)點(diǎn)6.1創(chuàng)建超鏈接6.2超鏈接的類型任務(wù)創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁(yè)面的超鏈接6.1創(chuàng)建超鏈接超文本鏈接（HyperTextLink）通常簡(jiǎn)稱為超鏈接（HyperLink），或者簡(jiǎn)稱為鏈接（Link）。超鏈接就是從一個(gè)網(wǎng)頁(yè)轉(zhuǎn)到另一個(gè)網(wǎng)頁(yè)的途徑。鏈接是HTML的一個(gè)最強(qiáng)大和最有價(jià)值的功能。任務(wù)創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁(yè)面的超鏈接6.1創(chuàng)建超鏈接6.1.1超鏈接a元素的語(yǔ)法格式創(chuàng)建超鏈接使用的標(biāo)記是<a>。超鏈接要能正確地進(jìn)行鏈接跳轉(zhuǎn)，需要同時(shí)存在兩個(gè)端點(diǎn)，即源端點(diǎn)和目標(biāo)端點(diǎn)。源端點(diǎn)是指網(wǎng)頁(yè)中提供鏈接單擊的對(duì)象，如鏈接文本或鏈接圖像；目標(biāo)端點(diǎn)是指鏈接跳轉(zhuǎn)過去的頁(yè)面或位置，如某個(gè)網(wǎng)頁(yè)、錨記等。超鏈接的目標(biāo)端點(diǎn)使用<a>標(biāo)記的href屬性來指定，源端點(diǎn)則通過<a>標(biāo)記的內(nèi)容來指定。除了需要使用href屬性外，還經(jīng)常需要用到其他一些相關(guān)的屬性。任務(wù)創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁(yè)面的超鏈接6.1創(chuàng)建超鏈接6.1.2設(shè)置超鏈接的路徑在網(wǎng)站中，每一個(gè)網(wǎng)頁(yè)都有一個(gè)唯一的地址與之對(duì)應(yīng)，這個(gè)地址稱為統(tǒng)一資源定位符，即URL（UniformResourceLocator），它的功能就是提供在Internet上查找資源的標(biāo)準(zhǔn)方法。而對(duì)于一般的文件則是它的路徑，即所在的目錄和文件名。鏈接路徑就是在超鏈接中用于標(biāo)識(shí)目標(biāo)端點(diǎn)的位置標(biāo)識(shí)。常見的鏈接路徑主要有以下兩種類型。1.絕對(duì)路徑2.相對(duì)路徑任務(wù)創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁(yè)面的超鏈接6.2超鏈接的類型1.根據(jù)超鏈接目標(biāo)端點(diǎn)的位置不同劃分（1）內(nèi)部超鏈接：指在同一站點(diǎn)內(nèi)部，不同頁(yè)面之間的超鏈接。（2）外部超鏈接：是站點(diǎn)外部的鏈接，是網(wǎng)頁(yè)與因特網(wǎng)中某個(gè)目標(biāo)網(wǎng)頁(yè)的鏈接。（3）錨記超鏈接：是同一網(wǎng)頁(yè)內(nèi)部的鏈接。通常情況下，錨記鏈接用于鏈接到網(wǎng)頁(yè)內(nèi)部某個(gè)特定的位置。（4）電子郵件超鏈接：指鏈接到電子郵箱的鏈接。單擊該鏈接可以發(fā)送電子郵件。（5）可執(zhí)行文件超鏈接：通常又稱文件下載鏈接，單擊該鏈接可以運(yùn)行可執(zhí)行文件，可以用于下載文件或在線運(yùn)行可執(zhí)行文件。任務(wù)創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁(yè)面的超鏈接6.2超鏈接的類型2.根據(jù)鏈接源端點(diǎn)的內(nèi)容不同劃分（1）文本超鏈接：以文本作為超鏈接源端點(diǎn)。（2）圖像超鏈接：以圖像作為超鏈接源端點(diǎn)。（3）圖像熱點(diǎn)超鏈接：以圖像熱區(qū)作為超鏈接源端點(diǎn)。任務(wù)創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁(yè)面的超鏈接6.2超鏈接的類型3.根據(jù)鏈接目標(biāo)端點(diǎn)的內(nèi)容不同劃分（1）網(wǎng)頁(yè)超鏈接：鏈接到HTML、ASP、PHP等網(wǎng)頁(yè)文檔的鏈接，這是網(wǎng)站中最常見的鏈接。（2）文件下載超鏈接：鏈接到圖像、音頻、影片、Word文檔、Excel文檔、PowerPoint文檔、PDF文檔等資源文件或RAR、ZIP等壓縮文件的鏈接。（3）電子郵件超鏈接：鏈接到電子郵件的超鏈接形式，將會(huì)啟動(dòng)郵件客戶端程序，瀏覽者可以寫郵件并發(fā)送到鏈接的郵箱中。（4）空鏈接：鏈接目標(biāo)形式上為“#”，主要用于在對(duì)象上附加行為等（5）腳本超鏈接：鏈接目標(biāo)為一段JavaScript腳本代碼，用于執(zhí)行某項(xiàng)操作（6）錨記超鏈接：鏈接目標(biāo)為網(wǎng)頁(yè)文檔中的某一位置，這一位置可以位于當(dāng)前網(wǎng)頁(yè)或其他網(wǎng)頁(yè)中，這個(gè)網(wǎng)頁(yè)可以位于當(dāng)前站點(diǎn)內(nèi)，也可以位于其他站點(diǎn)內(nèi)任務(wù)創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁(yè)面的超鏈接6.2超鏈接的類型1內(nèi)部超鏈接內(nèi)部超鏈接是指在同一個(gè)網(wǎng)站內(nèi)部，不同網(wǎng)頁(yè)之間的鏈接關(guān)系?；菊Z(yǔ)法格式如下：<ahref=“鏈接文件的路徑”>源端點(diǎn)</a>任務(wù)創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁(yè)面的超鏈接6.2超鏈接的類型2外部超鏈接外部超鏈接是指跳轉(zhuǎn)到當(dāng)前網(wǎng)站外部，和其他網(wǎng)站中的頁(yè)面或其他元素之間的鏈接關(guān)系?；菊Z(yǔ)法格式如下：

<ahref=“URL”>源端點(diǎn)</a>任務(wù)創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁(yè)面的超鏈接6.2超鏈接的類型3錨記超鏈接錨記超鏈接又稱書簽鏈接。在瀏覽網(wǎng)頁(yè)的時(shí)候，如果頁(yè)面內(nèi)容過長(zhǎng)，需要不斷地拖動(dòng)滾動(dòng)條才能看到所有內(nèi)容，這時(shí)可以在該網(wǎng)頁(yè)上建立錨記目錄，單擊目錄上的某一項(xiàng)就能自動(dòng)跳到該目錄項(xiàng)對(duì)應(yīng)的網(wǎng)頁(yè)位置。任務(wù)創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁(yè)面的超鏈接6.2超鏈接的類型第一步：創(chuàng)建錨記基本語(yǔ)法格式如下：HTML5：<aid=“錨記名稱”>源端點(diǎn)</a>HTML5以前版本：<aname=“錨記名稱”>源端點(diǎn)</a>語(yǔ)法說明：錨記名稱就是對(duì)第二步跳轉(zhuǎn)所創(chuàng)建的錨記，“源端點(diǎn)”則是設(shè)置鏈接后跳轉(zhuǎn)的位置，可以是文本或圖片。任務(wù)創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁(yè)面的超鏈接6.2超鏈接的類型第二步：建立錨記鏈接基本語(yǔ)法格式如下：（1）鏈接到同一個(gè)頁(yè)面中的錨記，稱為內(nèi)部錨記超鏈接。<ahref=“#錨記名稱”>源端點(diǎn)</a>（2）鏈接到其他頁(yè)面中的錨記，稱為外部錨記超鏈接。<ahref=“錨記所在頁(yè)面的文件路徑#錨記名稱”>源端點(diǎn)</a>任務(wù)創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁(yè)面的超鏈接6.2超鏈接的類型4電子郵件超鏈接在頁(yè)面上創(chuàng)建電子郵件鏈接，可以讓瀏覽者快速地與網(wǎng)站負(fù)責(zé)人聯(lián)系。當(dāng)鼠標(biāo)單擊鏈接對(duì)象時(shí)，瀏覽者的計(jì)算機(jī)系統(tǒng)中默認(rèn)的電子郵件客戶端軟件將自動(dòng)打開?；菊Z(yǔ)法格式如下：<ahref=”mailto:電子郵件”>源端點(diǎn)</a>任務(wù)創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁(yè)面的超鏈接6.2超鏈接的類型5文件下載超鏈接目標(biāo)端點(diǎn)為某個(gè)需下載的文件的鏈接稱為文件下載鏈接。當(dāng)用戶單擊該鏈接后，瀏覽器會(huì)自動(dòng)判斷文件類型，以做出不同情況的處理，如直接打開，或彈出下載對(duì)話框供下載可用于下載的文件類型有.doc、.rar、.mp3、.zip、.exe等?；菊Z(yǔ)法格式如下：<ahref=“鏈接文件的路徑”>下載文件鏈接</a>任務(wù)創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁(yè)面的超鏈接6.2超鏈接的類型6腳本超鏈接目標(biāo)端點(diǎn)為腳本代碼的鏈接稱為腳本鏈接。通過腳本可以實(shí)現(xiàn)HTML語(yǔ)言完成不了的功能?；菊Z(yǔ)法格式如下：<ahref=“JavaScript:…”>源端點(diǎn)</a>任務(wù)創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁(yè)面的超鏈接6.2超鏈接的類型7文本超鏈接文本超鏈接是指源端點(diǎn)為文本的鏈接?；菊Z(yǔ)法格式如下：<ahref=“目標(biāo)端點(diǎn)”>鏈接文本</a>任務(wù)創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁(yè)面的超鏈接6.2超鏈接的類型8圖像超鏈接圖像超鏈接是指源端點(diǎn)為圖像文件的超鏈接。基本語(yǔ)法格式如下：<ahref=“目標(biāo)端點(diǎn)”><imgsrc=“圖像文件路徑”></a>任務(wù)創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁(yè)面的超鏈接6.2超鏈接的類型9圖像熱點(diǎn)超鏈接圖像映射是指源端點(diǎn)為圖片熱點(diǎn)的鏈接。一幅圖像可以被切分成不同的區(qū)域，每一個(gè)區(qū)域可以鏈接到不同的地址，這些區(qū)域稱為圖像的熱區(qū)?；菊Z(yǔ)法格式如下：<imgsrc="圖片文件路徑"usemap="#Map_name"><mapname="#Map_name"><areashape="rect"coords="x1,y1,x2,y2"href="鏈接地址1"><areashape="circle"coords="x,y,r"href="鏈接地址2"><areashape="poly"coords="x1,y1,x2,y2,x3,y3,…"href="鏈接地址3">…</map>任務(wù)創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁(yè)面的超鏈接任務(wù)實(shí)現(xiàn)（1）通過文本超鏈接實(shí)現(xiàn)頁(yè)面鏈接。（2）通過圖像熱點(diǎn)超鏈接實(shí)現(xiàn)首頁(yè)到子頁(yè)面的鏈接。（3）過錨記超鏈接實(shí)現(xiàn)子頁(yè)面各部分內(nèi)容的鏈接。（4）通過電子郵件超鏈接實(shí)現(xiàn)“聯(lián)系我們”鏈接到郵箱：843118486@任務(wù)創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁(yè)面的超鏈接任務(wù)實(shí)現(xiàn)（5）通過腳本超鏈接關(guān)閉“在線學(xué)習(xí)網(wǎng)站”中的數(shù)字媒體技術(shù)概述課程子頁(yè)面文件course_multimedia.html。（6）通過外部超鏈接和圖像超鏈接實(shí)現(xiàn)首頁(yè)“友情鏈接”到“廣東創(chuàng)新科技職業(yè)學(xué)院”網(wǎng)站。（7）通過文件下載超鏈接可以下載資源文件“download.rar”。任務(wù)創(chuàng)建“在線學(xué)習(xí)網(wǎng)”頁(yè)面的超鏈接謝謝模塊五網(wǎng)頁(yè)表單設(shè)計(jì)目錄任務(wù)一任務(wù)二任務(wù)三注冊(cè)頁(yè)面的設(shè)計(jì)讀者留言板的設(shè)計(jì)引入知識(shí)點(diǎn)任務(wù)1注冊(cè)頁(yè)面的設(shè)計(jì)7.1了解表單7.2輸入元素input任務(wù)1注冊(cè)頁(yè)面的設(shè)計(jì)7.1了解表單一個(gè)表單由三部分組成：（1）表單標(biāo)記：包括處理表單數(shù)據(jù)所用的CGI程序（通用網(wǎng)關(guān)接口）的URL和數(shù)據(jù)提交到服務(wù)器的方法。（2）表單域：包括文本框、密碼框、復(fù)選框、單選框、下拉選擇框、文件上傳框、多行文本框和隱藏域等。（3）表單按鈕：包括提交按鈕、重置按鈕和普通按鈕；用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入，還可以用來控制其他定義了處理腳本的處理工作。任務(wù)1注冊(cè)頁(yè)面的設(shè)計(jì)7.1了解表單1、表單的作用表單在網(wǎng)頁(yè)中的主要作用是采集用戶數(shù)據(jù)，它提供一個(gè)頁(yè)面，一個(gè)入口。表單處理信息的一般過程為：用戶在表單中完成信息的填寫后，單擊表單中的提交按鈕時(shí)，用戶所輸入的信息就會(huì)提交到服務(wù)器，服務(wù)器中的應(yīng)用程序會(huì)對(duì)這些信息進(jìn)行處理和響應(yīng)，完成用戶和服務(wù)器之間的交互。任務(wù)1注冊(cè)頁(yè)面的設(shè)計(jì)7.1了解表單2、表單元素form表單是網(wǎng)頁(yè)上一個(gè)特定的區(qū)域，這個(gè)區(qū)域是由<form>標(biāo)記定義的，它是一對(duì)雙標(biāo)記，<form>標(biāo)記代表表單區(qū)域的開始，</form>標(biāo)記代表表單區(qū)域的結(jié)束，在<form>和</form>標(biāo)記之間的所有內(nèi)容都屬于表單內(nèi)容。<form>標(biāo)記的基本語(yǔ)法格式如下：<formname="表單名稱"action="表單提交地址"method="數(shù)據(jù)傳輸方式">…</form>任務(wù)1注冊(cè)頁(yè)面的設(shè)計(jì)7.1了解表單表單常用屬性任務(wù)1注冊(cè)頁(yè)面的設(shè)計(jì)7.2輸入元素input基本語(yǔ)法格式<inputtype="輸入控件類型"name="控件名字">任務(wù)1注冊(cè)頁(yè)面的設(shè)計(jì)7.2輸入元素input根據(jù)type屬性值的不同可以得到不同的控件類型type常用的屬性值任務(wù)1注冊(cè)頁(yè)面的設(shè)計(jì)7.2輸入元素input1、文本框text基本語(yǔ)法格式：<inputtype="text"name="field_name"value="field_value"size="size_value"maxlength="max_value">文本框?qū)傩匀蝿?wù)1注冊(cè)頁(yè)面的設(shè)計(jì)7.2輸入元素input2、密碼框password基本語(yǔ)法格式：<inputtype="password"name="field_name"value="field_value"size="size_value"maxlength="max_value">密碼框?qū)傩匀蝿?wù)1注冊(cè)頁(yè)面的設(shè)計(jì)7.2輸入元素input單選按鈕屬性3、單選按鈕radio基本語(yǔ)法格式：<inputtype="radio"name="field_name"value="value"checked>任務(wù)1注冊(cè)頁(yè)面的設(shè)計(jì)7.2輸入元素input復(fù)選框?qū)傩?、復(fù)選框checkbox基本語(yǔ)法格式：<inputtype="checkbox"name="field_name"value="value"checked>任務(wù)1注冊(cè)頁(yè)面的設(shè)計(jì)7.2輸入元素input普通按鈕屬性5、普通按鈕button基本語(yǔ)法格式：<inputtype="button"name="field_name"value="button_text">任務(wù)1注冊(cè)頁(yè)面的設(shè)計(jì)7.2輸入元素input提交按鈕屬性6、提交按鈕submit基本語(yǔ)法格式：<inputtype="submit"name="field_name"value="submit_text">任務(wù)1注冊(cè)頁(yè)面的設(shè)計(jì)7.2輸入元素input重置按鈕屬性7、重置按鈕reset基本語(yǔ)法格式：<inputtype="reset"name="field_name"value="reset_text">任務(wù)1注冊(cè)頁(yè)面的設(shè)計(jì)7.2輸入元素input圖片按鈕屬性8、圖片按鈕image基本語(yǔ)法格式：<inputtype="image"name="field_name"src="image_url">任務(wù)1注冊(cè)頁(yè)面的設(shè)計(jì)7.2輸入元素input文本域?qū)傩?、文本域file基本語(yǔ)法格式：<inputtype="file"name="field_name">任務(wù)1注冊(cè)頁(yè)面的設(shè)計(jì)7.2輸入元素input隱藏域?qū)傩?0、隱藏域hidden基本語(yǔ)法格式：<inputtype="hidden"name="field_name">任務(wù)1注冊(cè)頁(yè)面的設(shè)計(jì)任務(wù)實(shí)現(xiàn)（1）創(chuàng)建一個(gè)HTML5頁(yè)面，制作注冊(cè)頁(yè)面；（3）使用表格對(duì)注冊(cè)頁(yè)面的結(jié)構(gòu)進(jìn)行控制；（2）在頁(yè)面中插入一個(gè)form元素；（4）在表格相對(duì)應(yīng)的位置放入表單輸入元素。任務(wù)1注冊(cè)頁(yè)面的設(shè)計(jì)注冊(cè)界面引入知識(shí)點(diǎn)任務(wù)2讀者留言板的設(shè)計(jì)7.3下拉選擇框元素select7.4多行文本域textarea任務(wù)2讀者留言板的設(shè)計(jì)7.3下拉選擇框元素select下拉選擇框也是頁(yè)面中常用的表單元素，它由<select>標(biāo)記定義，是一對(duì)雙標(biāo)記，<select>標(biāo)記定義了下拉選擇框的開始，</select>標(biāo)記定義了下拉選擇框的結(jié)束?？梢酝ㄟ^屬性設(shè)置要顯示的選項(xiàng)數(shù)量，以及是否允許多項(xiàng)選擇等內(nèi)容。任務(wù)2讀者留言板的設(shè)計(jì)7.3下拉選擇框元素selectselect元素的常用屬性基本語(yǔ)法格式：<selectname="field_name"size="size_value"multiple>…</select>任務(wù)2讀者留言板的設(shè)計(jì)7.3下拉選擇框元素selectselect元素相當(dāng)于一個(gè)容器，標(biāo)記當(dāng)前的下拉選擇框是菜單還是列表，而它所包含的菜單或列表中的每一項(xiàng)都是由option元素定義的。option元素定義了下拉選擇框里的選項(xiàng)，它也是一對(duì)雙標(biāo)記，選項(xiàng)的內(nèi)容包含在開始標(biāo)記<option>和結(jié)束標(biāo)記</option>之間。option元素要定義在<select>和</select>標(biāo)記里面才能發(fā)揮作用。任務(wù)2讀者留言板的設(shè)計(jì)7.3下拉選擇框元素selectoption元素的常用屬性option元素基本語(yǔ)法格式：<selectname="field_name"><optionvalue="string"selected>選項(xiàng)1</option><option>選項(xiàng)2</option><option>選項(xiàng)3</option>…</select>任務(wù)2讀者留言板的設(shè)計(jì)7.4多行文本域textarea基本語(yǔ)法格式：<textareaname="field_name"cols="number"rows="number"></textarea>textarea元素也是在頁(yè)面中經(jīng)常使用的表單元素，它是一對(duì)雙標(biāo)記，<textarea>標(biāo)記為開始標(biāo)記，</textarea>標(biāo)記為結(jié)束標(biāo)記，需要在頁(yè)面顯示的初始文本內(nèi)容放置于<textarea>與</textarea>標(biāo)記之間。任務(wù)2讀者留言板的設(shè)計(jì)7.4多行文本域textareatextarea元素的常用屬性任務(wù)實(shí)現(xiàn)（1）創(chuàng)建一個(gè)HTML5頁(yè)面，制作“讀者留言板”頁(yè)面；（3）使用表格對(duì)“讀者留言板”頁(yè)面的結(jié)構(gòu)進(jìn)行控制；（2）在HTML頁(yè)面中插入一個(gè)form元素；任務(wù)2讀者留言板的設(shè)計(jì)（4）在表格相對(duì)應(yīng)的位置放入表單輸入元素、下拉選擇框元素及多行文本域元素。任務(wù)2讀者留言板的設(shè)計(jì)讀者留言板謝謝模塊八

CSS3樣式基礎(chǔ)《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程》目錄任務(wù)一任務(wù)二任務(wù)三網(wǎng)頁(yè)大標(biāo)題的樣式設(shè)計(jì)網(wǎng)頁(yè)中的文字排版制作產(chǎn)品分類本模塊任務(wù)安排：引入知識(shí)點(diǎn)任務(wù)1網(wǎng)頁(yè)大標(biāo)題的樣式設(shè)計(jì)8.1什么是CSS8.2CSS的應(yīng)用任務(wù)1網(wǎng)頁(yè)大標(biāo)題的樣式設(shè)計(jì)8.1什么是CSSCSS是層疊樣式表(CascadingStyleSheets)的簡(jiǎn)稱，是用來表現(xiàn)HTML或XML的標(biāo)記語(yǔ)言，運(yùn)用CSS樣式與HTML所描述的信息結(jié)構(gòu)相結(jié)合，能夠幫助設(shè)計(jì)師將網(wǎng)頁(yè)內(nèi)容與表現(xiàn)相分離，使網(wǎng)站更加容易構(gòu)建與維護(hù)。任務(wù)1網(wǎng)頁(yè)大標(biāo)題的樣式設(shè)計(jì)8.1什么是CSSCSS的語(yǔ)法結(jié)構(gòu)任務(wù)1網(wǎng)頁(yè)大標(biāo)題的樣式設(shè)計(jì)8.2CSS的應(yīng)用1、行間樣式行間樣式，也叫內(nèi)聯(lián)樣式，由HTML標(biāo)記中的style屬性所支持，要使用行間樣式，你需要在相關(guān)的標(biāo)簽內(nèi)使用樣式（style）屬性。行間樣式將表現(xiàn)和內(nèi)容混雜在一起。<pstyle="color:#f00;padding-left:20px">這是一個(gè)段落。</p>任務(wù)1網(wǎng)頁(yè)大標(biāo)題的樣式設(shè)計(jì)8.2CSS的應(yīng)用2、內(nèi)部樣式內(nèi)部樣式是CSS樣式編碼的初級(jí)應(yīng)用形式，樣式表作為頁(yè)面的一個(gè)單獨(dú)部分，由<style></style>標(biāo)記定位在<head></head>之中。只能針對(duì)當(dāng)前頁(yè)面有效，不能跨頁(yè)面執(zhí)行。<head><styletype="text/CSS">hr{color:blue;}p{margin-left:20px;}body{background-color:#ccc;}</style></head>任務(wù)1網(wǎng)頁(yè)大標(biāo)題的樣式設(shè)計(jì)8.2CSS的應(yīng)用3、外部樣式外部樣式表是CSS應(yīng)用中最好的一種形式，它將CSS樣式代碼單獨(dú)放在一個(gè)外部文件中，再由網(wǎng)頁(yè)進(jìn)行調(diào)用。而且多個(gè)網(wǎng)頁(yè)可以調(diào)用同一個(gè)樣式表文件，這樣能夠?qū)崿F(xiàn)代碼的最大限度重用及網(wǎng)站文件的最優(yōu)化配置。當(dāng)樣式需要應(yīng)用于很多頁(yè)面時(shí)，外部樣式表將是理想的選擇。<head><linkrel="stylesheet"type="text/CSS"href="mystyle.CSS"/></head>任務(wù)1網(wǎng)頁(yè)大標(biāo)題的樣式設(shè)計(jì)8.2CSS的應(yīng)用CSS的文本屬性任務(wù)1網(wǎng)頁(yè)大標(biāo)題的樣式設(shè)計(jì)任務(wù)實(shí)現(xiàn)（1）使用HBuilder創(chuàng)建一個(gè)html文件，保存為index.html，文檔中包含<head>、<body>等基本的HTML結(jié)構(gòu)。（3）為<h1>標(biāo)記設(shè)計(jì)CSS樣式（2）在<body>標(biāo)記中，使用標(biāo)題標(biāo)記<h1>將內(nèi)容進(jìn)行語(yǔ)義化標(biāo)記引入知識(shí)點(diǎn)任務(wù)2網(wǎng)頁(yè)中的文字排版8.3CSS字體樣式任務(wù)2網(wǎng)頁(yè)中的文字排版8.3CSS字體樣式任務(wù)實(shí)現(xiàn)（1）在HBuilder中新建一個(gè)HTML5頁(yè)面，保存為news1.html，使用<div>、<h1>、<h2>、<p>標(biāo)記對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行結(jié)構(gòu)定義（3）采用外部樣式表的方式，將CSS與html鏈接（2）新建CSS文件，保存于與HTML文檔同一目錄下，保存文件名稱為news.css任務(wù)2網(wǎng)頁(yè)中的文字排版body{ font-size:100%;}div{ width:600px; font-family:MicrosoftYahei;/*字體為微軟雅黑*/}h2{ text-indent:2em;/*首行縮進(jìn)2個(gè)字符*/ font-style:italic;/*設(shè)置傾斜字體*/}p{ font-size:1.2em;/*字體放大0.2倍*/ line-height:1.8em;/*行高為原來的1.8倍*/ text-indent:2em;/*首行縮進(jìn)*/ color:#333;}效果圖任務(wù)2網(wǎng)頁(yè)中的文字排版效果圖任務(wù)2網(wǎng)頁(yè)中的文字排版按相同方法完成new2.html頁(yè)面，采用外部樣式表，實(shí)現(xiàn)相同的外觀。引入知識(shí)點(diǎn)任務(wù)3制作產(chǎn)品分類8.4列表元素列表HTML標(biāo)記任務(wù)3制作產(chǎn)品分類1、ul無序列表2、ol有序列表3、自定義列表dl<h3>無序列表:</h3><ul><li>循環(huán)制</li><li>淘汰制</li><li>混合制</li></ul><h3>有序列表:</h3><ol> <li>一等獎(jiǎng)</li> <li>二等獎(jiǎng)</li> <li>三等獎(jiǎng)</li> </ol><dl><dt>歡迎來學(xué)習(xí)HTML+CSS</dt><dd>這里有，html教程</dd><dd>這里有，css模塊</dd><dd>這里有，css教程</dd></dl>列表的CSS屬性任務(wù)3制作產(chǎn)品分類任務(wù)實(shí)現(xiàn)任務(wù)3制作產(chǎn)品分類（1）啟動(dòng)HBuilder，新建文檔，選擇HTML文檔，保存為list.html，將文檔內(nèi)容寫入<body>標(biāo)記中。為文本內(nèi)容添加h1、ol-li、h3、ul-li等標(biāo)記或標(biāo)記對(duì)，添加標(biāo)記時(shí)注意標(biāo)記的配對(duì)和縮進(jìn)。（2）新建CSS樣式表文件，保存為list.css，并使用<link>標(biāo)記與HTML頁(yè)面關(guān)聯(lián)。效果圖任務(wù)3制作產(chǎn)品分類謝謝模塊九使用DIV+CSS布局頁(yè)面《HTML5+CSS3任務(wù)驅(qū)動(dòng)教程》目錄任務(wù)一任務(wù)二任務(wù)三網(wǎng)頁(yè)中的圖文混排網(wǎng)頁(yè)中的全圖排版多行多列式布局本模塊任務(wù)安排：任務(wù)描述任務(wù)1網(wǎng)頁(yè)中的圖文混排在現(xiàn)代網(wǎng)頁(yè)中，純文字的網(wǎng)頁(yè)顯得過于單調(diào)，為吸引用戶瀏覽，通常在文字中會(huì)插入適當(dāng)?shù)南嚓P(guān)圖片，以更好地展現(xiàn)要表達(dá)的意思。在傳統(tǒng)的表格式布局中，往往通過插入一個(gè)表格，再在表格中插入圖片，并對(duì)表格應(yīng)用align屬性來控制圖片居中、居左還是居右來顯示。而本任務(wù)中利用塊狀元素的盒子模型特性，應(yīng)用CSS塊狀元素的更多屬性，實(shí)現(xiàn)更多圖文混排效果。任務(wù)1瀏覽效果如圖9-1所示。引入知識(shí)點(diǎn)任務(wù)1網(wǎng)頁(yè)中的圖文混排9.1CSS盒子模型9.2CSS浮動(dòng)與定位任務(wù)1網(wǎng)頁(yè)中的圖文混排9.1CSS盒模型任務(wù)1網(wǎng)頁(yè)中的圖文混排9.1CSS盒模型1．外邊框margin可以單獨(dú)改變?cè)氐纳稀⑾隆⒆蟆⒂疫吘啵槙r(shí)針）。也可以一次改變所有的屬性。外邊距設(shè)置屬性有margin、margin-top、margin-bottom、margin-right、margin-left。2．邊框元素外邊距內(nèi)就是元素的邊框（border）,每個(gè)邊框有3個(gè)方面：寬度、樣式，以及顏色。常用的邊框?qū)傩杂?項(xiàng):border-top（上邊框）、border-right（有邊框）、border-bottom（下邊框）、border-left（左邊框）、border-width（邊框?qū)挾龋order-color（邊框顏色）、border-style（邊框樣式）。其中border-width可以一次性設(shè)置所有的邊框?qū)挾?，border-color同時(shí)設(shè)置四面邊框的顏色時(shí)，可以連續(xù)寫上4種顏色，并用空格分隔。上述連續(xù)設(shè)置的邊框都是按border-top、border-right、border-bottom、border-left的順序（順時(shí)針）。任務(wù)1網(wǎng)頁(yè)中的圖文混排9.1CSS盒模型3．內(nèi)邊距元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間為paddingpadding屬性與外邊距類似，格式也大致相同，可以單獨(dú)設(shè)置四內(nèi)邊距，也可使用padding一次性設(shè)置4．CSS3圓角在CSS3之前，要實(shí)現(xiàn)圓角的效果主要通過圖片輔助實(shí)現(xiàn)，實(shí)現(xiàn)起來不是很方便，使用CSS3的border-radius很方便實(shí)現(xiàn)圓角邊框，但要注意部分舊版本的瀏覽器不直接CSS3的屬性border-radius和前面介紹的border的參數(shù)個(gè)數(shù)和用法基本相同任務(wù)1網(wǎng)頁(yè)中的圖文混排9.2CSS浮動(dòng)與定位float是CSS樣式中的布局屬性，float屬性的left和right值分別能夠讓元素向左和向右浮動(dòng)。比如當(dāng)元素向左浮動(dòng)之后，對(duì)象的右側(cè)將清空出一塊區(qū)域，以便讓剩下的文檔元素能夠貼在右側(cè)。利用這個(gè)特性可以方便地設(shè)計(jì)出需要的塊狀元素排版布局效果。元素浮動(dòng)之后，周圍的元素會(huì)重新排列，為了避免這種情況，使用clear屬性。clear屬性指定元素兩側(cè)不能出現(xiàn)浮動(dòng)元素，主要有三個(gè)屬性值：both、left、right，分別表示清除兩邊的浮動(dòng)、清除元素左邊的浮動(dòng)、清除元素右邊的浮動(dòng)。

采用position:absolute;之后，對(duì)象便開始進(jìn)行絕對(duì)定位，絕對(duì)定位主要通過設(shè)置對(duì)象的top、right、bottom和left四個(gè)方向的邊距值來實(shí)現(xiàn)。一旦對(duì)象被設(shè)置絕對(duì)定位，它就完全脫離了文檔流與浮動(dòng)模型，獨(dú)立于其他對(duì)象而存在

使用position:relative;進(jìn)行相對(duì)定位，通過left和top來設(shè)置偏離原來位置左側(cè)和上側(cè)的距離。任務(wù)1網(wǎng)頁(yè)中的圖文混排任務(wù)實(shí)現(xiàn)（1）創(chuàng)建一個(gè)HTML5頁(yè)面，使用合適的標(biāo)記對(duì)網(wǎng)站內(nèi)容進(jìn)行結(jié)構(gòu)定義；（2）根據(jù)CSS盒子模型原理對(duì)網(wǎng)頁(yè)進(jìn)行布局設(shè)置，對(duì)圖片進(jìn)行合適的定位，在編寫CSS代碼之前先將需要用到的圖片保存于網(wǎng)站目錄中的images文件文件夾中，本項(xiàng)目主要采用類選擇器、后代選擇器（也可使用子元素選擇器）編寫出CSS代碼；（3）使用內(nèi)部樣式表的形式將所寫CSS應(yīng)用于該網(wǎng)頁(yè)。任務(wù)描述任務(wù)2網(wǎng)頁(yè)中的全圖排版網(wǎng)頁(yè)中全是圖片的排版布局也不少見，圖片排版常被用在相冊(cè)類、產(chǎn)品展示類的網(wǎng)頁(yè)中，這類頁(yè)面往往有大量的圖片在同一頁(yè)中進(jìn)行展示，使用CSS布局進(jìn)行全圖排版的核心在于，對(duì)浮動(dòng)定位的控制，并且具有較好的靈活性。對(duì)于具有相同尺寸的圖片進(jìn)行排版，用CSS進(jìn)行浮動(dòng)定位是比較好控制的，若對(duì)于各個(gè)圖片的尺寸規(guī)格不相同的圖片進(jìn)行直接排版，也可以采用流式布局，使圖片錯(cuò)落排列。網(wǎng)站的圖片新聞，采用了相同大小的圖片，此時(shí)只需要設(shè)置好一張圖片的樣式，其他圖片用相同的元素進(jìn)行設(shè)置并產(chǎn)生浮動(dòng)即可，外層元素的整體寬度也很容易通過盒模型計(jì)算得知。引入知識(shí)點(diǎn)任務(wù)2網(wǎng)頁(yè)中的全圖排版9.3CSS背景控制任務(wù)2網(wǎng)頁(yè)中的全圖排版9.3CSS背景控制任務(wù)2網(wǎng)頁(yè)中的全圖排版9.3CSS背景控制background:#f09url(bg.png)repeat-xfixed20px40px;任務(wù)2網(wǎng)頁(yè)中的全圖排版任務(wù)實(shí)現(xiàn)（1）在DreamweaverCC中創(chuàng)建一個(gè)空白HTML5頁(yè)面，在標(biāo)題處輸入“校園風(fēng)光”，保存為index.html。選用<div>標(biāo)記對(duì)頁(yè)面進(jìn)行整理布局，給<div>標(biāo)記設(shè)置一個(gè)類layout，選用無序列表ul對(duì)圖片進(jìn)行結(jié)構(gòu)定義，每一個(gè)列表項(xiàng)中包含圖片和段落文字，HTML代碼如下：<divclass="layout"> <h2>美麗校園</h2> <ul> <li><imgsrc="images/hu.png"/><p>湖相依、樓相伴</p></li> <li><imgsrc="images/huguang.jpg"/><p>湖光倒影</p></li> <li><imgsrc="images/biyezhao.jpg"/><p>畢業(yè)照</p></li> <li><imgsrc="images/kongzi.png"/><p>孔子像</p></li> <li><imgsrc="images/menlou.png"/><p>學(xué)校正門門樓</p></li> <li><imgsrc="images/qiao.png"/><p>創(chuàng)新橋</p></li> <li><imgsrc="images/shiguang.jpg"/><p>快樂時(shí)光</p></li> <li><imgsrc="images/xiaoyuan.jpg"/><p>美麗校園</p></li> <li><imgsrc="images/yundonghui.jpg"/><p>運(yùn)動(dòng)會(huì)</p></li> </ul></div>任務(wù)2網(wǎng)頁(yè)中的全圖排版任務(wù)實(shí)現(xiàn)（2）為顯示更加直觀，本任務(wù)選用內(nèi)部樣式表的方式編寫CSS代碼，直接在<head>中寫入<style>標(biāo)記來編寫CSS，首先編寫CSSReset可以清除一些標(biāo)記的特性，如ul、li的邊距等，然后編寫布局元素layout類，主要是給它固定寬度，水平方向居中對(duì)齊。注意：根據(jù)之前介紹的盒模型原理，此時(shí)layout的寬度應(yīng)該等于一個(gè)li占據(jù)的寬度，再乘以3即可，layout的width=(圖片寬度270px+左右外邊距20px+li左右邊框2px)*3=876px。（3）給圖片固定大小為，寬度為270px，高度為160px。并給li標(biāo)記進(jìn)行向左浮動(dòng)，即可讓元素共處同一行，當(dāng)每顯示完3個(gè)li元素后，剩余的沒有空間顯示，自動(dòng)會(huì)進(jìn)入下一行顯示。（4）給<h2>標(biāo)題內(nèi)容設(shè)置圖標(biāo)進(jìn)行視覺美化。因此時(shí)的圖片并不是網(wǎng)頁(yè)的內(nèi)容，只是顯示效果的輔助，因此此時(shí)給<h2>設(shè)置背景圖像為宜，并且不平鋪，加入背景后要讓背景顯示在文字的左側(cè)，此時(shí)應(yīng)給<h2>標(biāo)記添加一些填充留白，以為背景讓出擺放的位置。然后給背景圖片進(jìn)行適當(dāng)?shù)亩ㄎ唬怪@示到合適的位置。最后給元素添加一些邊框、字體等屬性，CSS代碼如下：任務(wù)2網(wǎng)頁(yè)中的全圖排版任務(wù)實(shí)現(xiàn)<style> ul,li{ margin:0;padding:0;list-style:none; } .layout{ width:876px; margin:20pxauto; } .layouth2{ background:url(images/titlebj.jpg)no-repeatleftcenter; line-height:2em; padding-left:66px; font-family:MicrosoftYahei; border-bottom:solid#31C4F91px; letter-spacing:0.8em; } .layoutli{ float:left; border:solid1px#DEF4FC; margin:10px; text-align:center; } .layoutliimg{ width:270px; height:160px; }任務(wù)2網(wǎng)頁(yè)中的全圖排版最終效果任務(wù)描述任務(wù)3多行多列式布局PC上的網(wǎng)站元素越來越多，為使各元素美觀大方的呈現(xiàn)出來，通過需要對(duì)頁(yè)面進(jìn)行排版。通常采用多行或多列的方式去復(fù)雜頁(yè)面進(jìn)行整體布局，從而使內(nèi)容井然有序。本任務(wù)通過實(shí)現(xiàn)如圖9-11所示的多行多列排版布局效果，來學(xué)習(xí)CSS的背景定位、圖標(biāo)管理及代碼優(yōu)化等知識(shí)。引入知識(shí)點(diǎn)任務(wù)3多行多列式布局9.4CSS代碼優(yōu)化任務(wù)3多行多列式布局9.4CSS代碼優(yōu)化1、網(wǎng)頁(yè)中的小圖標(biāo)管理網(wǎng)頁(yè)中的小圖標(biāo)通常是UI設(shè)計(jì)師為提升網(wǎng)頁(yè)美觀度而添加的網(wǎng)頁(yè)元素，通常是一種視覺設(shè)計(jì)上的美化，一般設(shè)計(jì)得比較小巧精細(xì)，完成此部分的網(wǎng)頁(yè)效果時(shí)，通常使用背景圖片進(jìn)行背景定位來輔助完成。通常會(huì)將這些小圖標(biāo)收集起來，用圖像處理工具添加在一張圖片上，并有明確的尺寸，需要用到各個(gè)小圖標(biāo)時(shí)，再進(jìn)行精確定位即可定位到指定的圖標(biāo)了。任務(wù)3多行多列式布局9.4CSS代碼優(yōu)化2、增加CSS代碼重用率主要的代碼的改進(jìn)方法是使用群組選擇器，將大部分的公共代碼進(jìn)行集合在群組中，同時(shí)也可以使用CSS覆蓋，得到代碼的重用3、容器高度不擴(kuò)展的問題在制作CSS網(wǎng)頁(yè)過程中，在默認(rèn)情況下，容器的高度默認(rèn)情況下，會(huì)隨著容器的內(nèi)容進(jìn)行自動(dòng)擴(kuò)展，但在CSS布局中常常會(huì)碰到容器不擴(kuò)展的問題?？梢栽谧尤萜鞯淖钅┨幪砑恿艘粋€(gè)清除浮動(dòng)的div容器<divclass="clear"></div>任務(wù)3多行多列式布局任務(wù)實(shí)現(xiàn)（1）創(chuàng)建HTML文件，添加一個(gè)固定寬度、頁(yè)面居中的主容器<div>標(biāo)記，作為全頁(yè)的框架，其class為content。（2）仔細(xì)觀察任務(wù)效果圖，最外層的主容器是固定寬度的，再確定容器中整體的布局結(jié)構(gòu)。本任務(wù)可采用兩種不同的方式布局，第一種可以采用三列式、固定寬度的布局，再在每一列中分成多行；第二種可以采用右側(cè)方塊固定，左側(cè)4個(gè)方塊固定寬度并自由浮動(dòng)的布局。（3）在content所在div中，添加5個(gè)<div>標(biāo)記，并分別設(shè)置類名稱為service、about、info、resource、news，為優(yōu)化代碼，將5個(gè)方塊的公共代碼抽出來，放入box類中，主要包括邊框、浮動(dòng)等屬性，完成div布局元素的HTML代碼（4）創(chuàng)建CSS樣式表，為類選擇器設(shè)置相關(guān)布局屬性進(jìn)行定位，其CSS樣式代碼如下：.content{width:990px;margin:0auto;padding:10px025px0;background:#fff;}.box{float:left;border:solid1px#e9e9e9;}.service{width:238px;height:233px;}.about{width:488px;height:233px;margin:010px;}.news{width:238px;height:428px;float:right;}.info{width:238px;height:183px;margin:10px010px0;}.resource{width:488px;height:183px;margin:10px;}任務(wù)3多行多列式布局任務(wù)實(shí)現(xiàn)（5）接下來完成每個(gè)盒子公共部分的效果，主要體現(xiàn)在標(biāo)題欄基本相同，此處采用圖標(biāo)管理，將圖標(biāo)放在一張圖片上，設(shè)置相同的背景圖片，主要的CSS代碼如下：/*每個(gè)盒子公共部分的CSS*/.box{float:left;border:solid1px#e9e9e9;}.box.top{height:32px;position:relative;border-bottom:solid1px#9ab1b8;}.box.toph2{width:70px;height:15px;margin:10px000;padding:00035px;border-right:solid1px#7c8d90;background:url("../img/icon.gif")no-repeat;overflow:hidden;float:left;font:normal14px"微軟雅黑";color:#37585e;line-height:15px;}.box.topa{width:30px;height:15px;background:url("../img/icon.gif")no-repeat0-105px;overflow:hidden;display:block;position:absolute;top:8px;right:20px;text-indent:-999em;}.box.topa:hover{background:url("../img/icon.gif")no-repeat0-120px;}任務(wù)3多行多列式布局任務(wù)實(shí)現(xiàn)（6）在每個(gè)不同的方塊中對(duì)應(yīng)應(yīng)用h2、a、ul、li等標(biāo)記做好元素的結(jié)構(gòu)，完成的HTML（7）在每個(gè)不同的方塊中，利用各自的類來定位不同的背景位置，設(shè)置好圖標(biāo)的精確位置，再對(duì)各個(gè)部分的內(nèi)容進(jìn)行細(xì)節(jié)設(shè)計(jì)，具體CSS代碼（8）此時(shí)在瀏覽器中瀏覽效果時(shí)，發(fā)現(xiàn)內(nèi)容區(qū)域背景顏色并不是白色，此問題是由于外層容器content的高度未能實(shí)現(xiàn)自動(dòng)擴(kuò)展，在HTML結(jié)構(gòu)中添加一個(gè)清除浮動(dòng)即可解決此問題。謝謝模塊十使用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)站提供給用戶簡(jiǎn)便、快捷的訪問內(nèi)容的入口，幫助用戶快速地找到網(wǎng)頁(yè)中的內(nèi)容。從形式上看，網(wǎng)站導(dǎo)航主要分橫向?qū)Ш健⒖v向?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)的過渡。以前，你必須使用圖像來實(shí)現(xiàn)這些效果。但是，通過使用CSS3漸變，你可以減少下載的時(shí)間和寬帶的使用。此外，漸變效果的元素在放大時(shí)看起來效果更好，因?yàn)闈u變（gradient）是由瀏覽器生成的。CSS3定義了兩種類型的漸變（gradients）：線性漸變（LinearGradients）-向下/向上/向左/向右/對(duì)角方向徑向漸變（RadialGradients）-由它們的中心定義本文主要介紹線性漸變的應(yīng)用。為了創(chuàng)建一個(gè)線性漸變，你必須至少定義兩種顏色結(jié)點(diǎn)。顏色結(jié)點(diǎn)即你想要呈現(xiàn)平穩(wěn)過渡的顏色，其語(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文字陰影兩類。例如CSS3的box-shadow可以寫做：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)是，通過超鏈接打破了傳統(tǒng)的一般從上至下的閱讀順序。整個(gè)網(wǎng)站可以由超鏈接串連而成，無論從首頁(yè)到每個(gè)欄目，還是進(jìn)入其他網(wǎng)站都由無數(shù)超鏈接來實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)。CSS對(duì)鏈接的樣式控制主要通過偽類來實(shí)現(xiàn)，鏈接的特殊性在于能夠根據(jù)它們所處的狀態(tài)來設(shè)置它們的樣式，鏈接的四種狀態(tài)：a:link-普通的、未被訪問的鏈接a:visited-用戶已訪問的鏈接a:hover-鼠標(biāo)指針位于鏈接的上方a:active-鏈接被點(diǎn)擊的時(shí)刻超鏈接的四種狀態(tài)控制，為我們的鏈接樣式設(shè)計(jì)提供了良好的接口，特別是通過鼠標(biāo)經(jīng)過時(shí)的鏈接樣式設(shè)計(jì)，可以實(shí)現(xiàn)豐富的交互效果，接下來在任務(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é)部門</a> <ahref="#">招生就業(yè)</a> <ahref="#">創(chuàng)新創(chuàng)業(yè)</a> <ahref="#">教輔部門</a> <ahref="#">教輔部門</a> </div>任務(wù)1用CSS3設(shè)計(jì)網(wǎng)站導(dǎo)航任務(wù)實(shí)現(xiàn)（2）接下來設(shè)計(jì)CSS樣式，首先將div容器進(jìn)行固定，居中顯示，再完成導(dǎo)航的布局，因?yàn)?lt;a>標(biāo)記是行間元素，一般無法實(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)核問題，需要針對(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)過超鏈接時(shí)的a:hover效果增強(qiáng)交互性，這里可以設(shè)置變換背景顏色等效果，完成后在瀏覽器中預(yù)覽其效果，效果見圖10-2所示。瀏覽時(shí)若無法顯示出CSS3的效果，請(qǐng)更換最新版的瀏覽器測(cè)試其效果。任務(wù)描述任務(wù)2用CSS3美化表格表格作為一種非常特殊而實(shí)用的數(shù)據(jù)表達(dá)方式，是網(wǎng)頁(yè)中經(jīng)常使用的元素，一般用來顯示從后臺(tái)讀取出的數(shù)據(jù)，也可以用表格進(jìn)行布局操作。同其他HTML標(biāo)記一樣，我們也可以使用CSS對(duì)表格進(jìn)行美化，例如制作細(xì)線表格、隔行變色表格、鼠標(biāo)經(jīng)過時(shí)變色的表格等。本任務(wù)主要通過使用CSS來控制表格的樣式，完成一個(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)記來定義。每個(gè)表格均有若干行（由<tr>標(biāo)記定義），每行被分割為若干單元格（由<td>標(biāo)記定義）。字母td指表格數(shù)據(jù)（tabledata），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。除此之處，還有幾個(gè)專用標(biāo)記，如<caption>定義表格的名稱，<thead>定義表格的表頭，<tbody>定義表格的主體，<th>定義表頭的單元格，這些標(biāo)記都有各自的語(yǔ)義。在應(yīng)用表格排版時(shí)，應(yīng)充分使用各個(gè)標(biāo)記之間的嵌套來減少CSS類的定義，提升代碼的可閱讀性。2、CSS3中的nth-child()選擇器表格往往用來顯示多行的數(shù)據(jù)，每一行的位置都是平等的，若要設(shè)置其中某一行的樣式，不是那么方便。如要本次任務(wù)中要設(shè)置隔行變色，涉及到基數(shù)行和偶數(shù)行的樣式不同的問題。CSS3中的nth-child選擇器為此提供了便利，:nth-child(n)選擇器匹配屬于其父元素的第N個(gè)子元素，不論元素的類型，其語(yǔ)法格式為：:nth-child(n|even|odd|formula)，各參數(shù)的作用見表所示。除IE8及更早的版本以外，所有主流瀏覽器均支持:nth-child()選擇器。任務(wù)2用CSS3美化表格10.3HTML表格3、hover選擇器在前面一個(gè)任務(wù)中，鼠標(biāo)經(jīng)過超鏈接時(shí)，使用:hover在鼠標(biāo)移到鏈接上時(shí)添加的特殊樣式。其實(shí)::hover選擇器可用于所有元素，不僅是鏈接。所有主流瀏覽器都支持:hover選擇器。做表格隔行變色，高亮顯示時(shí)，可以通過設(shè)置CSS中的tr:hover偽類選擇器達(dá)到效果，一個(gè)表格中，要求是當(dāng)鼠標(biāo)滑過每一行時(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)部樣式表的方式編寫CSS代碼，直接在<head>中寫入<style>標(biāo)記來編寫CSS，為使代碼簡(jiǎn)潔，本任務(wù)直接使用標(biāo)記選擇器來控制表格各元素的屬性。（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)過時(shí)，高亮顯示效果，此時(shí)使用hover偽類，即可方便實(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)過時(shí)高亮顯示*/ color:#fff; }</style>任務(wù)2用CSS3美化表格任務(wù)實(shí)現(xiàn)（7）在瀏覽器中瀏覽網(wǎng)頁(yè)效果，效果如圖10-4所示，若部分CSS3的效果無法顯示，請(qǐng)使用新版的瀏覽器測(cè)試。任務(wù)描述任務(wù)3用CSS3美化表單表單(form)在功能型網(wǎng)站中，是網(wǎng)頁(yè)瀏覽者與網(wǎng)站服務(wù)器之間進(jìn)行信息傳遞的重要工具，也是網(wǎng)站交互中重要的元素。在網(wǎng)頁(yè)中，小到搜索框，大到注冊(cè)表單，用戶控制面板，都需要使用表單及表單元素進(jìn)行設(shè)計(jì)。用戶在網(wǎng)頁(yè)上進(jìn)行注冊(cè)、登陸、留言等操作時(shí)，都是通過表單向網(wǎng)站數(shù)據(jù)庫(kù)提交或讀取數(shù)據(jù)的。本任務(wù)中，我們通過模仿QQ注冊(cè)表單頁(yè)面，來學(xué)習(xí)CSS3對(duì)表單的美化方法，瀏覽效果如圖10-5所示，部分交互效果可通過網(wǎng)址在QQ官方網(wǎng)站瀏覽。引入知識(shí)點(diǎn)任務(wù)3用CSS3美化表單10.4CSS屬性選擇器任務(wù)3用CSS3美化表單10.4CSS屬性選擇器CSS選擇器中，比較常用的是標(biāo)記選擇器、類選擇器、ID選擇器、偽類選擇器等，而屬性選擇器是一種特殊類型的選擇器。屬性選擇器可以指定具有特定屬性的HTML元素樣式，具有特定屬性的HTML元素樣式不僅僅是class和id。例如，給表單元素設(shè)置樣式時(shí)，可以通過以下代碼設(shè)置相同類型的元素，但擁有的屬性不同的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>每一天，樂在溝通。</h3> <form> <p><inputtype="text"placeholder="昵稱"autofocus="autofocus"/></p> <p><inputtype="password"placeholder="密碼"/></p> <p> <select> <option>+86</option> <option>中國(guó)+86</option> <option>中國(guó)香港特別行政區(qū)+852</option> <option>中國(guó)澳門特別行政區(qū)+853</option> </select> <inputtype="tel"placeholder="手機(jī)號(hào)碼"/></p> <p><inputtype="submit"value="立即注冊(cè)"/></p> </form> </div>任務(wù)3用CSS3美化表單任務(wù)實(shí)現(xiàn)（3）編寫CSS樣式，首先可以編寫布局控制好頁(yè)面，及浮動(dòng)效果，然后對(duì)表單元素進(jìn)行樣式設(shè)計(jì)，此處可先寫公共的樣式，即所有元素都具有的外觀，這里有兩種類型，一種是input，一種是select，可合并在一組來寫，屬性主要有寬度、高度、行高、填充、圓角、邊框、字體大小等。（4）下拉列表及電話號(hào)碼輸入框，因?yàn)橐幫恍?，所以需要進(jìn)行浮動(dòng)，此時(shí)，對(duì)select元素及input[type='tel']這兩個(gè)元素分別設(shè)置不同的寬度及浮動(dòng)。（5）對(duì)提交按鈕進(jìn)行樣式設(shè)計(jì)，采用屬性選擇器input[type='submit']，因提交按鈕沒有邊框和填充，因此需要給它添加一點(diǎn)寬度，這樣才能與上面的元素寬度對(duì)齊，并給提交按展示設(shè)置背景顏色、文字顏色、外邊距，同時(shí)需要清除浮動(dòng)（因上面的元素進(jìn)行了浮動(dòng)）。（6）給所有表單元素input和select，使用偽類:hover和:focus添加交互效果，主要設(shè)置其邊框顏色等。注意：:focus選擇器用于選取輸入獲得焦點(diǎn)的元素，此屬性之前較少使用，主要用在表單元素中。最后，對(duì)一些細(xì)節(jié)的字體、寬度、邊距等做一些細(xì)節(jié)設(shè)置，完成CSS代碼任務(wù)3用CSS3美化表單任務(wù)實(shí)現(xiàn)（8）完成后在瀏覽器中瀏覽效果，若有沒有達(dá)到的效果，再次進(jìn)行修正，最終瀏覽效果如圖10-6所示。謝謝模塊十一綜合案例具體任務(wù)學(xué)校網(wǎng)站頁(yè)面設(shè)計(jì)具體任務(wù)學(xué)校網(wǎng)站頁(yè)面設(shè)計(jì)本任務(wù)設(shè)計(jì)一個(gè)完整的學(xué)校網(wǎng)站頁(yè)面，包括網(wǎng)站和網(wǎng)頁(yè)的建立、CSS樣式的設(shè)計(jì)和網(wǎng)頁(yè)相關(guān)信息功能的設(shè)計(jì)，網(wǎng)頁(yè)效果如圖所示。我們能夠清晰地看到頁(yè)面的整體結(jié)構(gòu)分布，其頂部為導(dǎo)航信息欄，中間是關(guān)于學(xué)校的相關(guān)介紹及學(xué)校、學(xué)院的最新消息展示等，底部為網(wǎng)站信息、版權(quán)聲明等內(nèi)容。整個(gè)頁(yè)面的設(shè)計(jì)涵蓋了本書各個(gè)模塊的知識(shí)，通過實(shí)現(xiàn)本任務(wù)，可以較好地將理論知識(shí)轉(zhuǎn)化為實(shí)踐能力。任務(wù)實(shí)現(xiàn)學(xué)校網(wǎng)站頁(yè)面設(shè)計(jì)（1）啟動(dòng)HBuilderX軟件，執(zhí)行“文件”→“新建”命令，輸入站點(diǎn)名稱和本地站點(diǎn)文件夾路徑，單擊“保存”按鈕即可成功建立一個(gè)名稱為“學(xué)校網(wǎng)站”的站點(diǎn)任務(wù)實(shí)現(xiàn)學(xué)校網(wǎng)站頁(yè)面設(shè)計(jì)（1）啟動(dòng)HBuilderX軟件，執(zhí)行“文件”→“新建”命令，輸入站點(diǎn)名稱和本地站點(diǎn)文件夾路徑，單擊“保存”按鈕即可成功建立一個(gè)名稱為“學(xué)校網(wǎng)站”的站點(diǎn)學(xué)校網(wǎng)站文件夾下包含網(wǎng)站的index.html主頁(yè)文件、course.html子頁(yè)文件，以及CSS和images兩個(gè)文件夾，分別用于存放網(wǎng)站需要的CSS樣式文件和圖片文件。任務(wù)實(shí)現(xiàn)學(xué)校網(wǎng)站頁(yè)面設(shè)計(jì)（2）建立CSS樣式文件，如圖所示。

編輯層級(jí)樣式表內(nèi)容，然后保存到CSS文件夾下，方便整體管理網(wǎng)站的代碼。任務(wù)實(shí)現(xiàn)學(xué)校網(wǎng)站頁(yè)面設(shè)計(jì)（3）導(dǎo)航的代碼設(shè)計(jì)與分析。①導(dǎo)航頁(yè)面設(shè)計(jì)的代碼如下：<divclass="header"><divclass="header-top"> <divclass="container"> <divclass="detail"> <ul> <li><iclass="glyphiconglyphicon-earphone"aria-hidden="true"></i>+66666666666</li> <li><iclass="glyphiconglyphicon-time"aria-hidden="true"></i>周一到周五9:00到18:00</li> </ul> </div> <divclass="indicate"> <p><iclass="glyphiconglyphicon-map-marker"aria-hidden="true"></i>學(xué)校路666號(hào)</p> </div> <divclass="clearfix"></div> </div></div><divclass="container"> <navclass="navbarnavbar-default"> <divclass="container-fluid"> <!---Brandandtogglegetgroupedforbettermobiledisplay---> <divclass="navbar-header"> <buttontype="button"class="navbar-togglecollapsed"data-toggle="collapse"data-target="#bs-example-navbar-collapse-1"aria-expanded="false"> <spanclass="sr-only">Togglenavigation</span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> <spanclass="icon-bar"></span> </button> <divclass="navbar-brand"> <h1><ahref="index.html">學(xué)校<span>主頁(yè)</span></a></h1> </div> </div> <!--Collectthenavlinks,forms,andothercontentfortoggling--> <divclass="collapsenavbar-collapse"id="bs-example-navbar-collapse-1"> <navclass="link-effect-2"id="link-effect-2"> <ulclass="navnavbar-nav"> <liclass="active"><ahref="index.html"><spandata-hover="Home">主頁(yè)</span></a></li> <li><ahref="about.html"><spandata-hover="About">關(guān)于我們</span></a></li> <li><ahref="services.html"><spandata-hover="Services">提供服務(wù)</span></a></li> <li><ahref="projects.html"><spandata-hover="Projects">計(jì)劃與安排</span></a></li> <li><ahref="courses.html"><spandata-hover="Courses">課程</span></a></li> <li><ahref="codes.html"><spandata-hover="Codes">資源庫(kù)</span></a></li> <li><ahref="contact.html"><spandata-hover="Contact">聯(lián)系我們</span></a></li> </ul> </nav> </div> </div> </nav></div></div>任務(wù)實(shí)現(xiàn)學(xué)校網(wǎng)站頁(yè)面設(shè)計(jì)（3）導(dǎo)航的代碼設(shè)計(jì)與分析。通過使用<ul>和<li>標(biāo)記，可以實(shí)現(xiàn)網(wǎng)站導(dǎo)航欄列表，對(duì)于導(dǎo)航中的各個(gè)條目，填入需要表現(xiàn)的導(dǎo)航信息，展示導(dǎo)航內(nèi)容。通過<nav>標(biāo)記定義導(dǎo)航中的鏈接部分，將導(dǎo)航中的各條目?jī)?nèi)容轉(zhuǎn)化為鏈接，實(shí)現(xiàn)不同內(nèi)容主頁(yè)的跳轉(zhuǎn)。任務(wù)實(shí)現(xiàn)學(xué)校網(wǎng)站頁(yè)面設(shè)計(jì)②導(dǎo)航CSS樣式設(shè)計(jì)的代碼如下：定義<nav>標(biāo)簽的樣式，通過position，display等屬性控制導(dǎo)航欄內(nèi)位置顯示等屬性。對(duì)于每個(gè)條目，通過background屬性，設(shè)置整個(gè)header內(nèi)的背景顏色，進(jìn)一步還可通過padding屬性設(shè)置對(duì)應(yīng)區(qū)域內(nèi)邊距。nava{ position:relative; display:inline-block; outline:none; text-decoration:none;}nava:hover,nava:focus{ outline:none;}.header{background:#49872E;}.header-top{padding:1em0;background:#2e353f;}任務(wù)實(shí)現(xiàn)學(xué)校網(wǎng)站頁(yè)面設(shè)計(jì)通過上述代碼可以得到如圖所示的效果。任務(wù)實(shí)現(xiàn)學(xué)校網(wǎng)站頁(yè)面設(shè)計(jì)（4）主體部分的代碼設(shè)計(jì)與分析。①學(xué)校宣傳信息的代碼如下：通過<img>標(biāo)記設(shè)置區(qū)塊背景，用于展示學(xué)校風(fēng)景。 <divclass="banner"><div><imgsrc="image/1.jpg"alt=""width="100%"/></div> </div>任務(wù)實(shí)現(xiàn)學(xué)校網(wǎng)站頁(yè)面設(shè)計(jì)②學(xué)校宣傳信息底部條幅頁(yè)面設(shè)計(jì)的代碼如下：通過<h4>標(biāo)記設(shè)置標(biāo)題，通過<i>標(biāo)記設(shè)置文本斜體。<divclass="banner-bottom"> <divclass="col-md-3ban-grid"> <divclass="ban-left"> <h4>師資力量</h4> </div> <divclass="ban-right"> <iclass="glyphiconglyphicon-user"></i> </div> <divclass="clearfix"></div> </div> <divclass="col-md-3ban-grid"> <divclass="ban-left"> <h4>視頻課程</h4> </div> <divclass="ban-right"> <iclass="glyphiconglyphicon-facetime-video"></i> </div> <divclass="clearfix"></div> </div> <divclass="col-md-3ban-grid"> <divclass="ban-left"> <h4>圖書館</h4> </div> <divclass="ban-right"> <iclass="glyphiconglyphicon-book"></i> </div> <divclass="clearfix"></div> </div> <divclass="col-md-3ban-grid"> <divclass="ban-left"> <h4>在線課程</h4> </div> <divclass="ban-right"> <iclass="glyphiconglyphicon-blackboard"></i> </div> <divclass="clearfix"></div> </div> <divclass="clearfix"></div></div>任務(wù)實(shí)現(xiàn)學(xué)校網(wǎng)站頁(yè)面設(shè)計(jì)③學(xué)校宣傳信息底部條幅CSS設(shè)計(jì)的代碼如下：.banner-bottom{text-align:center;background:#EDF7FF;