HTML5+CSS3+JavaScript網(wǎng)頁開發(fā)實(shí)戰(zhàn) 課件 模塊4“加入我們”頁面設(shè)計(jì)

模塊4“’加入我們’頁面設(shè)計(jì)”眾所周知，在Web編程中，表單主要用于收集用戶輸入的數(shù)據(jù)。HTML5在保留原有HTML表單控件、屬性的基礎(chǔ)上，大大增強(qiáng)了表單和表單控件的功能。本模塊將使用表單元素配合CSS3選擇器進(jìn)行“加入我們”頁面的布局與樣式美化?！凹尤胛覀儭表撁娴牟季峙c樣式美化任務(wù)11.1表單<form>表單表示文檔中的一個(gè)區(qū)域，此區(qū)域包含交互控件，用于向Web服務(wù)器提交信息。<form>表單可以包含input元素，如文本框、復(fù)選框、單選框、提交按鈕等。<form>表單本身不可見，其常見屬性如表4-1所示。表4-1

<form>表單的常見屬性屬性值描述actionURL處理表單提交的URLautocompleteonoff規(guī)定是否啟用表單的自動完成功能methodgetpost瀏覽器使用何種

HTTP

方式來提交表單target_blank_self_parent_top規(guī)定在何處打開actionURLenctypeapplication/x-www-form-urlencodedmultipart/form-datatext/plainapplication/x-www-form-urlencoded：未指定屬性時(shí)的默認(rèn)值multipart/form-data：當(dāng)表單包含type=file的input元素時(shí)使用此值text/plain：出現(xiàn)在HTML5中，用于調(diào)試1.1表單使用方法如下：<formaction="login.php"method="get"target="_self"><inputtype="text"name="username"><inputtype="password"name="password"><inputtype="submit"></form>1.1表單對于method屬性中g(shù)et和post的區(qū)別，在HTML的學(xué)習(xí)中，大家僅需先了解如下幾點(diǎn)即可。在使用get方式時(shí)，<form>表單中的數(shù)據(jù)集被附加到action屬性所指定的URL后面進(jìn)行提交，其生成的URL為“l(fā)ogin.php?username=zhangsan&password=123”。在使用post方式時(shí)，<form>表單中的數(shù)據(jù)集被包裝在請求的body中發(fā)送，其生成的URL為“l(fā)ogin.php”。如果使用get方式提交<form>表單中的用戶名和密碼，則顯然是不安全的，因?yàn)橛脩裘兔艽a將出現(xiàn)在URL地址上。在對安全性有要求的情況下，應(yīng)該使用post方式進(jìn)行提交。瀏覽器對URL地址的長度是有限制的，所以如果需要提交長文本內(nèi)容，則應(yīng)該使用post方式。1.2表單元素input元素用于為基于Web的表單創(chuàng)建交互式控件，以便接收來自用戶的數(shù)據(jù)。input元素根據(jù)不同的type屬性值，可以呈現(xiàn)為文本域、復(fù)選框、單選按鈕、按鈕等。1．text類型<inputtype="text">用于創(chuàng)建基礎(chǔ)的單行文本域。text類型常用屬性如表4-2所示。屬性描述name文本域的名稱value該屬性是一個(gè)包含了文本域當(dāng)前文字信息的字符串placeholder文本域?yàn)榭諘r(shí)顯示的一個(gè)示例值maxlength文本域能接收的最大字符數(shù)minlength文本域能輸入的最小字符數(shù)size一個(gè)數(shù)字，指示文本域有多少個(gè)字符寬度readonly一個(gè)布爾屬性，指示文本域中的內(nèi)容是否應(yīng)該為只讀。當(dāng)設(shè)置該屬性后，文本域內(nèi)的value值不能被修改autocomplete該屬性表示這個(gè)控件的值是否可被瀏覽器自動填充required該屬性表示此值為必填項(xiàng)autofocus該屬性指定加載時(shí)控件具有輸入焦點(diǎn)表4-2

text類型常用屬性1.2.1

text類型示例：<inputtype="text"size="20"maxlength="10"placeholder="請輸入您的姓名"requiredautofocus>運(yùn)行以上代碼后，瀏覽器的顯示效果如圖4-1所示。圖4-1

text類型表單效果1.2.1

text類型大家需要注意以下幾個(gè)屬性。（1）value和placeholder。value是文本域中的輸入值，它在表單獲得焦點(diǎn)時(shí)仍然存在，并且可被表單提交。我們通常通過讀取value屬性值來獲得用戶輸入的內(nèi)容并提交給服務(wù)端處理。placeholder是文本域?yàn)榭諘r(shí)顯示的一個(gè)示例值，它在表單獲得焦點(diǎn)時(shí)消失，并且不能作為文本域的value屬性值，也不能被表單提交。placeholder屬性通常用于設(shè)置用戶輸入的提示內(nèi)容。1.2.1

text類型（2）size和maxlength。size屬性用于規(guī)定文本域有多少個(gè)字符的寬度，而maxlength屬性用于規(guī)定文本域能接收的最大字符數(shù)，如圖4-2所示。<inputtype="text"size="20"maxlength="10">圖4-2

size和maxlength屬性效果1.2.1

text類型（3）autocomplete。autocomplete屬性表示這個(gè)控件的值是否可被瀏覽器自動填充，例如：<formaction="user.php"method="get">

城市：<inputtype="text"name="city"autocomplete="off">

姓名：<inputtype="text"name="name"autocomplete="on"><inputtype="submit"></form>1.2.1

text類型如圖4-3所示，當(dāng)單擊“提交”按鈕后，所有在“姓名”文本框中填寫過的值將被保存，并在下一次填寫時(shí)起到啟動提示的作用，如圖4-3所示。圖4-3

autocomplete屬性自動填充效果1.2.1

text類型注意，autocomplete屬性的啟動保存功能必須具備以下3個(gè)條件。元素具有name屬性或id屬性。元素處于<form>表單中。表單必須具有提交按鈕。與text類型較為類似的還有password、email、url、tel、number、search等類型。1.2表單元素2．textarea元素textarea元素表示一個(gè)多行純文本編輯控件，即多行文本域。當(dāng)你希望用戶輸入一段相當(dāng)長的、不限格式的文本時(shí)，例如評論或反饋表單中的一段意見時(shí)，可以使用該元素。該元素為閉合標(biāo)簽，不具備value屬性，其常用屬性如表4-2所示。表4-2

textarea元素常用屬性屬性描述name設(shè)置多行文本域的名稱placeholder文本域?yàn)榭諘r(shí)顯示的一個(gè)示例值rows設(shè)置多行文本域的可見行數(shù)cols設(shè)置多行文本域的可見寬度required該屬性表示此值為必填項(xiàng)autofocus該屬性指定加載時(shí)控件具有輸入焦點(diǎn)1.2.2

textarea元素例如：圖4-4多行文本域效果<textareacols="35"rows="4"placeholder="請輸入個(gè)人介紹"></textarea>運(yùn)行以上代碼后，瀏覽器的顯示效果如圖4-4所示。拖動多行文本域的右下角，可以任意改變其大小，如果需要禁用拖動縮放功能，則可以對該元素設(shè)置“resize:none”樣式。1.2表單元素3．file類型<inputtype="file">可以使用戶選擇一個(gè)或多個(gè)文件上傳到服務(wù)器中。file類型常用屬性如表4-3所示。表4-3

file類型常用屬性屬性描述accept描述允許的文件類型capture捕獲圖像或視頻數(shù)據(jù)的源multiple表示用戶可以選擇多個(gè)文件files列出了已選擇的文件autofocus該屬性指定加載時(shí)控件具有輸入焦點(diǎn)1.2.3

file類型（1）accept屬性。accept屬性用于描述允許的文件類型。例如，當(dāng)指定了允許的類型為gif和jpeg時(shí)，在選擇文件時(shí)只能選擇對應(yīng)類型的圖片文件，如果沒有指定accept屬性，則可以選擇任意類型的文件，如圖4-5所示。<inputtype="file"accept="image/gif,image/jpeg">圖4-5

accept屬性效果（2）capture屬性。capture屬性指定了捕獲圖像或視頻數(shù)據(jù)的源。在WebApp上指定capture屬性，可以調(diào)用系統(tǒng)默認(rèn)照相機(jī)、攝像機(jī)和錄音機(jī)功能。capture屬性可以捕獲系統(tǒng)默認(rèn)設(shè)備的媒體信息。捕獲系統(tǒng)照相機(jī)：1.2.3

file類型<inputtype="file"accept="image/*"capture="camera">捕獲系統(tǒng)攝像機(jī)：<inputtype="file"accept="video/*"capture="camcorder">1.2.3

file類型捕獲系統(tǒng)錄音機(jī)：<inputtype="file"accept="audio/*"capture="microphone">圖4-6

multiple屬性效果（3）multiple屬性。multiple屬性表示用戶可以選擇多個(gè)文件，在彈出的列表框中進(jìn)行框選，我們可以上傳多個(gè)圖片文件，如圖4-6所示。例如：<inputtype="file"multiple>1.2.3

file類型（4）files屬性。files屬性包括每個(gè)已選擇的文件，如果沒有指定multiple屬性，則files屬性中只有一個(gè)成員。例如：<inputtype="file"multiple>1.2.3

file類型當(dāng)在文件域中選擇了多個(gè)文件時(shí)，可以通過瀏覽器的調(diào)試工具進(jìn)行分析，在“Elements”窗口中選中表單元素，通過表單元素的“Properties”屬性窗口可以看到，files屬性中包括可供選擇的圖片文件列表。一般而言，該屬性被提供給JavaScript腳本語言調(diào)用，以獲取上傳的文件列表成員信息，如圖4-7所示。圖4-5

accept屬性效果1.2表單元素4．radio類型<inputtype="radio">用于創(chuàng)建單選按鈕。radio類型常用屬性如表4-4所示。表4-4

radio類型常用屬性屬性描述checked設(shè)置或返回單選按鈕的狀態(tài)disabled設(shè)置或返回是否禁用單選按鈕name設(shè)置或返回單選按鈕的名稱value設(shè)置或返回單選按鈕的value屬性值autofocus該屬性指定加載時(shí)控件具有輸入焦點(diǎn)1.2.4

radio類型如果需要創(chuàng)建一組單選按鈕，則必須為每個(gè)表單成員添加一個(gè)相同的name屬性值。例如：<inputtype="radio"name="gender">男

<inputtype="radio"name="gender">女圖4-8

radio類型表單效果運(yùn)行以上代碼后，瀏覽器的顯示效果如圖4-8所示。1.2.4

radio類型如果我們希望在以上案例中通過單擊描述文字也能達(dá)到單選按鈕的選擇效果，則可以使用label元素關(guān)聯(lián)單選按鈕。將一個(gè)label元素和一個(gè)input元素匹配在一起，此時(shí)需要給input元素一個(gè)id屬性。而label元素需要一個(gè)for屬性，其值和input元素的id屬性一樣。例如：<inputtype="radio"id="man"name="gender"><labelfor="man">男</label><inputtype="radio"id="woman"name="gender"><labelfor="woman">女</label>1.2表單元素

5．checkbox類型<inputtype="checkbox">用于創(chuàng)建復(fù)選框。它具有與radio類型相同的屬性及屬性值。如果需要創(chuàng)建一組復(fù)選框，則必須為每個(gè)表單成員添加一個(gè)相同的name屬性值。例如：<h4>請選擇您喜愛的水果：</h4><inputtype="checkbox"id="banana"name="fruit"><labelfor="banana">香蕉</label><inputtype="checkbox"id="apple"name="fruit"><labelfor="apple">蘋果</label><inputtype="checkbox"id="pear"name="fruit"><labelfor="pear">梨子</label><inputtype="checkbox"id="peach"name="fruit"><labelfor="banana">桃子</label>1.2.5

checkbox類型運(yùn)行以上代碼后，瀏覽器的顯示效果如圖4-9所示。圖4-9

checkbox類型表單效果1.2表單元素6．button類型<inputtype="button">用于創(chuàng)建一個(gè)沒有默認(rèn)值的可單擊按鈕。如果需要按鈕出現(xiàn)文字標(biāo)簽，則可以指定value屬性值。例如：<inputtype="button"value="按鈕">運(yùn)行以上代碼后，瀏覽器的顯示效果如圖4-10所示。圖4-10

button類型表單效果1.2.6

button類型在HTML5中，建議使用<button>標(biāo)簽創(chuàng)建按鈕，以上代碼可被更改為：<button>按鈕</button>與button類型較為類似的還有submit、reset等類型。1.2表單元素

7．select元素select元素表示一個(gè)提供選項(xiàng)的下拉列表控件，例如：<formaction="login.php"method="get"target="_self"><labelfor="chooseFruit">選擇您最喜歡的水果：</label><br><selectname="fruit"id="chooseFruit"><optionvalue="apple">蘋果</option><optionvalue="banana">香蕉</option><optionvalue="pear">梨子</option><optionvalue="peach">桃子</option></select><inputtype="submit"></form>1.2.7

select元素運(yùn)行以上代碼后，瀏覽器的顯示效果如圖4-11所示。以上代碼展示了select元素的使用方法。select元素可以通過id屬性與label元素關(guān)聯(lián)在一起。name屬性表示提交到服務(wù)器的相關(guān)數(shù)據(jù)點(diǎn)的名字。每個(gè)選項(xiàng)由select元素中的一個(gè)option元素定義。每個(gè)option元素都應(yīng)該有一個(gè)value屬性，其中包含被選中時(shí)需要提交到服務(wù)器的數(shù)據(jù)值。如果不包含value屬性，則value屬性值默認(rèn)為元素中的文本。用戶可以在option元素中設(shè)置一個(gè)selected屬性，以將其設(shè)置為頁面加載完成時(shí)默認(rèn)選中的元素。在上述例子中，我們選中了“梨子”選項(xiàng)，單擊“提交”按鈕，表單通過URL地址將數(shù)據(jù)值“pear”提交給了服務(wù)器。圖4-11下拉列表控件效果1.2.7

select元素select元素有一些用于控制元素的特有屬性，例如，multiple屬性規(guī)定了能否同時(shí)選中多個(gè)選項(xiàng)，size屬性規(guī)定了一次性顯示多少個(gè)選項(xiàng)。如果下拉列表中的選項(xiàng)較多，那么我們可以通過optgroup元素進(jìn)行分組。示例：<select><optgrouplabel="福建"><optionvalue="xm">廈門</option><optionvalue="fz">福州</option><optionvalue="ly">龍巖</option></optgroup><optgrouplabel="浙江"><optionvalue="hz">杭州</option><optionvalue="nb">寧波</option><optionvalue="wz">溫州</option></optgroup></select>1.2.7

select元素運(yùn)行以上代碼后，瀏覽器的顯示效果如圖4-12所示。圖4-12

optgroup元素分組效果1.2表單元素

8．datalist元素datalist元素包含了一組option元素，這組元素表示其他表單控件的可選值。例如：<h1>datalist元素學(xué)習(xí)</h1><inputtype="text"id="mybooks"list="books"><datalistid="books"><optionvalue="假如給我三天光明"></option><optionvalue="經(jīng)濟(jì)學(xué)講義"></option></datalist>1.2.8

datalist元素運(yùn)行以上代碼后，瀏覽器的顯示效果如圖4-13所示。圖4-13

datalist元素效果1.2表單元素9．details元素details元素可以創(chuàng)建一個(gè)掛件，僅在被切換成展開狀態(tài)時(shí)，才會顯示內(nèi)含的信息。summary元素可為該部件提供概要或者標(biāo)簽。例如：<h1>details元素學(xué)習(xí)</h1><details><summary>點(diǎn)擊查看details元素的概念</summary>details：用于描述文檔或文檔某個(gè)部分的細(xì)節(jié)。</details>1.2.9

details元素運(yùn)行以上代碼后，瀏覽器的顯示效果如圖4-14所示。圖4-14

details元素效果1.3

CSS3選擇器CSS3中新增了許多選擇器，便于對頁面元素進(jìn)行篩選，下面我們一起來學(xué)習(xí)并認(rèn)識它們。1．層級選擇器（1）相鄰兄弟選擇器。相鄰兄弟選擇器可以選擇緊接在一個(gè)元素后面的另一個(gè)元素，且要求二者有相同的父元素，使用符號“+”表示。例如：<style>.li1+.li2{font-weight:bolder;font-size:32px;}</style><ul><liclass="li1">列表項(xiàng)一</li><liclass="li2">列表項(xiàng)二</li><liclass="li3">列表項(xiàng)三</li><liclass="li4">列表項(xiàng)四</li></ul>1.3.1層級選擇器運(yùn)行以上代碼后，瀏覽器的顯示效果如圖4-15所示。圖4-15相鄰兄弟選擇器效果1.3.1層級選擇器

注意，相鄰兄弟選擇器只能選擇緊鄰的“弟元素”，例如，以下兩種寫法都是無法完成標(biāo)簽選擇的：<style>/*非緊鄰元素*/.li1+.li3{font-weight:bolder;}/*非"弟元素"*/.li2+.li1{font-weight:bolder;}</style><ul><liclass="li1">列表項(xiàng)一</li><liclass="li2">列表項(xiàng)二</li><liclass="li3">列表項(xiàng)三</li><liclass="li4">列表項(xiàng)四</li></ul>1.3.1層級選擇器（2）通用兄弟選擇器。通用兄弟選擇器的使用方式和相鄰兄弟選擇器的使用方式相似，不同的是，通用兄弟選擇器所選擇的元素位置無須緊鄰，只須層級相同即可，使用符號“~”表示。1.3

CSS3選擇器2．結(jié)構(gòu)性偽類選擇器結(jié)構(gòu)性偽類選擇器的公共特征是允許開發(fā)者根據(jù)文檔結(jié)構(gòu)來指定元素的樣式。其具體的使用方法和描述如表4-5所示。表4-5結(jié)構(gòu)性偽類選擇器的使用方法和描述選擇器描述first-child表示在一組兄弟元素中的第一個(gè)元素last-child表示其父元素的最后一個(gè)子元素nth-child(N)用于選取屬于其父元素的第N個(gè)子元素，不論元素的類型nth-last-child(N)用于選取屬于其父元素的倒數(shù)第N個(gè)子元素，不論元素的類型nth-of-type(N)匹配同類型中的第N個(gè)同級兄弟元素nth-last-of-type(N)匹配同類型中的倒數(shù)第N個(gè)同級兄弟元素first-of-type匹配其父元素特定類型的第一個(gè)子元素last-of-type匹配其父元素特定類型的最后一個(gè)子元素only-child匹配沒有任何兄弟元素的元素only-of-type代表任意一個(gè)元素，這個(gè)元素沒有其他相同類型的兄弟元素empty匹配沒有子元素（包括文本元素）的元素1.3.2結(jié)構(gòu)性偽類選擇器以上選擇器中的參數(shù)N還可以使用表達(dá)式“a*n+b”來替換，n=0，1，2，3……例如：“2*n+1”用于匹配位置為1、3、5、7……的元素。也可以使用關(guān)鍵字odd來替換此表達(dá)式?！?*n+0”用于匹配位置為2、4、6、8……的元素。也可以使用關(guān)鍵字even來替換此表達(dá)式。a和b都必須為整數(shù)，并且元素的第一個(gè)子元素索引為1，而不是像數(shù)組一樣從0開始。在上述表達(dá)式中，a*n必須寫在b的前面，不能寫成b+a*n的形式。例如：<style>

li:nth-child(2*n+1){background:skyblue;}</style><ul><li>第一項(xiàng)目</li><li>第二項(xiàng)目</li><li>第三項(xiàng)目</li><li>第四項(xiàng)目</li><li>第五項(xiàng)目</li><li>第六項(xiàng)目</li></ul>1.3.2結(jié)構(gòu)性偽類選擇器運(yùn)行以上代碼后，瀏覽器的顯示效果如圖4-16所示。圖4-16結(jié)構(gòu)性偽類選擇器效果1.3

CSS3選擇器3．狀態(tài)偽類選擇器（1）enabled。enabled表示任何被啟用的元素。如果一個(gè)元素能夠被激活（如選擇、單擊等），或者能夠獲取焦點(diǎn)，則該元素是被啟用的。元素也有一個(gè)禁用的狀態(tài)，在被禁用時(shí)，元素不能被激活或獲取焦點(diǎn)。例如：<style>

input:enabled{font-weight:bolder;font-style:italic;}</style><inputtype="text">1.3.3狀態(tài)偽類選擇器運(yùn)行以上代碼后，瀏覽器的顯示效果如圖4-17所示。圖4-17

enabled狀態(tài)偽類選擇器效果1.3.3狀態(tài)偽類選擇器（2）disabled。disabled與上述的enabled含義相反，該狀態(tài)偽類選擇器表示任何被禁用的元素。（3）checked。checked狀態(tài)偽類選擇器用于指定當(dāng)表單中的radio單選按鈕或checkbox復(fù)選框處于選中狀態(tài)時(shí)的樣式，如圖4-18所示。例如：<style>#apple:checked~p{font-weight:bolder;font-style:italic;}</style><inputtype="radio"name="c"id="apple">蘋果<pid="fruit">你選中了水果</p>圖4-18

checked狀態(tài)偽類選擇器效果1.3

CSS3選擇器4．偽元素選擇器偽元素是一個(gè)被附加至選擇器末的關(guān)鍵詞，允許用戶修改被選擇元素特定部分的樣式。在HTML5中，偽類選擇器用一個(gè)冒號來表示，而偽元素選擇器則用兩個(gè)冒號來表示。1.3.4偽元素選擇器（1）before。before偽元素選擇器用于創(chuàng)建一個(gè)元素，且該元素將成為已選中元素的第一個(gè)子元素。通常使用content屬性為一個(gè)元素添加修飾性的內(nèi)容。此元素默認(rèn)為行內(nèi)元素。例如：運(yùn)行以上代碼后，瀏覽器的顯示效果如圖4-19所示。<style>p::before{content:"?";}</style><p>你</p><p>我</p><p>他</p>圖4-19

before偽元素選擇器效果1.3.4偽元素選擇器（2）after。after偽元素選擇器用于創(chuàng)建一個(gè)元素，且該元素將成為已選中元素的最后一個(gè)子元素。1.3

CSS3選擇器5．屬性選擇器在CSS中，我們可以通過屬性選擇器來選中帶有特定屬性的元素。（1）[attribute]選擇器。該選擇器用于選取帶有指定屬性的元素。2.2.3偽類選擇器例如：<style>[title]{font-weight:bolder;font-style:italic;}</style><p>不含[title]屬性</p><ptitle="include">包含[title]屬性</p>運(yùn)行以上代碼后，瀏覽器的顯示效果如圖4-20所示。圖4-20

[attribute]選擇器效果2.2.3偽類選擇器（2）[attribute=value]選擇器。該選擇器用于選取帶有指定屬性和值的元素。例如：<style>a[href=""]{font-weight:bolder;font-style:italic;}</style><ahref="">百度</a><ahref="">新浪</a><ahref="">騰訊</a>2.2.3偽類選擇器運(yùn)行以上代碼后，瀏覽器的顯示效果如圖4-21所示。圖4-21

[attribute=value]選擇器效果2.2.3偽類選擇器（3）[attribute~=value]選擇器。該選擇器用于選取屬性值中包含指定詞匯的元素，如圖4-22所示。例如：<style>p[class~="important"]{font-weight:bolder;font-style:italic;}</style><pclass="importantwarning">Thisisimportant</p><pclass="important">Thisisimportant</p><pclass="warning">Thisisnotimportant</p>圖4-22

[attribute~=value]選擇器效果2.2.3偽類選擇器（4）[attribute|=value]選擇器。該選擇器用于選取帶有以指定值開頭的屬性值的元素，且該值必須是整個(gè)單詞。例如：<style>p[lang|="en"]{font-weight:bolder;font-style:italic;}</style><plang="en">en</p><plang="en-us">en-us</p><plang="cy-en">cy-en</p>圖4-23

[attribute|=value]選擇器效果運(yùn)行以上代碼后，瀏覽器的顯示效果如圖4-23所示。2.2.3偽類選擇器（5）[attribute^=value]選擇器。該選擇器用于匹配屬性值以指定值開頭的每個(gè)元素。例如：<style>p[class^="important"]{font-weight:bolder;font-style:italic;}</style><pclass="importantwarning">Thisisimportant</p><pclass="important">Thisisimportant</p><pclass="warningimportant">Thisisnotimportant</p>2.2.3偽類選擇器運(yùn)行以上代碼后，瀏覽器的顯示效果如圖4-24所示。圖4-24

[attribute^=value]選擇器效果2.2.3偽類選擇器（6）[attribute$=value]選擇器。該選擇器用于匹配屬性值以指定值結(jié)尾的每個(gè)元素。例如：<style>p[class$="important"]{font-weight:bolder;font-style:italic;}</style><pclass="importantwarning">Thisisimportant</p><pclass="important">Thisisimportant</p><pclass="warningimportant">Thisisnotimportant</p>2.2.3偽類選擇器運(yùn)行以上代碼后，瀏覽器的顯示效果如圖4-25所示。圖4-25

[attribute$=value]選擇器效果2.2.3偽類選擇器（7）[attribute*=value]選擇器。該選擇器用于匹配屬性值中包含指定值的每個(gè)元素。例如：<style>p[class*="bo"]{font-weight:bolder;font-style:italic;}</style><pclass="box">box</p><pclass="ball">ball</p><pclass="about">about</p>圖4-26

[attribute*=value]選擇器效果運(yùn)行以上代碼后，瀏覽器的顯示效果如圖4-26所示?！凹尤胛覀儭表撁娴牟季峙c樣式美化任務(wù)1任務(wù)實(shí)施在本任務(wù)中，我們將通過表單元素和更為復(fù)雜的標(biāo)簽選擇器，完成“加入我們”頁面的設(shè)計(jì)，頁面效果如圖4-27所示。圖4-27“加入我們”頁面效果任務(wù)實(shí)施（1）在html文件夾中新建joinUs.html文件，用于設(shè)計(jì)“加入我們”頁面。（2）在joinUs.html文件中輸入“html:5”，完成基礎(chǔ)結(jié)構(gòu)搭建，修改網(wǎng)頁標(biāo)題為“加入我們”,并引入joinUs.css文件。<title>加入我們</title><linkrel="stylesheet"href="../css/joinUs.css">（3）在img文件夾中放置joinUs.png圖片文件，并通過<img>標(biāo)簽將其引入頁面中。<img

src="../img/joinUs.png"width="100%">任務(wù)實(shí)施<formaction="join.php"method="post"><tableclass="joinUsTable"align="center"cellspacing="0"cellpadding="8"><thead></thead><tbody></tbody><tfoot></tfoot></table></form>（5）為<table>表格元素賦予類名“joinUsTable”，并設(shè)置表格居中對齊，單元格間距為0px，表格單元格邊界與單元格內(nèi)容之間的間距為8px。注意：HTML5中不再支持align、cellspacing和cellpadding屬性。在后續(xù)任務(wù)中，我們將使用CSS對其進(jìn)行替換。任務(wù)實(shí)施（6）在joinUs.css文件中設(shè)定“joinUsTable”樣式規(guī)則，美化表格樣式。.joinUsTable{width:800px;border:1pxsolid#dddddd;/*后續(xù)使用margin:auto用來代替align="center"屬性，使表格水平居中;*/}任務(wù)實(shí)施（7）將表格劃分為13行、2列的格式，并對表頭、表格體和表尾的首尾行進(jìn)行跨列合并。在表格中補(bǔ)充信息內(nèi)容，其中帶“*”號的為必填項(xiàng)，可以使用<sup>標(biāo)簽進(jìn)行設(shè)置，如圖4-28所示。任務(wù)實(shí)施（8）根據(jù)圖4-28，設(shè)置表頭、單元格和<sup>標(biāo)簽的樣式，可以通過后代選擇器快速選取標(biāo)簽元素。.joinUsTable

th{height:20px;background:#f0f0f0;font-weight:normal;text-align:left;}.joinUsTabletd{height:46px;color:#363636;}.joinUsTablesup{color:red;}任務(wù)實(shí)施（9）觀察圖4-28可知，表格體的首行內(nèi)容居左對齊，末行內(nèi)容居中對齊，中間部分的第一列文本內(nèi)容居右對齊，第二列表單元素居左對齊?？梢酝ㄟ^結(jié)構(gòu)選擇器進(jìn)行對應(yīng)的樣式設(shè)置。.joinUsTabletbodytrtd:first-child{width:140px;text-align:right;}.joinUsTabletbodytr:first-childtd{color:#f57359;font-size:18px;text-align:left;}.joinUsTabletbodytr:last-childtd{text-align:center;}任務(wù)實(shí)施（10）在表格的前3列表單中，我們需要填寫真實(shí)姓名、手機(jī)號碼和常用郵箱信息，并且這3項(xiàng)為必填項(xiàng)，每一項(xiàng)中均有描述說明，可以按照如下代碼進(jìn)行設(shè)置，效果如圖4-29所示。圖4-29表格前3列表單效果任務(wù)實(shí)施<tr><td>真實(shí)姓名^*:</td><td><inputtype="text"placeholder="請?zhí)顚懩男彰?name="name"required="required"></td></tr><tr><td>手機(jī)號碼^*:</td><td><inputtype="tel"placeholder="請?zhí)顚懩氖謾C(jī)號碼"name="tel"required="required"></td></tr><tr><td>常用郵箱^*:</td><td><inputtype="email"placeholder="請?zhí)顚懩某Ｓ绵]"name="email"required="required"></td></tr>注意：建議input元素都添加name屬性，便于未來與服務(wù)端之間的數(shù)據(jù)交互。任務(wù)實(shí)施.joinUsTableinput[type="text"],.joinUsTableinput[type="tel"],.joinUsTableinput[type="email"]{width:530px;height:30px;border:1pxsolid#cbcbcb;}.joinUsTable

input:focus{outline:none;border:1pxsolid#f57359;}（11）在樣式表中為前3列表單設(shè)置樣式，使其寬度為530px,高度為30px，采用寬度為1px的淺灰色實(shí)線邊框。當(dāng)文本框具有焦點(diǎn)時(shí)，呈現(xiàn)出寬度為1px的橘色實(shí)線邊框。對于多個(gè)表單元素的選取，我們可以通過并集選擇器實(shí)現(xiàn)。任務(wù)實(shí)施此處需要注意border和outline的區(qū)別。

border：元素的邊框。

outline：當(dāng)使用鼠標(biāo)單擊或者使用Tab鍵讓表單元素獲得焦點(diǎn)時(shí)，該表單元素將會被一個(gè)輪廓線框圍繞。這個(gè)輪廓線框就是outline。任務(wù)實(shí)施（12）“面試崗位”表單是一個(gè)下拉列表，存在多個(gè)選項(xiàng)?？梢园凑杖缦麓a進(jìn)行設(shè)置，效果如圖4-30所示。圖4-30“面試崗位”表單效果任務(wù)實(shí)施<tr><td>面試崗位^*:</td><td><inputtype="text"list="jobs"name="jobs"required="required"><datalistid="jobs"><optionvalue="Java工程師"></option><optionvalue="PHP工程師"></option><optionvalue="前端工程師"></option><optionvalue="C/C++工程師"></option><optionvalue="UI設(shè)計(jì)師"></option></datalist></td></tr>任務(wù)實(shí)施（13）下面進(jìn)行“性別”表單的設(shè)計(jì)，這部分的重點(diǎn)在于切換不同的選項(xiàng)標(biāo)簽，用戶頭像能夠隨之切換，效果如圖4-31所示。圖4-31“性別”表單效果任務(wù)實(shí)施<tr><td>性別:</td><td><inputtype="radio"id="man"name="gender"checked><labelfor="man">男</label><inputtype="radio"id="woman"name="gender"><labelfor="woman">女</label><imgwidth="40"src=""></td></tr>由圖4-31可知，“性別”表單中的單選按鈕通過<inputtype="radio">設(shè)計(jì)而成。為了實(shí)現(xiàn)其單選效果，我們需要為其添加屬性值相同的name屬性。同時(shí)使用<label>標(biāo)簽關(guān)聯(lián)input元素，以便用戶通過文字進(jìn)行性別選取。任務(wù)實(shí)施#man:checked~img{content:url(../img/man.png);}#woman:checked~img{content:url(../img/woman.png);}如何通過<inputtype="radio">進(jìn)行用戶頭像切換呢？關(guān)鍵在于使用:checked狀態(tài)偽類選擇器和通用兄弟選擇器。我們可以通過上述選擇器對選中的input元素后的img元素進(jìn)行背景內(nèi)容的更換設(shè)置。content屬性可用于設(shè)置多媒體元素（圖像、聲音、視頻等）的超鏈接地址。任務(wù)實(shí)施<tr><td>工作年限:</td><td><selectname="exp"><optionvalue="fresh">應(yīng)屆生</option><optionvalue="1to3">1-3年</option><optionvalue="3to5">3-5年</option><optionvalue="5to8">5-8年</option><optionvalue="8to10">8-10年</option><optionvalue="10more">10年以上</option></select></td></tr>（14）“工作年限”表單是一個(gè)下拉列表?？梢园凑杖缦麓a進(jìn)行設(shè)置，對列表選項(xiàng)使用option元素，并注意設(shè)置其value屬性值，便于未來與服務(wù)端進(jìn)行數(shù)據(jù)交互，效果如圖4-32所示。圖4-32“工作年限”表單效果任務(wù)實(shí)施（15）通過CSS樣式，設(shè)置select元素邊框?yàn)閷挾葹?px的淺灰色實(shí)線。.joinUsTableselect{border:1pxsolid#cbcbcb;}任務(wù)實(shí)施<tr><td>作品上傳:</td><td><inputtype="file"name="files"multiple></td></tr>（16）“作品上傳”表單可以通過file類型的input元素進(jìn)行設(shè)置，并為其指定multiple屬性，允許上傳多個(gè)文件，如圖4-33所示。圖4-33“作品上傳”表單效果任務(wù)實(shí)施（17）“常用編程語言”表單是一組復(fù)選框，可以通過checkbox類型的input元素進(jìn)行設(shè)置，并使用<label><標(biāo)簽>關(guān)聯(lián)input元素，以便用戶通過文字進(jìn)行常用編程語言的選取，如圖4-34所示。圖4-34“常用編程語言”表單效果任務(wù)實(shí)施<tr><td>常用編程語言:</td><td><labelfor="Java"><inputid="java"value="java"type="checkbox">Java</label><labelfor="PHP"><inputid="php"value="php"type="checkbox">PHP</label><labelfor="JS"><inputid="js"value="js"type="checkbox">JavaScript</label><labelfor="c"><inputid="c"value="c"type="checkbox">C</label><labelfor="c++"><inputid="c++"value="c++"type="checkbox">C++</label><labelfor="others"><inputid="others"value="others"type="checkbox">其他

</label></td></tr>任務(wù)實(shí)施<tr><td>個(gè)人評價(jià)^*:</td><td><textareacols="71"rows="8"name="evaluation"></textarea></td></tr>（18）“個(gè)人評價(jià)”表單是一個(gè)多行文本域，可以通過textarea元素進(jìn)行設(shè)置，并使用row屬性規(guī)定顯示行數(shù)，使用col屬性規(guī)定多行文本域可見寬度，如圖4-35所示。圖4-35“個(gè)人評價(jià)”表單效果任務(wù)實(shí)施.joinUsTable

input:focus,.joinUsTable

textarea:focus{outline:none;border:1pxsolid#f57359;}.joinUsTabletextarea{resize:none;border:1pxsolid#cbcbcb;}（19）通過CSS樣式表禁用多行文本域的拖動縮放功能，并設(shè)置其具有焦點(diǎn)時(shí)的樣式。因?yàn)槠鋼碛薪裹c(diǎn)時(shí)的樣式和單行文本域是相同的，所以我們可以通過并集選擇器進(jìn)行多個(gè)元素的樣式聲明，而不必重復(fù)設(shè)置樣式。任務(wù)實(shí)施<tr><tdcolspan="2"><inputtype="submit"value="確認(rèn)提交"><inputtype="reset"value="重新填寫"></td></tr>（20）表單的提交和重置按鈕可以通過submit類型和reset類型的input元素進(jìn)行設(shè)置，并且可以通過并集選擇器和:hover偽類選擇器設(shè)置按鈕默認(rèn)狀態(tài)和交互狀態(tài)時(shí)的樣式，效果如圖4-36所示。joinUs.html文件：任務(wù)實(shí)施input[type="submit"],input[type="reset"]{background:#f57359;outline:none;border:none;color:white;width:100px;height:38px;}input[type=