第10章設置列表樣式

1、列表讓設計者能夠?qū)ο嚓P的元素進行分組，并由此給他們制定結構。大多數(shù)網(wǎng)站都包含某種形式的列表，比如新聞列表、標題列表等等。將這些條目標識為列表并加上標記會在HTML文檔中增加結構。本章主要講解如何通過CSS樣式對網(wǎng)頁中的列表進行控制，并且通過兩個影視音樂網(wǎng)站的實例，詳細講解了頁面中對列表樣式的應用。在網(wǎng)頁中列表元素是非常重要的應用形式。通過CSS樣式控制列表，可以輕松的實現(xiàn)整齊直觀的顯示效果。10.1.1 列表控制原則列表形式在網(wǎng)站設計中占有很大比重，在信息的顯示時非常整齊直觀便于用戶理解與點擊，從出現(xiàn)網(wǎng)頁開始到現(xiàn)在，列表元素一直是頁面中非常重要的應用形式。10.1.2 列表標簽的使用無序列表無

2、序列表所謂無序列表，是指列表中的各個元素在邏輯上沒有先后順序的列表形式。如果列表中不需要描述一條信息的序號，則可以使用ul元素。大部分頁面中的作息均可以用ul來描述。ul與li標簽配合使用，其中的每一個標簽均為一條列表，所有l(wèi)i標簽將被包含在ul標簽中。序列表序列表 有序列表則與上面講的無序列表相反，表示列表的每一個元素都會有序列區(qū)分，從上至下可以為數(shù)字、字母等多種不同形式。使用ol的有序列表目前在網(wǎng)上出現(xiàn)得并不是很多，原因就在于很少有人使用ol標簽來制作列表。多數(shù)人使用表格來制作有序列表，這樣將會造成代碼過于復雜。與控制背景一樣，列表元素也提供了與圖像、定位類似的標準的屬性，雖然看似不多，但

3、對頁面設計卻帶來了意想不到的改觀。使用CSS布局之后，最大的改變就是對相同的設計在不同的技術環(huán)境下?lián)碛械男碌乃悸放c做法，列表元素也是如此。10.2.1 ul無序列表10.2.2 ol有序列表10.2.3 定義列表10.2.4 更改列表項目樣式當項目列表的項目符號可以通過設置list-style-type屬性值為none時，制作各式各樣的菜單和導航條成了項目列表的最大用處之一，通過CSS屬性控制可以達到意想不到的效果，本節(jié)將向讀者介紹如何使用列表標簽制作實用的風頁導航菜單。10.3.1 無需表格的菜單10.3.2 菜單的橫豎轉(zhuǎn)換導航菜單在瀏覽器中預覽導航菜單效果在CSS3.0中新增加了4種對網(wǎng)頁

4、中其他模塊進行控制的屬性，分別是media、font-face、columns和speech,下面就分別對這4種新增的控制其他模塊的屬性進行簡單的介紹。10.4.1 media10.4.2 font-face 10.4.3 columns10.4.4 speech10.4.5 使用CSS3.0實現(xiàn)選項卡式新聞塊本實例制作一個游戲類網(wǎng)站頁面，在頁面中多處應用了列表，所以列表的排版是否合理，直接會影響到頁面的整體整體性和美觀性，同時也會直接影響到瀏覽者對網(wǎng)站的第一印象。本節(jié)將通過實例的制作來講解如何創(chuàng)建列表。10.5.1 設計分析10.5.2 制作步驟源文件位置：光盤/視頻/第8章/10-5-2.

5、swf視頻位置：光盤/素材/第8章/10-5-2.html通過本章的學習，我們掌握了設置列表的樣式，在網(wǎng)頁設計和制作中可以不再使用單一的列表樣式。10.6.1 問題1網(wǎng)頁中文本分行與分段有什么區(qū)別遇到文本末尾的地方，Dreamweaver會自動進行分行操作，然而在某些情況下，我們需要進行強迫分行，將某些文本放到下一行去，此時在操作上讀者可以有兩種選擇：按鍵盤上的Enter鍵（為段落標簽），在代碼視圖中顯示為標簽。也可以按快捷鍵Shift+Enter（為換行符也被稱為強迫分行），在代碼視圖中顯示為，可以使文本落到下一行去，在這種情況下被分行的文本仍然在同一段落中。10.6.2 問題2如何不通過CSS樣式更改項目列表前的符號效果在設計視圖中選中已有列表的其中一項，執(zhí)行“格式列表屬性”命令，彈出“列表屬性”對話框，在“列表類型”下拉列表中選擇“項目列表”選項，此時“列表屬性”對話框上除“列表類型”下拉列表框外，只有“樣式”下拉列表框和“新建樣式”下拉列表框可用，在“樣式”下拉列表中共有3個選項，分別為“默認”、“項目符號”和“正方形”，它們用來設置項目列表里每行開頭的列表標志。本章向讀者講述了如何設置列表樣式，