HTML+CSS+JavaScript

網(wǎng)頁制作機械工業(yè)出版社同名教材配套電子教案7.1案例：網(wǎng)絡(luò)花店友情鏈接局部頁面——設(shè)置鏈接樣式7.2案例：網(wǎng)絡(luò)花店鮮花展示頁面——設(shè)置列表樣式7.3案例：網(wǎng)絡(luò)花店鮮花分類導(dǎo)航菜單——設(shè)置縱向?qū)Ш讲藛?.4案例：網(wǎng)絡(luò)花店主導(dǎo)航菜單——設(shè)置橫向?qū)Ш讲藛?.5實訓(xùn)：網(wǎng)絡(luò)花店商務(wù)安全中心頁面第7章鏈接與導(dǎo)航設(shè)計【案例展示】使用CSS設(shè)置鏈接樣式的基本知識制作網(wǎng)絡(luò)花店友情鏈接局部頁面，本例文件7-1.html在瀏覽器中的瀏覽效果如圖7-1所示。7.1案例：網(wǎng)絡(luò)花店友情鏈接局部頁面

7.1.1設(shè)置文字鏈接偽類中通過:link、:visited、:hover和:active來控制鏈接內(nèi)容訪問前、訪問后、鼠標(biāo)懸停時以及用戶激活時的樣式。需要說明的是，這4種狀態(tài)的順序不能顛倒，否則可能會導(dǎo)致偽類樣式不能實現(xiàn)。【演示7-1-1】改變文字鏈接的外觀。7.1案例：網(wǎng)絡(luò)花店友情鏈接局部頁面

7.1.2設(shè)置圖文鏈接網(wǎng)頁設(shè)計中對文字鏈接的修飾不僅限于增加邊框、修改背景顏色等方式，還可以利用背景圖片將文字鏈接進(jìn)一步的美化?！狙菔?-1-3】設(shè)置圖文鏈接。

7.1案例：網(wǎng)絡(luò)花店友情鏈接局部頁面

【案例展示】使用CSS設(shè)置列表樣式的基本知識制作網(wǎng)絡(luò)花店鮮花展示頁面，本例文件7-2.html在瀏覽器中的瀏覽效果如圖7-5所示。7.2案例：網(wǎng)絡(luò)花店鮮花展示頁面——設(shè)置列表樣式

7.2.1表格布局與列表布局的對比

1．表格布局

2．列表布局使用列表布局來實現(xiàn)新聞列表，不僅結(jié)構(gòu)清晰，而且代碼數(shù)量明顯減少，如圖7-7所示。7.2案例：網(wǎng)絡(luò)花店鮮花展示頁面——設(shè)置列表樣式

7.2.2設(shè)置列表類型通常的項目列表主要采用<ul>或<ol>標(biāo)簽，然后配合<li>標(biāo)簽羅列各個項目。在CSS樣式中，列表項的標(biāo)志類型是通過屬性list-style-type來修改的，無論是<ul>標(biāo)記還是<ol>標(biāo)記，都可以使用相同的屬性值，而且效果是完全相同的?！狙菔?-2-1】設(shè)置列表類型

。

7.2案例：網(wǎng)絡(luò)花店鮮花展示頁面——設(shè)置列表樣式7.2.3設(shè)置列表項圖片符號

list-style-image屬性主要使用圖像來替換列表項的標(biāo)記，當(dāng)list-style-image屬性的屬性值為none或者設(shè)置的圖片路徑出錯時，list-style-type屬性會替代list-style-image屬性對列表產(chǎn)生作用?！狙菔?-2-3】設(shè)置列表項圖片符號

。

7.2案例：網(wǎng)絡(luò)花店鮮花展示頁面——設(shè)置列表樣式7.2.4設(shè)置列表項位置

list-style-position屬性用于設(shè)置在何處放置列表項標(biāo)記，其屬性值只有兩個關(guān)鍵詞outside（外部）和inside（內(nèi)部）?！狙菔?-2-4】設(shè)置列表項位置。

7.2案例：網(wǎng)絡(luò)花店鮮花展示頁面——設(shè)置列表樣式【案例展示】使用CSS設(shè)置縱向?qū)Ш讲藛蔚幕局R制作網(wǎng)絡(luò)花店鮮花分類導(dǎo)航菜單，本例文件7-3.html在瀏覽器中的瀏覽效果如圖7-17所示。7.3案例：網(wǎng)絡(luò)花店鮮花分類導(dǎo)航菜單

7.3.1普通的超鏈接導(dǎo)航菜單普通的鏈接導(dǎo)航菜單的制作比較簡單，主要采用將文字鏈接從“行級元素”變?yōu)椤皦K級元素”的方法來實現(xiàn)?！狙菔?-3-1】制作鏈接導(dǎo)航菜單

。

7.3案例：網(wǎng)絡(luò)花店鮮花分類導(dǎo)航菜單

7.3.2縱向列表模式的導(dǎo)航菜單

由于縱向?qū)Ш讲藛蔚膬?nèi)容并沒有邏輯上的先后順序，因此可以使用無序列表制作縱向?qū)Ш讲藛??！狙菔?-3-2】制作縱向列表模式的導(dǎo)航菜單

。

7.3案例：網(wǎng)絡(luò)花店鮮花分類導(dǎo)航菜單

【案例展示】使用CSS設(shè)置橫向?qū)Ш讲藛蔚幕局R制作網(wǎng)絡(luò)花店主導(dǎo)航菜單，本例文件7-4.html在瀏覽器中的瀏覽效果如圖7-27所示。7.4案例：網(wǎng)絡(luò)花店主導(dǎo)航菜單

導(dǎo)航菜單不只有縱向排列的形式，許多時候還需要頁面的菜單能夠在水平方向顯示。通過CSS屬性的控制，可以實現(xiàn)列表模式導(dǎo)航菜單的橫豎轉(zhuǎn)換。在保持原有HTML結(jié)構(gòu)不變的情況下，將縱向?qū)Ш睫D(zhuǎn)變成橫向?qū)Ш阶钪匾沫h(huán)節(jié)就是設(shè)置<li>標(biāo)簽為浮動?！狙菔?-4-1】制作橫向列表模式的導(dǎo)航菜單

。

7.4案例：網(wǎng)絡(luò)花店主導(dǎo)航菜單

【實訓(xùn)展示】制作網(wǎng)絡(luò)花店商務(wù)安全中心頁面，本例文件safe.html在瀏覽器中的瀏覽效果如圖7-33所示，頁面局部布局示意圖如圖7-34所示。7.5實訓(xùn)：網(wǎng)絡(luò)花店商務(wù)安全中心頁面

制作過程如下：①頁面布局規(guī)劃。頁面布局的首要任務(wù)是弄清網(wǎng)頁的布局方式，分析版式結(jié)構(gòu)。從頁面布局示意圖可以看出，頁面中的主要內(nèi)容包括頂部的網(wǎng)站標(biāo)識及導(dǎo)航菜單、左側(cè)的網(wǎng)購標(biāo)準(zhǔn)及新聞列表、右側(cè)的主體內(nèi)容及底部的版權(quán)信息。②建立目錄結(jié)構(gòu)。在實訓(xùn)文件夾下創(chuàng)建文件夾images和css，分別用來存放圖像素材和外部樣式表文件。③準(zhǔn)備素材。將本頁面需要使用的圖像素材存放在文件夾images下。7.5實訓(xùn)：網(wǎng)絡(luò)花店商務(wù)安全中心頁面

制作過程如下：④外部樣式表。在文件夾css下新建一個名為style.css的樣式表文件。⑤網(wǎng)頁結(jié)構(gòu)文件。在當(dāng)前文件夾中，用記事本新建一