項目六 頁面導(dǎo)航

06頁面導(dǎo)航348任務(wù)1制作網(wǎng)站導(dǎo)航列表任務(wù)2制作網(wǎng)站主導(dǎo)航欄349制作網(wǎng)站導(dǎo)航列表任務(wù)1350●熟練掌握超鏈接偽類的使用技巧。351本任務(wù)使用列表標(biāo)簽、超鏈接標(biāo)簽及浮動樣式完成網(wǎng)站導(dǎo)航列表的布局，使用超鏈接偽類實現(xiàn)光標(biāo)懸停在網(wǎng)站導(dǎo)航項時的變化效果，實現(xiàn)網(wǎng)站導(dǎo)航列表效果如圖所示。352網(wǎng)站導(dǎo)航列表效果353步驟一：定義一個<ul></ul>無序列表，并使其包含四個<li></li>列表項，同時每個列表項中包含一對超鏈接<a></a>。在大多數(shù)網(wǎng)頁中，導(dǎo)航列表的導(dǎo)航項都具有跳轉(zhuǎn)到其他網(wǎng)頁的功能，所以導(dǎo)航列表要使用超鏈接a標(biāo)簽完成，導(dǎo)航列表代碼如圖所示。354導(dǎo)航列表代碼355步驟二：根據(jù)對目標(biāo)效果的分析，去掉列表原有默認(rèn)樣式，同時把列表項設(shè)置為向左浮動，使其橫向排列，樣式代碼如圖所示。樣式代碼356運行效果如圖所示。圖已初步完成導(dǎo)航列表的布局，但是超鏈接a標(biāo)簽所自帶的樣式需要改變。這里需要應(yīng)用超鏈接偽類，在CSS中可以用a選擇器來設(shè)置a標(biāo)簽的常態(tài)樣式。當(dāng)鼠標(biāo)光標(biāo)懸停在a標(biāo)簽上時使用“a:hover”偽類選擇器來設(shè)置此時的樣式。浮動后效果357步驟三：將a標(biāo)簽常態(tài)背景色設(shè)置為藍(lán)色，當(dāng)鼠標(biāo)光標(biāo)懸停在其上時將背景色設(shè)置為紅色。樣式代碼358超鏈接偽類并不是真正意義上的類。它的名稱是由系統(tǒng)定義的，通常由標(biāo)簽名、類名或id名加上冒號“:”構(gòu)成。超鏈接a標(biāo)簽的偽類有四種，具體見表。超鏈接a標(biāo)簽的偽類及含義359上表中列出了超鏈接a標(biāo)簽的四種偽類，分別用于定義訪問前、訪問后、鼠標(biāo)光標(biāo)懸停時及用鼠標(biāo)單擊不放開時。在實際編寫代碼時，通常只使用“a:link”“a:visited”和“a:hover”定義訪問前、訪問后和鼠標(biāo)光標(biāo)懸停時的樣式，且通常對“a:link”和“a:visited”應(yīng)用相同的樣式，使得訪問前和訪問后的超鏈接標(biāo)簽樣式保持一致。制作網(wǎng)站主導(dǎo)航欄任務(wù)2

360●掌握浮動屬性的相關(guān)設(shè)置。361本任務(wù)使用浮動屬性制作繽購樂食電子商務(wù)網(wǎng)站主導(dǎo)航欄，效果如圖所示。362繽購樂食電子商務(wù)網(wǎng)站主導(dǎo)航欄效果363步驟一：在body標(biāo)簽中創(chuàng)建一個頂部盒子div，命名為“index-header”。然后在頂端盒子里面創(chuàng)建兩個子盒子div，一個命名為“header-left”，另一個命名為“header-right”。最后分別為它們加入相應(yīng)的文字內(nèi)容，代碼如圖所示。創(chuàng)建頂部盒子代碼364創(chuàng)建頂部盒子代碼365步驟二：使用CSS代碼設(shè)置頂部盒子樣式。要注意的是，要讓某標(biāo)簽中的內(nèi)容水平居中，一般使用“text-align：center;”來實現(xiàn)。要讓某標(biāo)簽中的內(nèi)容垂直居中，一般通過設(shè)置高度height的值與行高line-height的值相同來實現(xiàn)，CSS代碼如圖所示。366設(shè)置頂部盒子樣式代碼367設(shè)置頂部盒子樣式代碼368設(shè)置頂部盒子樣式代碼369步驟三：接下來制作搜索框圖片部分。先將整個懸浮搜索框命名為“index-search”，搜索框左邊放置一張logo圖片，實現(xiàn)方式為：創(chuàng)建一個div盒子，命名為“index-logo”，里面包含一個img標(biāo)簽，把事先準(zhǔn)備好的logo圖片通過src屬性導(dǎo)入。代碼如圖所示。放置logo代碼370步驟四：使用CSS代碼設(shè)置logo樣式，整個搜索框區(qū)域的寬度仍然是1000像素，高度設(shè)置為90像素，將裝logo圖片的盒子寬度設(shè)置為200像素，高度設(shè)置為90像素，距離左側(cè)外邊距50像素。CSS代碼如圖所示。371設(shè)置logo樣式代碼372設(shè)置logo樣式代碼373運行上圖中的代碼，效果如圖所示。設(shè)置logo效果圖374步驟五：在懸浮搜索框“index-search”里創(chuàng)建包含搜索框和按鈕的盒子，命名為“search-bar”，在盒子里面套一個form表單。form表單中包含兩個input表單控件，一個作為文本搜索框，另一個作為按鈕。input標(biāo)簽里面的placeholder屬性是用來設(shè)置提示語的，可以將提示語設(shè)置為placeholder的屬性值，具體代碼如圖所示。創(chuàng)建包含搜索框和按鈕的盒子代碼375步驟六：接下來制作主導(dǎo)航欄，設(shè)置主導(dǎo)航欄大盒子div的名稱為“index-nav”。它里面包含一個大盒子div和一個子ul無序列表，主導(dǎo)航欄的布局主要由ul無序列表來實現(xiàn)。html代碼如圖所示。創(chuàng)建主導(dǎo)航欄盒子376創(chuàng)建主導(dǎo)航欄盒子377步驟七：用CSS代碼設(shè)置主導(dǎo)航欄樣式?！癷ndex-nav”寬度還是設(shè)置為1000像素，高度為45像素，“全部分類”寬度設(shè)置為150像素。因為位于最左側(cè)的“首頁”的左邊沒有豎線，所以把除“首頁”外的li列表項都設(shè)置了一個相同的類名“qc”，以方便統(tǒng)一設(shè)置豎線分隔線，豎線使用“::before”偽類來實現(xiàn)，優(yōu)點是無須在html中增加任何附加標(biāo)簽。378設(shè)置主導(dǎo)航欄樣式代碼379設(shè)置主導(dǎo)航欄樣式代碼380在CSS中，通過?oat屬性來定義浮動。所謂元素的浮動是指設(shè)置了浮動屬性的元素會脫離標(biāo)準(zhǔn)文檔流的控制，移動到其父元素中的指定位置。其基本語法格式如下。常用?oat屬性值的含義如下。left：對象居左浮動，文本流向?qū)ο蟮挠覀?cè)。right：對象居右浮動，文本流向?qū)ο蟮淖髠?cè)。none：對象不浮動，該值為默認(rèn)值。381浮動代碼下面通過一個案例來學(xué)習(xí)?oat屬性的用法，代碼如圖所示。382浮動代碼383在上圖中，分別為三個div盒子設(shè)置了不同的寬、高和背景顏色。運行上圖中的代碼，效果如圖所示。圖所示為未添加浮動屬性前的布局樣式，三個盒子依次由上到下排列，符合標(biāo)準(zhǔn)文檔流的布局效果。接下來修改第一個盒子的浮動屬性值，為其設(shè)置左浮動樣式，具體代碼如下。384浮動的應(yīng)用385第一個盒子浮動效果保存html文件后，刷新頁面，第一個盒子浮動效果如圖所示。386從上圖中可以看出，由于為第一個盒子設(shè)置了左浮動樣式，所以其脫離了標(biāo)準(zhǔn)文檔流，其后的元素會自動向上浮動，直到上邊緣與父元素頂部重合。接下來，修改第二個盒子的浮動屬性值，為其添加左浮動樣式。具體代碼如下。387第二個盒子浮動效果保存html文件后，刷新頁面，第二個盒子浮動效果如圖所示。從中可以看出，第二個浮動的盒子排列到了第一個盒子的右側(cè)，與第一個盒子在同一行顯示，且都脫離了標(biāo)準(zhǔn)文檔流。此時第三個盒子自