第9章 設(shè)計(jì)列表樣式

第9章設(shè)計(jì)列表樣式掌握設(shè)計(jì)列表掌握定義列表樣式學(xué)習(xí)目標(biāo)0102理解列表布局03本章任務(wù)任務(wù)1：設(shè)計(jì)列表任務(wù)2：定義列表樣式任務(wù)3：案例實(shí)戰(zhàn)——列表布局導(dǎo)航菜單任務(wù)1設(shè)計(jì)列表任務(wù)描述本案例是一個常見的菜單導(dǎo)航，由兩個無序列表嵌套顯示。通過鼠標(biāo)浮動效果，可以把隱藏的二級菜單顯示出來。圖10-1-1：列表嵌套導(dǎo)航任務(wù)實(shí)現(xiàn)任務(wù)分析設(shè)計(jì)一個父級元素，寬度為100%，高度為55px。定義一個無序列表，并且在里面嵌套<a>標(biāo)簽，設(shè)計(jì)<a>標(biāo)簽的樣式，使文字居中顯示。在<li>中間嵌套一個無序列表，可以設(shè)置其初始狀態(tài)為隱藏，當(dāng)鼠標(biāo)經(jīng)過其父級<li>時(shí)設(shè)置顯示。掌握無序列表的基本使用方法，列表嵌套使用方法以及列表與鼠標(biāo)浮動事件相結(jié)合任務(wù)實(shí)現(xiàn)1.基本語法

無序列表（ul）無序列表是網(wǎng)頁中最常用的列表，之所以稱為“無序列表”，是因?yàn)槠涓鱾€列表項(xiàng)之間沒有順序級別之分，通常是并列的。有序列表（ul）有序列表即為有排列順序的列表，其各個列表項(xiàng)按照一定的順序排列。定義列表（ul）定義列表常用于對術(shù)語或名詞進(jìn)行解釋和描述，與無序和有序列表不同，定義列表的列表項(xiàng)前沒有任何項(xiàng)目符號?；A(chǔ)案例操作——無序列表1.無序列表無序列表是一個項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈進(jìn)行標(biāo)記）無序列表始于<ul>標(biāo)簽。布局代碼如下：<ul><li>Coffee</li><li>Milk</li></ul>在上面的語法中，用<ul>標(biāo)簽定義無序列表，使用<li>標(biāo)簽定義具體的列表項(xiàng)，<li>標(biāo)簽嵌套在<ul>標(biāo)簽內(nèi)。<ul>,<li>標(biāo)簽都是成對出現(xiàn)的。無序列表可以分為一級無序列表和多級無序列表，一級無序列表在瀏覽器中解析后，會在列表<li>標(biāo)簽前面添加一個小黑點(diǎn)的修飾符，而多級無序列表則會根據(jù)級數(shù)而改變列表前面的修飾符?？偨Y(jié)【案例1】基本無序列表基礎(chǔ)案例操作——無序列表無序列表在嵌套結(jié)構(gòu)中隨著其包含的列表級數(shù)的增加而逐漸縮進(jìn)，并且隨著列表級數(shù)的增加而改變不同的修飾符。合理地使用HTML標(biāo)簽?zāi)茏岉撁娴慕Y(jié)構(gòu)更加清晰，相對更符合語義?？偨Y(jié)【案例2】層嵌套的多級列表結(jié)構(gòu)，在無修飾情況下瀏覽器默認(rèn)解析時(shí)現(xiàn)實(shí)效果如下：<ul><li>一級列表項(xiàng)目1<ul><li>二級列表項(xiàng)目1</li><li>二級列表項(xiàng)目2<!--二級列表嵌套--><ul><li>三級列表項(xiàng)目1</li><li>三級列表項(xiàng)目2</li></ul></li></ul></li><li>一級列表項(xiàng)目2</li></ul>布局代碼基礎(chǔ)案例操作——有序列表2.有序列表有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記，有序列表始于<ol>標(biāo)簽。每個列表項(xiàng)始于<li>標(biāo)簽。布局代碼如下：<ol><li>Coffee</li><li>Milk</li></ol>【案例1】基本有序列表基礎(chǔ)案例操作——無序列表3.定義列表自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。自定義列表以<dl>標(biāo)簽開始。每個自定義列表項(xiàng)以<dt>開始。每個自定義列表項(xiàng)的定義以<dd>開始。布局代碼如下：<dl><dt>Coffee</dt><dd>Blackhotdrink</dd><dt>Milk</dt><dd>Whitecolddrink</dd></dl>（1）<dl>標(biāo)簽必須與<dt>標(biāo)簽相鄰，<dd>標(biāo)簽需要相對于一個<dt>標(biāo)簽（2）<dl>、<dt>和<dd>3個標(biāo)簽之間不允許出現(xiàn)第四者（3）標(biāo)簽必須成對出現(xiàn)，嵌套要合理注意【案例1】基本定義列表任務(wù)實(shí)現(xiàn)布局代碼樣式代碼任務(wù)描述任務(wù)分析任務(wù)2定義列表樣式任務(wù)描述本案例是模仿微信官網(wǎng)的導(dǎo)航，主要用到了滑動門技術(shù)。這在網(wǎng)頁布局中十分常用，能夠使背景自適應(yīng)文本的長度，從而減少代碼量的編寫，優(yōu)化代碼結(jié)構(gòu)。圖10-2-1：仿微信導(dǎo)航任務(wù)實(shí)現(xiàn)任務(wù)分析1.設(shè)計(jì)一個整體的父級元素，寬度為968px，高度為75px。并讓其居中顯示。2.觀察案例的布局，本案例可分為左邊“微信”圖片部分和右邊菜單導(dǎo)航兩部分。3.左邊“微信”圖片部分可以用<a>標(biāo)簽進(jìn)行定義，通過將其轉(zhuǎn)換為行內(nèi)塊元素，設(shè)置其寬高，并設(shè)置其背景圖片。4.右邊的導(dǎo)航菜單采用無序列表布局，里面嵌套<a>標(biāo)簽和<span>標(biāo)簽分別控制滑動門中圓角的左邊和圓角的右邊。5.通過背景圖片定位的方法，切換背景圖的顯示。當(dāng)鼠標(biāo)經(jīng)過時(shí)，改變背景圖定位，從而達(dá)到背景圖切換效果。通過本案例學(xué)會滑動門技術(shù)的應(yīng)用，更加熟練地掌握列表布局任務(wù)實(shí)現(xiàn)基本語法list-style-type屬性值描述None無標(biāo)記Disc默認(rèn)。標(biāo)記是實(shí)心圓。circle標(biāo)記是空心圓。square標(biāo)記是實(shí)心方塊。decimal標(biāo)記是數(shù)字。decimal-leading-zero0開頭的數(shù)字標(biāo)記。(01,02,03,等)基本語法list-style-type屬性lower-roman小寫羅馬數(shù)字(i,ii,iii,iv,v,等)upper-roman大寫羅馬數(shù)字(I,II,III,IV,V,等)lower-alpha小寫英文字母Themarkerislower-alpha(a,b,c,d,e,等)upper-alpha大寫英文字母Themarkerisupper-alpha(A,B,C,D,E,等)lower-greek小寫希臘字母(alpha,beta,gamma,等)lower-latin小寫拉丁字母(a,b,c,d,e,等)upper-latin大寫拉丁字母(A,B,C,D,E,等)基礎(chǔ)案例操作1.定義列表類型【案例】設(shè)計(jì)項(xiàng)目符號不同的表布局代碼如下：<ol><litype="1"value="1">魔獸世界</li><!--阿拉伯?dāng)?shù)字排序--><litype="a">夢幻西游</li><!--英文字母排序--><litype="I">誅仙2</li><!--羅馬數(shù)字排序--></ol>基礎(chǔ)案例操作

2.用背景圖模擬項(xiàng)目符號先隱藏列表結(jié)構(gòu)的默認(rèn)項(xiàng)目符號。方法是設(shè)置list-style-type:none。為列表項(xiàng)定義背景圖像，指定要顯示的項(xiàng)目符號，利用背景圖精確定位技術(shù)控制其顯示位置。同時(shí)增加列表項(xiàng)左側(cè)空白，避免背景圖被列表文本遮蓋?；A(chǔ)案例操作【案例】背景圖像定義項(xiàng)目符號樣式代碼如下：body{background:rgb(79,115,235);}li{list-style:none;list-style-image:url(img/2.gif);width:100px;height:30px;}/*用背景圖模擬項(xiàng)目符號*/布局代碼如下：<ul><li>新聞</li><li>社區(qū)</li><li>微博</li><li>微信</li></ul>基礎(chǔ)案例操作3.列表布局列表結(jié)構(gòu)默認(rèn)顯示為堆疊樣式，并以縮進(jìn)板式進(jìn)行顯示。但在一般網(wǎng)頁中我們所看到的導(dǎo)航、菜單、列表等欄目會呈現(xiàn)多種版式，如水平布局、垂直布局，或水平與垂直混排布局等?；A(chǔ)案例操作（1）定義列表堆疊列表在默認(rèn)狀態(tài)下會以垂直布局形式顯示，這是一種符合瀏覽習(xí)慣的布局效果，在新聞列表、分類列表等列表頁或欄目比較常見。基礎(chǔ)案例操作【案例】列表結(jié)構(gòu)垂直布局的基本形式。布局代碼如下：<!--設(shè)置無序列表--><p>網(wǎng)站分類</p><ul><li>軟件工程</li><li>編程語言</li><li>軟件設(shè)計(jì)</li><li>web前端</li><li>手機(jī)開發(fā)</li><li>所有隨筆</li></ul>樣式代碼如下：*{margin:0;padding:0;}li{list-style:none;width:150px;height:30px;border:1pxsolid#ccc;text-align:center;line-height:30px;background:rgb(248,248,232);}p{font-size:24px;margin:10px;}基礎(chǔ)案例操作（2）定義水平布局水平布局能夠控制列表結(jié)構(gòu)在有限的行內(nèi)顯示，從而節(jié)省頁面空間，這種布局方式多見于導(dǎo)航菜單、詞條列表中。把大量的列表項(xiàng)目收縮在一行或幾行內(nèi)顯示，更方便瀏覽。用行內(nèi)顯示設(shè)計(jì)水平布局。一般是定義列表項(xiàng)目為行內(nèi)顯示，設(shè)計(jì)所有列表項(xiàng)目在同一行內(nèi)顯示。用浮動顯示設(shè)計(jì)水平布局。一般定義列表項(xiàng)目浮動顯示。水平布局的設(shè)計(jì)技巧基礎(chǔ)案例操作【案例】列表水平布局的基本形式布局代碼如下：<divclass="contain"><p>網(wǎng)站分類</p><ul><li>軟件工程</li><li>編程語言</li><li>軟件設(shè)計(jì)</li><li>web前端</li><li>手機(jī)開發(fā)</li><li>所有隨筆</li></ul></div>樣式代碼如下：*{margin:0;padding:0;}.contain{margin:20px;}p{font-family:"blackadderitc";font-size:24px;}li{list-style:none;float:left;padding:10px;border:1pxsolid#ccc;color:#fff;background:#000;}任務(wù)實(shí)現(xiàn)布局代碼樣式代碼任務(wù)描述任務(wù)分析任務(wù)3案例實(shí)戰(zhàn)——列表布局

導(dǎo)航菜單任務(wù)描述本案例是一個常見的導(dǎo)航布局。通過一個無序列表，定義導(dǎo)航的基本樣式，把導(dǎo)航的內(nèi)容部分先設(shè)置隱藏，當(dāng)鼠標(biāo)經(jīng)過的時(shí)候設(shè)置為顯示狀態(tài),通過圖片上小箭頭的指示，顯示內(nèi)容圖片的父級元素。圖10-3-1：列表布局導(dǎo)航菜單任務(wù)分析1.設(shè)計(jì)一個父元素，寬度為994px，高度為52px，設(shè)置為居中顯示。2.用無序列表設(shè)計(jì)導(dǎo)航菜單的導(dǎo)航內(nèi)容，文字用<a>標(biāo)簽進(jìn)行包裹。3.定義內(nèi)容部分，先設(shè)置為隱藏，當(dāng)鼠標(biāo)經(jīng)