《網(wǎng)頁設(shè)計》課件-5.2任務(wù)一 制作商品列表索引導(dǎo)航

SAMPLE項目五使用CSS控制列表樣式任務(wù)描述——商品列表索引導(dǎo)航結(jié)構(gòu)分析1技術(shù)引進(jìn)——有序列表和無序列表2新手試煉——制作個人作品網(wǎng)站頁面345.2任務(wù)一制作商品列表索引導(dǎo)航任務(wù)實施——制作商品列表索引1任務(wù)描述——商品列表索引導(dǎo)航結(jié)構(gòu)分析ABOUTME

商品列表索引導(dǎo)航中依次插入7個“DIV”，并使用id樣式和類樣式分別控制頁面中的div和列表，實現(xiàn)橫向?qū)Ш降捻撁嫘ЧO(shè)置完的頁面布局如圖所示。2技術(shù)引進(jìn)——有序列表和無序列表ABOUTME

CSS通過與HTML的文檔結(jié)構(gòu)相對應(yīng)的選擇符來達(dá)到控制頁面表現(xiàn)的目的，在CSS樣式的應(yīng)用過程中，還需要注意CSS樣式的特殊性。特殊性規(guī)定了不同的CSS規(guī)則的權(quán)重，當(dāng)多個規(guī)則都應(yīng)用在同意元素時，權(quán)重越高的CSS樣式會被優(yōu)先采用，例如下面的CSS樣式設(shè)置。

那么<p>標(biāo)簽中的文字顏色究竟應(yīng)該是什么顏色？根據(jù)規(guī)范，標(biāo)簽選擇符（例如<p>）具有特殊性1，而類選擇符具有特殊性10，id選擇符具有特殊性100.因此，此例中p中的顏色應(yīng)該為紅色。而繼承的屬性，具有特殊性0，因此后面任何的定義都會覆蓋掉元素繼承來的樣式。特殊性還可以疊加，例如下面的CSS樣式設(shè)置。ABOUTME1.無序列表<ul>在CSS中，可以通過list-style-type屬性對無序列表前面的符號進(jìn)行控制，list-style-type屬性的語法格式如下：表所示的是在無序列表中l(wèi)ist-style-type屬性包含的各個參數(shù)值的含義。ABOUTME01執(zhí)行“文件>打開”命令，打開頁面“光盤\源文件\項目五\5.1.html”，頁面效果如圖所示。輸入段落文字，如圖所示。練一練——制作新聞欄目ABOUTME02選中頁面中所有的段落文字，單擊“屬性”面板上的“項目列表”按鈕，如圖所示，為文字創(chuàng)建項目列表。在源代碼視圖可以看到代碼的效果，如圖所示。練一練——制作新聞欄目ABOUTME03頁面效果如圖所示。切換到該文件所鏈接的外部CSS樣式表5-1.css文件中，創(chuàng)建一個名為#newsli的CSS規(guī)則，如圖所示。練一練——制作新聞欄目頁面預(yù)覽效果ABOUTME04頁面中的項目列表效果如圖所示。執(zhí)行“文件>保存”菜單命令保存頁面文件。按F12鍵即可在瀏覽器中預(yù)覽該頁面，效果如圖所示。練一練——制作新聞欄目頁面預(yù)覽效果ABOUTME2.有序列表<ol>有序列表與無序列表相反，有序列表可以創(chuàng)建具有先后順序的列表，比如在每條信息前加上序號1、2、3、……等。在CSS中，與無序列表一樣，可以通過list-style-type屬性對有序列表進(jìn)行控制，只是屬性值不同而已。list-style-type屬性的語法格式如下：表所示的是在有序列表中l(wèi)ist-style-type屬性中包含的各個參數(shù)值的含義。ABOUTME01執(zhí)行“文件>打開”菜單命令，打開頁面“光盤\源文件\項目五\5.2.html”，頁面效果如圖所示。輸入如圖所示段落文字。練一練——制作音樂排行列表ABOUTME02選中頁面中的文字，單擊“屬性”面板上的“編號列表”按鈕，如圖所示。在源代碼中可以看到代碼的效果如圖所示。練一練——制作音樂排行列表ABOUTME03頁面中有序列表的效果如圖所示。切換到該文件所鏈接的外部CSS樣式表5-2.css文件中，創(chuàng)建一個名為#boxli的CSS規(guī)則，如圖所示。練一練——制作音樂排行列表ABOUTME04頁面的效果如圖所示。執(zhí)行“文件>保存”命令保存頁面文件。按F12鍵即可在瀏覽器中預(yù)覽該頁面，效果如圖所示。練一練——制作音樂排行列表頁面預(yù)覽效果3任務(wù)實施——制作商品列表索引ABOUTME01新建一個Html文件，使用項目四的制作方法制作頁面導(dǎo)航，完成效果如圖所示。在video1.css中創(chuàng)建如圖所示通配符樣式，定義頁面邊界和填充。效果圖ABOUTME02在top-bg后面插入一個id為opt的div，并在video1.css中創(chuàng)建如圖所示樣式。在opt內(nèi)分別插入id為opt-left和opt-right的div，源代碼如圖所示ABOUTME03并在video1.css中創(chuàng)建如圖所示類樣式。并在源代碼中將新建類樣式指定給對應(yīng)的div對象，如圖所示。ABOUTME04在源代碼中修改div中的文字，并未opt-right中的文字添加列表標(biāo)簽，完成效果如圖所示。ABOUTME05在video1.css中創(chuàng)建如圖所示樣式。頁面效果如圖所示。樣式圖效果圖ABOUTME06在video1.css中創(chuàng)建如圖所示類樣式，并將其應(yīng)用到源代碼中，如圖所示。頁面效果如圖所示。樣式圖源代碼圖效果圖ABOUTME07繼續(xù)使用相同的方法，制作頁面中其他索引內(nèi)容，執(zhí)行“文件>保存”命令，將文件保存，完成頁面效果如圖所示。效果圖4新手試煉——制作個人作品網(wǎng)站頁面ABOUTME

當(dāng)給<ul>標(biāo)簽或者<ol>標(biāo)簽設(shè)置list-style-type屬性時，那么標(biāo)簽中的所有<li>標(biāo)簽都將應(yīng)用該設(shè)置。如果想要<li>標(biāo)簽具有單獨(dú)的樣式，則可以對<li>標(biāo)記單獨(dú)設(shè)置list-style-type屬性值，那么該樣式只會對該條項目起作用。PPT模板下載：/moban/行業(yè)PPT模板：/hangye/節(jié)日PPT模板：/jieri/PPT素材下載：/sucai/PPT背景圖片：/beijing/PPT圖表下載：/tubiao/優(yōu)秀PPT下載：/xiazai/PPT教程：/powerpoint/Word教程：/word/Excel教程：/excel/資料下載：/ziliao