Dreamweaver 教程-CSS列表(list)

2022-05-05發(fā)布者:ylm大小: 下載:0

文件大小:

軟件介紹

1.無序列表項(xiàng)目樣式屬性(list-style-type)

……
  <style type="text/css">
  .w1 { list-style-type:circle;}
  .w2 { list-style-type:square;}
  .w3 { list-style-type:disc ;}
  </style>
        ……
  <ul class="w1">
  <li>無序列表項(xiàng)目1</li>
  <li>無序列表項(xiàng)目2</li>
  <li>無序列表項(xiàng)目3</li>
  </ul>
  <ul class="w2">
  <li >無序列表項(xiàng)目1</li>
  <li >無序列表項(xiàng)目2</li>
  <li >無序列表項(xiàng)目3</li>
  </ul>
  <ul class="w3">
  <li >無序列表項(xiàng)目1</li>
  <li >無序列表項(xiàng)目2</li>
  <li >無序列表項(xiàng)目3</li>
  </ul>
        ……

2.有序列表項(xiàng)目樣式屬性

……
  <style type="text/css">
    .y1 { list-style-type:decimal ;}
      .y2 {list-style-type:upper-roman ;}
      .y3 {list-style-type:lower-roman ;}
  </style>
        ……
  <ol class="y1">
  <li>有序列表項(xiàng)目1</li>
  <li>有序列表項(xiàng)目1</li>
  <li>有序列表項(xiàng)目1</li>
  </ol>
  <ol class="y2">
  <li>有序列表項(xiàng)目1</li>
  <li>有序列表項(xiàng)目1</li>
  <li>有序列表項(xiàng)目1</li>
  </ol>
  <ol class="y3">
  <li>有序列表項(xiàng)目1</li>
  <li>有序列表項(xiàng)目1</li>
  <li>有序列表項(xiàng)目1</li>
  </ol>
        ……

3.用圖片做列表項(xiàng)目符號(list-style-image)

……
  <style type="text/css">
    .xing { list-style-image:url(../../images/list.gif);}
  </style>
        ……
  <ul class="xing" >
  <li>無序列表項(xiàng)目1</li>
  <li>無序列表項(xiàng)目2</li>
  <li>無序列表項(xiàng)目3</li>
  </ul>
        ……
發(fā)表評論(共0條評論)
請自覺遵守互聯(lián)網(wǎng)相關(guān)政策法規(guī),評論內(nèi)容只代表網(wǎng)友觀點(diǎn),發(fā)表審核后顯示!

版權(quán)聲明:

1 本站所有資源(含游戲)均是軟件作者、開發(fā)商投稿,任何涉及商業(yè)盈利目的均不得使用,否則產(chǎn)生的一切后果將由您自己承擔(dān)!

2 本站將不對任何資源負(fù)法律責(zé)任,所有資源請?jiān)谙螺d后24小時(shí)內(nèi)刪除。

3 若有關(guān)在線投稿、無法下載等問題,請與本站客服人員聯(lián)系。

4 如侵犯了您的版權(quán)、商標(biāo)等,請立刻聯(lián)系我們并具體說明情況后,本站將盡快處理刪除,聯(lián)系QQ:2499894784

返回頂部