設(shè)計(jì)網(wǎng)頁(yè)中的列表信息

  • 2019-08-29 09:50:49
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來(lái)源:http://m.supportcoffeeroasters.com

在現(xiàn)實(shí)生活中每個(gè)人都會(huì)接觸到各式各樣的列表信息,去超市購(gòu)物前會(huì)羅列一張購(gòu)物清單,購(gòu)物完畢結(jié)賬時(shí)需要排隊(duì)等候,結(jié)賬完畢會(huì)收到結(jié)賬清單。諸如此類的情況出現(xiàn),我們都可以將其視為列表。購(gòu)物清單是列表,排隊(duì)等候的人群是列表,結(jié)賬清單還是列表,如此之多的列表出現(xiàn)在大家的身邊,你是否注意到了呢。

網(wǎng)絡(luò)生活近似于現(xiàn)實(shí)生活,在現(xiàn)實(shí)生活中隨處可見(jiàn)的列表,在網(wǎng)頁(yè)中也是可以看到的。例如,當(dāng)我們?cè)诰W(wǎng)絡(luò)中購(gòu)物時(shí),會(huì)選擇很多東西放入購(gòu)物車中,那么在購(gòu)物車中看到的物品列表;網(wǎng)購(gòu)?fù)戤吀顿~后看到的購(gòu)物清單列表等。

網(wǎng)頁(yè)中的列表并非都是顯而易見(jiàn)的,例如,網(wǎng)站的導(dǎo)航其實(shí)也是列表,用戶在某個(gè)站點(diǎn)中排名也是列表。這么多的列表是不是讓你感覺(jué)有點(diǎn)暈眩了?不用擔(dān)心,在分析各個(gè)列表在網(wǎng)站建設(shè)時(shí)如何運(yùn)用之前,先了解一下HTML中的3種列表模式:無(wú)序列表(ul)、有序列表(ol)和自定義列表(dl)。

無(wú)序列表

無(wú)序列表就是沒(méi)有次序的列表,列表項(xiàng)目不分先后。以生活中去超市購(gòu)物為例,不會(huì)考慮先買什么再買什么,而是看到所需物品就直接放到購(gòu)物車中。<ul>標(biāo)簽表示無(wú)序列表的集合,并且<ul>標(biāo)簽中一定是緊跟<li>標(biāo)簽才是正確的寫法。

<ul>    

<li>無(wú)序列表中的其中一條內(nèi)容</li>    

<li>無(wú)序列表中的其中一條內(nèi)容</li>

</ul>

HTML對(duì)標(biāo)簽有著相對(duì)嚴(yán)格的要求,每個(gè)標(biāo)簽都必須關(guān)閉,而且每個(gè)標(biāo)簽之間的嵌套要正確,尤其是列表的結(jié)構(gòu)。下面羅列幾種在HTML中無(wú)序列表的錯(cuò)誤嵌套方法。   

?錯(cuò)誤一:<ul>標(biāo)簽和<li>標(biāo)簽之間插入了其他的標(biāo)簽。

<ul>    

<li>無(wú)序列表中的其中一條內(nèi)容</li>    

<li>無(wú)序列表中的其中一條內(nèi)容</li>    

<div>錯(cuò)誤的無(wú)序列表嵌套結(jié)構(gòu)</div>

</ul>   

?錯(cuò)誤二:多層<ul>標(biāo)簽嵌套時(shí)的錯(cuò)誤。

<ul>    

<li>錯(cuò)誤的無(wú)序列表嵌套結(jié)構(gòu)</li>    

<ul>        

<li>錯(cuò)誤的無(wú)序列表嵌套結(jié)構(gòu)</li>    

</ul>

</ul>

 ?錯(cuò)誤三:<li>標(biāo)簽未關(guān)閉。

<ul>    

<li>錯(cuò)誤的無(wú)序列表嵌套結(jié)構(gòu)        

<ul>            

<li>錯(cuò)誤的無(wú)序列表嵌套結(jié)構(gòu)</li>        

</ul>    

<li>錯(cuò)誤的無(wú)序列表嵌套結(jié)構(gòu)</li>

</ul>

以上幾種錯(cuò)誤的寫法糾正后,應(yīng)該以如下形式書寫。   

?錯(cuò)誤一的糾正,將<div>標(biāo)簽放到<ul>標(biāo)簽的外面,或者刪除。

<ul>    

<li>無(wú)序列表中的其中一條內(nèi)容</li>    

<li>無(wú)序列表中的其中一條內(nèi)容</li>

</ul>

<div>將該標(biāo)簽內(nèi)容移出<ul>標(biāo)簽的嵌套,或者刪除</div>

 ?錯(cuò)誤二的糾正,多層ul無(wú)序列表標(biāo)簽嵌套時(shí),應(yīng)該將<ul>標(biāo)簽放在<li>標(biāo)簽之間。

<ul>    

<li>多層<ul>標(biāo)簽嵌套時(shí)        

<ul>            

<li><ul>標(biāo)簽應(yīng)該放在<li>標(biāo)簽之間</li>        

</ul>    

</li>

</ul>   

?錯(cuò)誤三的糾正,關(guān)閉<li>標(biāo)簽即可。

<ul>    

<li>將<li>標(biāo)簽關(guān)閉即可        

<ul>            

<li>將<li>標(biāo)簽關(guān)閉即可</li>        

</ul>    

</li>    

<li>將<li>標(biāo)簽關(guān)閉即可</li>

</ul>

網(wǎng)頁(yè)設(shè)計(jì)中,無(wú)序列表可以分為一級(jí)無(wú)序列表和多級(jí)無(wú)序列表,一級(jí)無(wú)序列表在瀏覽器中解析后,會(huì)在列表<li>標(biāo)簽前面添加一個(gè)小黑點(diǎn)的修飾符,而多級(jí)無(wú)序列表則會(huì)根據(jù)級(jí)數(shù)而改變列表前面的修飾符。

一級(jí)無(wú)序列表,在無(wú)任何樣式修飾的瀏覽器默認(rèn)解析時(shí)顯示效果。

<ul>    

<li>一級(jí)無(wú)序列表的瀏覽器默認(rèn)解析后的頁(yè)面效果</li>    

<li>一級(jí)無(wú)序列表的瀏覽器默認(rèn)解析后的頁(yè)面效果</li>

</ul>

多級(jí)無(wú)序列表,在無(wú)任何樣式修飾的瀏覽器默認(rèn)解析時(shí)顯示效果。

<pre class="duokan-codeblock-interactive duokan-code"><ul>    

<li>多級(jí)無(wú)序列表的瀏覽器默認(rèn)解析后的頁(yè)面效果1 

<ul>            

<li>多級(jí)無(wú)序列表的瀏覽器默認(rèn)解析后的頁(yè)面效果2</li>            

<li>多級(jí)無(wú)序列表的瀏覽器默認(rèn)解析后的頁(yè)面效果2</li>            

<li>多級(jí)無(wú)序列表的瀏覽器默認(rèn)解析后的頁(yè)面效果2                

<ul>                    

<li>多級(jí)無(wú)序列表的瀏覽器默認(rèn)解析后的頁(yè)面效果3</li>                    

<li>多級(jí)無(wú)序列表的瀏覽器默認(rèn)解析后的頁(yè)面效果3</li>                

</ul>            

</li>        

</ul>    

</li>    

<li>多級(jí)無(wú)序列表的瀏覽器默認(rèn)解析后的頁(yè)面效果1</li>

</ul>

通過(guò)效果圖可以發(fā)現(xiàn)無(wú)序列表在隨著其所包含的列表級(jí)數(shù)的增加而逐漸縮進(jìn),并且隨著列表級(jí)數(shù)的增加而改變不同的修飾符。瀏覽器在解析無(wú)序列表時(shí),會(huì)不斷地對(duì)不同級(jí)別的無(wú)序列表進(jìn)行縮進(jìn)顯示,但修飾符卻只有3種。如果3層嵌套都無(wú)法滿足網(wǎng)頁(yè)中所需要使用的無(wú)序列表時(shí),讀者就應(yīng)該反思這個(gè)頁(yè)面中的列表嵌套是否過(guò)多了。

合理地使用HTML標(biāo)簽才能讓頁(yè)面的結(jié)構(gòu)更加清晰,相對(duì)地更符合語(yǔ)義。不過(guò)不用擔(dān)心,如果網(wǎng)頁(yè)設(shè)計(jì)中實(shí)在需要更多層嵌套,并且是不同的修飾符時(shí),還是可以利用CSS樣式來(lái)修改其修飾符的。

當(dāng)前文章標(biāo)題:設(shè)計(jì)網(wǎng)頁(yè)中的列表信息

當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/3085.html

上一篇:設(shè)計(jì)燈箱廣告

下一篇:列表信息中的有序列表

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷咨詢專線:181-8386-5875(點(diǎn)擊可一鍵撥號(hào))