項目九 表單控制

09表單控制549任務(wù)1制作列表網(wǎng)頁任務(wù)2制作鼠標指針特效550制作列表網(wǎng)頁任務(wù)1551●掌握元素的顯示與隱藏方法。552一個網(wǎng)頁中通常包含多種內(nèi)容，要在有限的頁面空間里展示這些內(nèi)容，就需要結(jié)合多種技術(shù)來實現(xiàn)。例如，在對頁面進行布局時，為了讓頁面更美觀、布局更合理、功能更強大，加強頁面的視覺效果，可以通過設(shè)置標簽的顯示與隱藏，來選擇讓哪些元素正常顯示，讓哪些元素通過指針觸發(fā)顯示。553554本任務(wù)將通過設(shè)置背景顏色、設(shè)置邊框樣式以及設(shè)置元素顯示與隱藏來制作彩妝產(chǎn)品熱賣列表網(wǎng)頁，網(wǎng)頁效果如圖所示。彩妝產(chǎn)品熱賣列表網(wǎng)頁555步驟一：在body標簽中插入一個大的div盒子，然后在大盒子中插入一個段落標題和一個ul無序列表，彩妝產(chǎn)品熱賣列表的布局主要由這個ul無序列表來實現(xiàn)。具體代碼如圖所示。彩妝產(chǎn)品熱賣列表網(wǎng)頁556彩妝產(chǎn)品熱賣列表網(wǎng)頁557運行上圖中的代碼，部分網(wǎng)頁效果如圖所示。部分初始網(wǎng)頁效果558步驟二：進行樣式設(shè)置。這里需要注意，本任務(wù)采用外部樣式表。首先把網(wǎng)頁中列表的默認樣式清除掉，然后去掉超鏈接a標簽的下畫線，并設(shè)置其包含文字的顏色。具體CSS設(shè)置代碼如圖所示。用CSS設(shè)置基本樣式的代碼559設(shè)置完畢，運行代碼，網(wǎng)頁效果如圖所示。部分網(wǎng)頁效果1560步驟三：設(shè)置網(wǎng)頁文本的字體和網(wǎng)頁元素的背景顏色，CSS代碼如圖所示。設(shè)置背景色561設(shè)置背景色562設(shè)置完畢，運行代碼，效果如圖所示。部分網(wǎng)頁效果2563步驟四：為每個產(chǎn)品設(shè)置下邊框虛線，將產(chǎn)品與產(chǎn)品間隔開，同時設(shè)置每個產(chǎn)品圖片默認為隱藏狀態(tài)，隱藏狀態(tài)使用“display:none;”來實現(xiàn)。具體CSS代碼如圖所示。用CSS設(shè)置下邊框虛線屬性的代碼564設(shè)置完畢，運行代碼，效果如圖所示。設(shè)置下邊框虛線屬性后的網(wǎng)頁效果565步驟五：使用“a:hover”偽類做兩處設(shè)置，一處為當鼠標光標懸停在列表項時文字顏色變?yōu)榧t色，另一處為當鼠標光標懸停在列表項時將序號圖片變?yōu)榧t顏色序號圖片，具體CSS代碼設(shè)置如圖所示。用CSS設(shè)置偽類的代碼566設(shè)置完畢，運行代碼，效果如圖所示。設(shè)置偽類后的網(wǎng)頁效果567步驟六：利用“a:hover”偽類來實現(xiàn)當鼠標光標懸停在列表項時產(chǎn)品圖片變?yōu)轱@示狀態(tài)。具體CSS代碼如圖所示。用CSS設(shè)置產(chǎn)品圖片狀態(tài)的代碼568在前面的項目中已經(jīng)介紹過display的轉(zhuǎn)換屬性，可以使用display屬性讓元素變?yōu)樾袃?nèi)元素、塊元素或行內(nèi)塊元素。下面將介紹display的顯示與隱藏屬性，即讓一個元素在頁面中消失或者顯示，類似于廣告網(wǎng)站，當鼠標光標在圖片或文字上面移動時，通過display的顯示與隱藏屬性，來展示對當前內(nèi)容更加細致的描述；而當鼠標光標移走后，這些內(nèi)容就隱藏不見了。再比如某些下拉菜單，其在正常情況下是不顯示的，只有當鼠標光標經(jīng)過時，才會顯示下拉菜單。569display有關(guān)顯示與隱藏的屬性值及其含義見表。display有關(guān)顯示與隱藏的屬性值及其含義570下面通過一個案例來學(xué)習(xí)未使用元素的隱藏與顯示的情況，代碼如圖所示。未使用元素的隱藏與顯示的代碼應(yīng)用571這時div標簽的內(nèi)容顯示在瀏覽器上。如果不想讓div標簽的內(nèi)容顯示出來，可以使用“display:none;”將它隱藏，代碼如圖所示。使用display的隱藏屬性隱藏div標簽的內(nèi)容572保存html文件，運行效果如圖所示。這時可以發(fā)現(xiàn)瀏覽器是空白的，沒有任何顯示，通過使用display的隱藏屬性，隱藏了div標簽的內(nèi)容。同理，如果想顯示div標簽的內(nèi)容，可以使用“display:block;”將div標簽內(nèi)容顯示出來。大家可以自己動手操作一下。div標簽的內(nèi)容被隱藏制作鼠標指針特效任務(wù)2

573●掌握用CSS設(shè)置鼠標指針效果。574讀者在瀏覽網(wǎng)頁時看到的鼠標指針會有不同的形狀，如箭頭、手形和Ⅰ字形等，而在Windows環(huán)境下看到的鼠標指針種類要比這個多很多。CSS彌補了html語言在這方面的不足，通過cursor屬性可以設(shè)置各式各樣的鼠標指針樣式。用CSS設(shè)置鼠標指針樣式主要是通過cursor屬性來實現(xiàn)的。該屬性可以在任何標簽里使用，從而能夠改變各種網(wǎng)頁元素的鼠標指針效果。本任務(wù)主要使用cursor屬性中的pointer值來改變鼠標指針顯示樣式、用ul列表進行布局來制作繽購樂食電子商務(wù)網(wǎng)站購物車網(wǎng)頁，最終網(wǎng)頁效果如圖所示。575576繽購樂食電子商務(wù)網(wǎng)站購物車網(wǎng)頁577步驟一：整理好繽購樂食電子商務(wù)網(wǎng)站購物車網(wǎng)頁的公共部分，此時的頁底由1000像素縮小至860像素，其目的是配合購物車的寬度，效果如圖所示。購物車頁面公共部分578制作商品信息標題欄，具體html代碼如圖所示。用html制作商品信息標題欄的代碼579用CSS設(shè)置商品信息標題欄樣式的代碼，如圖所示。用CSS設(shè)置商品信息標題欄樣式的代碼580步驟二：制作頁面優(yōu)惠信息欄，具體html代碼如圖所示。用html制作頁面優(yōu)惠信息欄的代碼581用CSS設(shè)置頁面優(yōu)惠信息欄樣式的代碼，如圖所示。用CSS設(shè)置頁面優(yōu)惠信息欄樣式的代碼582步驟三：制作一行商品購物信息，具體html代碼如圖所示。用html制作一行商品購物信息的代碼583用html制作一行商品購物信息的代碼584用html制作一行商品購物信息的代碼585用html制作一行商品購物信息的代碼586用CSS設(shè)置一行商品購物信息樣式的代碼，如圖所示。用CSS設(shè)置一行商品購物信息樣式的代碼587用CSS設(shè)置一行商品購物信息樣式的代碼588用CSS設(shè)置一行商品購物信息樣式的代碼589用CSS設(shè)置一行商品購物信息樣式的代碼590用CSS設(shè)置一行商品購物信息樣式的代碼591運行代碼，效果如圖所示。制作完一行商品購物信息的網(wǎng)頁效果592步驟四：通過復(fù)制、粘貼再設(shè)計一行優(yōu)惠信息和兩行商品購物信息，這樣購物車場景看起來更加真實。效果如圖所示。制作完多行商品購物信息的網(wǎng)頁效果593步驟五：制作全選與結(jié)算欄，具體html代碼如圖所示。用html制作全選與結(jié)算欄的代碼594用html制作全選與結(jié)算欄的代碼595用CSS設(shè)置全選與結(jié)算欄樣式的代碼，如圖所示。用CSS設(shè)置全選與結(jié)算欄樣式的代碼596用CSS設(shè)置全選與結(jié)算欄樣式的代碼597用CSS設(shè)置全選與結(jié)算欄樣式的代碼598用CSS控制鼠標指針特效主要是通過cursor屬性來實現(xiàn)的，該屬性可以在任何標簽里使用，從而可改變各種頁面元素的鼠標指針效果。下面通過一個案例來具體演示cursor屬性的使用，如圖所示。cursor屬性的使用代碼599