第10章設(shè)置列表樣式

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

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

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

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

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