今天我們來看看網(wǎng)站設(shè)計步驟中列表的基本設(shè)計。列表的應(yīng)用是很廣泛的，可以說大多數(shù)的網(wǎng)站中都有列表，只是表達(dá)的方式有些不一樣。
　最常用的一種列表的表達(dá)方式就是導(dǎo)航，可以說每個網(wǎng)站中都是具有導(dǎo)航的，而且一個好的導(dǎo)航列表可以給網(wǎng)站增添不少的色彩。
　現(xiàn)在我們就來看看一個簡單的列表是如何產(chǎn)生的吧，首先先新建一個頁面，然后插入一個ID為menu的div，然后在設(shè)計視圖中選中文字，點(diǎn)擊工具欄的ul圖標(biāo)，也即是會自動插入ul和li，然后修改文字內(nèi)容為你需要的內(nèi)容。做好這些以后，你在瀏覽器中會發(fā)現(xiàn)在內(nèi)容的周圍的空隙會很大，而且每一行的前端都是由一個點(diǎn)，這就是標(biāo)簽的默認(rèn)樣式造成的。
　顯然這樣的效果我們是很不滿意的，那么我就需要調(diào)整它的效果。首先要在視圖中，選中我們要編輯的內(nèi)容，在點(diǎn)擊下端的ul新建CSS的規(guī)則，在其中就可以定義一下我們創(chuàng)建的列表的方框與列表屬性。接下來就要調(diào)整一下列表的全局，也就是文字設(shè)計、字體大小，間距等。在CSS樣式面板中點(diǎn)擊新建，在彈出的窗口中選擇標(biāo)簽，名稱選擇body，在這里就可以調(diào)整內(nèi)容的樣式了。如果想要調(diào)整列表的邊框及背景，那么給li定義一下CSS規(guī)則就可以了，做法同上。
　接下來就是把這個列表中的內(nèi)容，加上鏈接。這個就不多說，大家都知道。同時定義a的狀態(tài)和鼠標(biāo)劃過的狀態(tài)。在CSS中創(chuàng)建一個a規(guī)則，并調(diào)整當(dāng)鼠標(biāo)劃過鏈接文字時的顏色。在這里就要涉及到偽類，在這里直接調(diào)用就好。
　對于CSS的初學(xué)者，大多數(shù)人都不知道使用子選擇器，這樣會影響效率。這是后就可以使用派生選擇器，就可以減少qomotech.cn大量的class的定義。這個代碼如下：
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; }
　#menu ul和#menu ul li即為派生選擇器，如果我們把前邊的#menu去掉，那么將是對ul標(biāo)簽重定義，重定義的屬性將應(yīng)用到全局，而前邊加上#menu后，將是定義ID為menu元素內(nèi)ul的樣式，設(shè)置它的樣式只對#menu下的ul生效，不對它之后的ul生效，這個有點(diǎn)像編程中的局部變量，而直接定義ul則相當(dāng)qomotech.cn于全局變量。#menu ul li 是定義ID為menu元素內(nèi)ul下的li，派生選擇器可以使我們不用再給每個li定義一個樣式名來定義樣式，只需使用派生選擇器，從它的父元素處選擇即可，這樣能大大提高效率。