信息錄入：深圳博盈網(wǎng)絡技術        錄入時間：2011-08-11        瀏覽次數(shù)： 次

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