資源簡介

(共41張PPT)
06頁面導航任務 1 制作網站導航列表任務 2 制作網站主導航欄制作網站導航列表任務 1● 熟練掌握超鏈接偽類的使用技巧。本任務使用列表標簽、超鏈接標簽及浮動樣式完成網站導航列表的布局，使用超鏈接偽類實現光標懸停在網站導航項時的變化效果，實現網站導航列表效果如圖所示。網站導航列表效果步驟一：導航列表代碼步驟二：根據對目標效果的分析，去掉列表原有默認樣式，同時把列表項設置為向左浮動，使其橫向排列，樣式代碼如圖所示。樣式代碼運行效果如圖所示。圖已初步完成導航列表的布局，但是超鏈接 a 標簽所自帶的樣式需要改變。這里需要應用超鏈接偽類，在 CSS 中可以用 a 選擇器來設置 a 標簽的常態樣式。當鼠標光標懸停在 a 標簽上時使用“a:hover”偽類選擇器來設置此時的樣式。浮動后效果步驟三：將 a 標簽常態背景色設置為藍色，當鼠標光標懸停在其上時將背景色設置為紅色。樣式代碼超鏈接偽類并不是真正意義上的類。它的名稱是由系統定義的，通常由標簽名、類名或id 名加上冒號“:”構成。超鏈接 a 標簽的偽類有四種，具體見表。超鏈接 a 標簽的偽類及含義上表中列出了超鏈接 a 標簽的四種偽類，分別用于定義訪問前、訪問后、鼠標光標懸停時及用鼠標單擊不放開時。在實際編寫代碼時，通常只使用“ a:link”“ a:visited”和“ a:hover”定義訪問前、訪問后和鼠標光標懸停時的樣式，且通常對“ a:link”和“ a:visited”應用相同的樣式，使得訪問前和訪問后的超鏈接標簽樣式保持一致。制作網站主導航欄任務2● 掌握浮動屬性的相關設置。本任務使用浮動屬性制作繽購樂食電子商務網站主導航欄，效果如圖所示。繽購樂食電子商務網站主導航欄效果步驟一：在 body 標簽中創建一個頂部盒子 div，命名為“ index-header”。然后在頂端盒子里面創建兩個子盒子 div，一個命名為“ header-left”，另一個命名為“ header-right”。最后分別為它們加入相應的文字內容，代碼如圖所示。創建頂部盒子代碼創建頂部盒子代碼步驟二：使用 CSS 代碼設置頂部盒子樣式。要注意的是，要讓某標簽中的內容水平居中，一般使用“text-align：center;”來實現。要讓某標簽中的內容垂直居中，一般通過設置高度 height的值與行高 line-height 的值相同來實現，CSS 代碼如圖所示。設置頂部盒子樣式代碼設置頂部盒子樣式代碼設置頂部盒子樣式代碼步驟三：接下來制作搜索框圖片部分。先將整個懸浮搜索框命名為“ index-search”，搜索框左邊放置一張 logo 圖片，實現方式為：創建一個 div 盒子，命名為“ index-logo”，里面包含一個img 標簽，把事先準備好的 logo 圖片通過 src 屬性導入。代碼如圖所示。放置 logo 代碼步驟四：使用 CSS 代碼設置 logo 樣式，整個搜索框區域的寬度仍然是 1 000 像素，高度設置為90 像素，將裝 logo 圖片的盒子寬度設置為 200 像素，高度設置為 90 像素，距離左側外邊距50 像素。CSS 代碼如圖所示。設置 logo 樣式代碼設置 logo 樣式代碼運行上圖中的代碼，效果如圖所示。設置 logo 效果圖步驟五：在懸浮搜索框“ index-search”里創建包含搜索框和按鈕的盒子，命名為“ search-bar”，在盒子里面套一個 form 表單。form 表單中包含兩個 input 表單控件，一個作為文本搜索框，另一個作為按鈕。input 標簽里面的 placeholder 屬性是用來設置提示語的，可以將提示語設置為 placeholder 的屬性值，具體代碼如圖所示。創建包含搜索框和按鈕的盒子代碼步驟六：接下來制作主導航欄，設置主導航欄大盒子 div 的名稱為“ index-nav”。它里面包含一個大盒子 div 和一個子 ul 無序列表，主導航欄的布局主要由 ul 無序列表來實現。html 代碼如圖所示。創建主導航欄盒子創建主導航欄盒子步驟七：用 CSS 代碼設置主導航欄樣式。“ index-nav”寬度還是設置為 1 000 像素，高度為 45像素，“全部分類”寬度設置為 150 像素。因為位于最左側的“首頁”的左邊沒有豎線，所以把除“首頁”外的 li 列表項都設置了一個相同的類名“ qc”，以方便統一設置豎線分隔線，豎線使用“ ::before”偽類來實現，優點是無須在 html 中增加任何附加標簽。設置主導航欄樣式代碼設置主導航欄樣式代碼在 CSS 中，通過 oat 屬性來定義浮動。所謂元素的浮動是指設置了浮動屬性的元素會脫離標準文檔流的控制，移動到其父元素中的指定位置。其基本語法格式如下。常用 oat 屬性值的含義如下。left：對象居左浮動，文本流向對象的右側。right：對象居右浮動，文本流向對象的左側。none：對象不浮動，該值為默認值。浮動代碼下面通過一個案例來學習 oat 屬性的用法，代碼如圖所示。浮動代碼在上圖中，分別為三個 div 盒子設置了不同的寬、高和背景顏色。運行上圖中的代碼，效果如圖所示。圖所示為未添加浮動屬性前的布局樣式，三個盒子依次由上到下排列，符合標準文檔流的布局效果。接下來修改第一個盒子的浮動屬性值，為其設置左浮動樣式，具體代碼如下。浮動的應用第一個盒子浮動效果保存 html 文件后，刷新頁面，第一個盒子浮動效果如圖所示。從上圖中可以看出，由于為第一個盒子設置了左浮動樣式，所以其脫離了標準文檔流，其后的元素會自動向上浮動，直到上邊緣與父元素頂部重合。接下來，修改第二個盒子的浮動屬性值，為其添加左浮動樣式。具體代碼如下。第二個盒子浮動效果保存 html 文件后，刷新頁面，第二個盒子浮動效果如圖所示。從中可以看出，第二個浮動的盒子排列到了第一個盒子的右側，與第一個盒子在同一行顯示，且都脫離了標準文檔流。此時第三個盒子自動向上浮動，直到上邊緣與父元素頂部重合。第三個盒子浮動效果接下來修改第三個盒子的浮動屬性值，為其添加左浮動樣式，具體代碼如下。保存 html 文件后，刷新頁面，第三個盒子浮動效果如圖所示。在圖中，三個盒子最終在同一行顯示，且依次從左向右排列，均脫離了標準文檔流從上到下的排列方式。

展開更多......

收起↑