• <abbr id="qqgmy"></abbr>
      <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
    • <rt id="qqgmy"><code id="qqgmy"></code></rt>
      • 列表信息中的有序列表

        成績單是大家比較熟悉的有序列表了,從第一名一直排到最后一名。在網(wǎng)頁設(shè)計(jì)中,有序列表,相對于無序列表而言,最大的區(qū)別就是有序列表是帶有排名性質(zhì)的列表。

        <ol>    

        <li>張三</li>    

        <li>李四</li>    

        <li>王五</li>

        <li>趙六</li>

        </ol>

        <ol>標(biāo)簽表示有序列表的集合,其必須包含<li>標(biāo)簽,具體形式與無序列表一樣,但瀏覽器解析有序列表時(shí)的默認(rèn)效果卻是不同的。在設(shè)計(jì)網(wǎng)頁時(shí),有序列表也可分為一級有序列表和多級無序列表,瀏覽器默認(rèn)解析時(shí)都是將有序列表以阿拉伯?dāng)?shù)字表示,并增加縮進(jìn)。

        <ol>    

        <li>一級有序列表默認(rèn)解析效果</li>    

        <li>一級有序列表默認(rèn)解析效果</li>    

        <li>一級有序列表默認(rèn)解析效果</li>

        </ol>

        多級有序列表在瀏覽器中默認(rèn)解析效果如圖下所示。

        <ol>    

        <li>多級有序列表默認(rèn)解析效果1</li>    

        <li>多級有序列表默認(rèn)解析效果1

        <ol>            

        <li>多級有序列表默認(rèn)解析效果2</li>            

        <li>多級有序列表默認(rèn)解析效果2                

        <ol>                    

        <li>多級有序列表默認(rèn)解析效果3</li>                    

        <li>多級有序列表默認(rèn)解析效果3</li>                    

        <li>多級有序列表默認(rèn)解析效果3</li>                

        </ol>            

        </li>            

        <li>多級有序列表默認(rèn)解析效果2</li>        

        </ol>    

        </li>    

        <li>多級有序列表默認(rèn)解析效果1</li></ol>

        網(wǎng)站建設(shè)時(shí),有序列表在多級的情況下,理論上應(yīng)該是隨著層級的增加而出現(xiàn)1.1或者1.1.1之類的數(shù)字,但瀏覽器卻無法在網(wǎng)頁中直接解析出這樣的效果,如果需要使用1.1或者1.1.1之類的數(shù)字表示方式,那么就只能使用CSS、JavaScript或者手工加入。

        【示例】在上面示例基礎(chǔ)上,在文檔中添加如下CSS樣式代碼,可以設(shè)計(jì)數(shù)字目錄效果。

        <style type="text/css">

        ol { list-style:none;}                                             /*清除默認(rèn)的序號*/

        li:before {color:#f00; font-family:Times New Roman;}               /*設(shè)計(jì)層級目錄序號的字體樣式*/

        li{counter-increment:a 1;}                                         /*設(shè)計(jì)遞增函數(shù)a,遞增起始值為1 */

        li:before{content:counter(a)". ";}                                 /*把遞增值添加到列表項(xiàng)前面*/

        li li{counter-increment:b 1;}                                      /*設(shè)計(jì)遞增函數(shù)b,遞增起始值為1 */

        li 

        li:before{content:counter(a)"."counter(b)". ";}                 /*把遞增值添加到二級列表項(xiàng)前面*/

        li li li{counter-increment:c 1;}                                   /*設(shè)計(jì)遞增函數(shù)c,遞增起始值為1 */

        li li

         li:before{content:counter(a)"."counter(b)"."counter(c)". ";}  /*把遞增值添加到三級列表項(xiàng)前面*/</style>

        網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號)
        在线一区视频二区三区,av无码久久久不卡网站,亚洲国产人成精品,国产成人白丝视频
        • <abbr id="qqgmy"></abbr>
          <menu id="qqgmy"><abbr id="qqgmy"></abbr></menu>
        • <rt id="qqgmy"><code id="qqgmy"></code></rt>