HTML/CSS中有序<ol>、无序<ul>、定义列表用法详解

6 篇文章 1 订阅

CSS中用<ul>和<ol>来分别表示有序和无序列表,即有无序号,基本格式如下:
<html>
<head>
</head>
<body>
<h4>这是一个无序列表:</h4>
<ul style="list-style-type:none">
      <li>今天</li>
      <li>明天</li>
      <li>后天</li>
</ul>
<h4>这是一个嵌套的无序列表:</h4>
<ul style="list-style-type:decimal">
  <li>今天</li>
  <li>明天
    <ul style="list-style-type:square">
    <li>今天</li>
  <li>明天</li>
  <li>后天</li>
         <ul style="width:100px;list-style-position:inside;list-style-type:circle;">
            <li>今天今天今天今天今天今天今天今天今天</li>
            <li>明天明天明天明天明天明天明天明天</li>
            <li>后天后天后天后天后天</li>
         </ul>
         <ul style="width:100px;list-style-position:outside;list-style-type:disc;">
            <li>今天今天今天今天今天今天今天今天今天</li>
            <li>明天明天明天明天明天明天明天明天</li>
            <li>后天后天后天后天后天</li>
         </ul>
<ol type="A" start="2" >
     <li>时间</li>
     <li>金钱</li>
     <li>权利</li>
     <li>自由</li>
</ol>
    </ul>
  </li>
  <li>今天</li>
</ul>


<DL>
     <DT>无序列表</DT><DD>不以数字为开始,而是使用一个符号作为分项标记的列表。</DD>
     <DT>有序列表</DT><DD>使用数字编号,分项带有顺序性质的列表。</DD>
     <DT>定义列表</DT><DD>用于解释名词的列表,包含了两种层次,一是名词,一是名词的解释。</DD>
</DL>
</body>
</html>
其中list-style-type属性表示列表的项目符号的类型,其值有:
none:没有符号
disc: 实心圆(默认)。
circle: 空心圆。

square: 实心方块。

decimal:数字。

lower-roman:小写罗马数字。

upper-roman:大写罗马数字。

lower-alpha:小写英文字母。

upper-alpha:大写英文字母。

也可写作 style="list-style-type:square"。
list-style-image属性用来定义使用图片代替项目符号,例如:
li{list-style-image:url(images/bg03.gif);}
list-style-position属性,是用来定义项目符号在列表中显示位置的属性,属性值有:
inside:项目符号放置在文本以内。
outside:项目符号放置在文本以外。

当然<ol>中的属性有:

type
1 :阿拉伯数字
a:英文小写
A:英文大写
i:罗马小写数字
I:罗马大写数字
start编号样式的起始数字,如:编号样式设为A,起始值设置为2



  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值