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

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

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

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

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

當(dāng)給<ul>標(biāo)簽或者<ol>標(biāo)簽設(shè)置list-style-type屬性時(shí)，那么標(biāo)簽中的所有<li>標(biāo)簽都將應(yīng)用該設(shè)置。如果想要<li>標(biāo)簽具有單獨(dú)的樣式，則可以對(duì)<li>標(biāo)記單獨(dú)設(shè)置list-style-type屬性值，那么該樣式只會(huì)對(duì)該條項(xiàng)目起作用。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