当前位置:首页>优优资讯 > 软件教程 > 电脑软件教程 > Dreamweaver入门之更改项目符号

Dreamweaver入门之更改项目符号

作者:本站整理 时间:2015-02-10

  如何管理一些无序列表和有序列表中的项目符号呢?Dreamweaver CSS可以帮助我们实现。下面我们就具体来看看更改项目符号的CSS代码。

  1.无序列表项目样式属性(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>无序列表项目1</li>

  <li>无序列表项目2</li>

  <li>无序列表项目3</li>

  </ul>

  <ul class="w2">

  <li >无序列表项目1</li>

  <li >无序列表项目2</li>

  <li >无序列表项目3</li>

  </ul>

  <ul class="w3">

  <li >无序列表项目1</li>

  <li >无序列表项目2</li>

  <li >无序列表项目3</li>

  </ul>

  ……

  2.有序列表项目样式属性

  ……

  <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>有序列表项目1</li>

  <li>有序列表项目1</li>

  <li>有序列表项目1</li>

  </ol>

  <ol class="y2">

  <li>有序列表项目1</li>

  <li>有序列表项目1</li>

  <li>有序列表项目1</li>

  </ol>

  <ol class="y3">

  <li>有序列表项目1</li>

  <li>有序列表项目1</li>

  <li>有序列表项目1</li>

  </ol>

  ……

  3.用图片做列表项目符号(list-style-image)

  ……

  <style type="text/css">

  .xing { list-style-image:url(../../images/list.gif);}

  </style>

  ……

  <ul class="xing" >

  <li>无序列表项目1</li>

  <li>无序列表项目2</li>

  <li>无序列表项目3</li>

  </ul>

  ……
 

相关文章

相关推荐

最新攻略

用户评论

(已有0条评论)
表情
注:您的评论需要经过审核才能显示哦,请文明发言!
还没有评论,快来抢沙发吧!