資源簡介

(共53張PPT)
09表單控制任務(wù) 1 制作列表網(wǎng)頁任務(wù) 2 制作鼠標(biāo)指針特效制作列表網(wǎng)頁任務(wù) 1● 掌握元素的顯示與隱藏方法。一個(gè)網(wǎng)頁中通常包含多種內(nèi)容，要在有限的頁面空間里展示這些內(nèi)容，就需要結(jié)合多種技術(shù)來實(shí)現(xiàn)。例如，在對(duì)頁面進(jìn)行布局時(shí)，為了讓頁面更美觀、布局更合理、功能更強(qiáng)大，加強(qiáng)頁面的視覺效果，可以通過設(shè)置標(biāo)簽的顯示與隱藏，來選擇讓哪些元素正常顯示，讓哪些元素通過指針觸發(fā)顯示。本任務(wù)將通過設(shè)置背景顏色、設(shè)置邊框樣式以及設(shè)置元素顯示與隱藏來制作彩妝產(chǎn)品熱賣列表網(wǎng)頁，網(wǎng)頁效果如圖所示。彩妝產(chǎn)品熱賣列表網(wǎng)頁步驟一：在 body 標(biāo)簽中插入一個(gè)大的 div 盒子，然后在大盒子中插入一個(gè)段落標(biāo)題和一個(gè) ul 無序列表，彩妝產(chǎn)品熱賣列表的布局主要由這個(gè) ul 無序列表來實(shí)現(xiàn)。具體代碼如圖所示。彩妝產(chǎn)品熱賣列表網(wǎng)頁彩妝產(chǎn)品熱賣列表網(wǎng)頁運(yùn)行上圖中的代碼，部分網(wǎng)頁效果如圖所示。部分初始網(wǎng)頁效果步驟二：進(jìn)行樣式設(shè)置。這里需要注意，本任務(wù)采用外部樣式表。首先把網(wǎng)頁中列表的默認(rèn)樣式清除掉，然后去掉超鏈接 a 標(biāo)簽的下畫線，并設(shè)置其包含文字的顏色。具體 CSS 設(shè)置代碼如圖所示。用 CSS 設(shè)置基本樣式的代碼設(shè)置完畢，運(yùn)行代碼，網(wǎng)頁效果如圖所示。部分網(wǎng)頁效果 1步驟三：設(shè)置網(wǎng)頁文本的字體和網(wǎng)頁元素的背景顏色，CSS 代碼如圖所示。設(shè)置背景色設(shè)置背景色設(shè)置完畢，運(yùn)行代碼，效果如圖所示。部分網(wǎng)頁效果 2步驟四：為每個(gè)產(chǎn)品設(shè)置下邊框虛線，將產(chǎn)品與產(chǎn)品間隔開，同時(shí)設(shè)置每個(gè)產(chǎn)品圖片默認(rèn)為隱藏狀態(tài)，隱藏狀態(tài)使用“display:none;”來實(shí)現(xiàn)。具體 CSS 代碼如圖所示。用 CSS 設(shè)置下邊框虛線屬性的代碼設(shè)置完畢，運(yùn)行代碼，效果如圖所示。設(shè)置下邊框虛線屬性后的網(wǎng)頁效果步驟五：使用“ a:hover”偽類做兩處設(shè)置，一處為當(dāng)鼠標(biāo)光標(biāo)懸停在列表項(xiàng)時(shí)文字顏色變?yōu)榧t色，另一處為當(dāng)鼠標(biāo)光標(biāo)懸停在列表項(xiàng)時(shí)將序號(hào)圖片變?yōu)榧t顏色序號(hào)圖片，具體 CSS 代碼設(shè)置如圖所示。用 CSS 設(shè)置偽類的代碼設(shè)置完畢，運(yùn)行代碼，效果如圖所示。設(shè)置偽類后的網(wǎng)頁效果步驟六：利用“ a:hover”偽類來實(shí)現(xiàn)當(dāng)鼠標(biāo)光標(biāo)懸停在列表項(xiàng)時(shí)產(chǎn)品圖片變?yōu)轱@示狀態(tài)。具體CSS 代碼如圖所示。用 CSS 設(shè)置產(chǎn)品圖片狀態(tài)的代碼在前面的項(xiàng)目中已經(jīng)介紹過 display 的轉(zhuǎn)換屬性，可以使用 display 屬性讓元素變?yōu)樾袃?nèi)元素、塊元素或行內(nèi)塊元素。下面將介紹 display 的顯示與隱藏屬性，即讓一個(gè)元素在頁面中消失或者顯示，類似于廣告網(wǎng)站，當(dāng)鼠標(biāo)光標(biāo)在圖片或文字上面移動(dòng)時(shí)，通過 display 的顯示與隱藏屬性，來展示對(duì)當(dāng)前內(nèi)容更加細(xì)致的描述；而當(dāng)鼠標(biāo)光標(biāo)移走后，這些內(nèi)容就隱藏不見了。再比如某些下拉菜單，其在正常情況下是不顯示的，只有當(dāng)鼠標(biāo)光標(biāo)經(jīng)過時(shí)，才會(huì)顯示下拉菜單。display 有關(guān)顯示與隱藏的屬性值及其含義見表。display 有關(guān)顯示與隱藏的屬性值及其含義下面通過一個(gè)案例來學(xué)習(xí)未使用元素的隱藏與顯示的情況，代碼如圖所示。未使用元素的隱藏與顯示的代碼應(yīng)用這時(shí) div 標(biāo)簽的內(nèi)容顯示在瀏覽器上。如果不想讓 div 標(biāo)簽的內(nèi)容顯示出來，可以使用“display:none;”將它隱藏，代碼如圖所示。使用 display 的隱藏屬性隱藏 div 標(biāo)簽的內(nèi)容保存 html 文件，運(yùn)行效果如圖所示。這時(shí)可以發(fā)現(xiàn)瀏覽器是空白的，沒有任何顯示，通過使用 display 的隱藏屬性，隱藏了div 標(biāo)簽的內(nèi)容。同理，如果想顯示 div 標(biāo)簽的內(nèi)容，可以使用“ display:block;”將 div 標(biāo)簽內(nèi)容顯示出來。大家可以自己動(dòng)手操作一下。div 標(biāo)簽的內(nèi)容被隱藏制作鼠標(biāo)指針特效任務(wù)2● 掌握用 CSS 設(shè)置鼠標(biāo)指針效果。讀者在瀏覽網(wǎng)頁時(shí)看到的鼠標(biāo)指針會(huì)有不同的形狀，如箭頭、手形和Ⅰ字形等，而在Windows 環(huán)境下看到的鼠標(biāo)指針種類要比這個(gè)多很多。CSS 彌補(bǔ)了 html 語言在這方面的不足，通過 cursor 屬性可以設(shè)置各式各樣的鼠標(biāo)指針樣式。用 CSS 設(shè)置鼠標(biāo)指針樣式主要是通過 cursor 屬性來實(shí)現(xiàn)的。該屬性可以在任何標(biāo)簽里使用，從而能夠改變各種網(wǎng)頁元素的鼠標(biāo)指針效果。本任務(wù)主要使用 cursor 屬性中的 pointer值來改變鼠標(biāo)指針顯示樣式、用 ul 列表進(jìn)行布局來制作繽購樂食電子商務(wù)網(wǎng)站購物車網(wǎng)頁，最終網(wǎng)頁效果如圖所示。繽購樂食電子商務(wù)網(wǎng)站購物車網(wǎng)頁步驟一：整理好繽購樂食電子商務(wù)網(wǎng)站購物車網(wǎng)頁的公共部分，此時(shí)的頁底由 1 000 像素縮小至860 像素，其目的是配合購物車的寬度，效果如圖所示。購物車頁面公共部分制作商品信息標(biāo)題欄，具體 html 代碼如圖所示。用 html 制作商品信息標(biāo)題欄的代碼用 CSS 設(shè)置商品信息標(biāo)題欄樣式的代碼，如圖所示。用 CSS 設(shè)置商品信息標(biāo)題欄樣式的代碼步驟二：制作頁面優(yōu)惠信息欄，具體 html 代碼如圖所示。用 html 制作頁面優(yōu)惠信息欄的代碼用 CSS 設(shè)置頁面優(yōu)惠信息欄樣式的代碼，如圖所示。用 CSS 設(shè)置頁面優(yōu)惠信息欄樣式的代碼步驟三：制作一行商品購物信息，具體 html 代碼如圖所示。用 html 制作一行商品購物信息的代碼用 html 制作一行商品購物信息的代碼用 html 制作一行商品購物信息的代碼用 html 制作一行商品購物信息的代碼用 CSS 設(shè)置一行商品購物信息樣式的代碼，如圖所示。用 CSS 設(shè)置一行商品購物信息樣式的代碼用 CSS 設(shè)置一行商品購物信息樣式的代碼用 CSS 設(shè)置一行商品購物信息樣式的代碼用 CSS 設(shè)置一行商品購物信息樣式的代碼用 CSS 設(shè)置一行商品購物信息樣式的代碼運(yùn)行代碼，效果如圖所示。制作完一行商品購物信息的網(wǎng)頁效果步驟四：通過復(fù)制、粘貼再設(shè)計(jì)一行優(yōu)惠信息和兩行商品購物信息，這樣購物車場景看起來更加真實(shí)。效果如圖所示。制作完多行商品購物信息的網(wǎng)頁效果步驟五：制作全選與結(jié)算欄，具體 html 代碼如圖所示。用 html 制作全選與結(jié)算欄的代碼用 html 制作全選與結(jié)算欄的代碼用 CSS 設(shè)置全選與結(jié)算欄樣式的代碼，如圖所示。用 CSS 設(shè)置全選與結(jié)算欄樣式的代碼用 CSS 設(shè)置全選與結(jié)算欄樣式的代碼用 CSS 設(shè)置全選與結(jié)算欄樣式的代碼用 CSS 控制鼠標(biāo)指針特效主要是通過 cursor 屬性來實(shí)現(xiàn)的，該屬性可以在任何標(biāo)簽里使用，從而可改變各種頁面元素的鼠標(biāo)指針效果。下面通過一個(gè)案例來具體演示 cursor 屬性的使用，如圖所示。cursor 屬性的使用代碼cursor 屬性的使用代碼cursor 效果運(yùn)行上圖中的代碼，效果如圖所示。cursor 屬性的鼠標(biāo)指針效果在上面的 CSS 代碼中，由于給 span 標(biāo)簽設(shè)置了 cursor 屬性，因此，當(dāng)光標(biāo)位于內(nèi)容處時(shí)，顯示為所定義的鼠標(biāo)指針形狀。cursor 屬性有很多預(yù)設(shè)的鼠標(biāo)指針效果，見表。

展開更多......

收起↑