软件发布| 专题库| 优优资讯| 苹果专区| 安卓专区| 软件下载| 首页
优优资讯 电脑教程 安卓教程 安卓攻略 苹果教程 苹果攻略 新闻资讯

Dreamweaver入门之列表属性list的使用

时间:2015-03-05 来源:本站整理 我要评论

  CSS中列表样式属性是用list来定义的,列表又有无序和有序之分。今天我们就具体来看看怎样通过Dreamweaver在网页中添加列表。

  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条评论)
表情
注:您的评论需要经过审核才能显示哦,请文明发言!
还没有评论,快来抢沙发吧!
快速检索
0-9 A B C D E F G H I J K L M N O P Q R S T U V W X Y Z