CSS 基础教程-042 CSS 有序列表样式输出

由 hrs, 18 一月, 2020

实例代码：

<!doctype html>
<head>
<meta charset="utf-8">
    <style type="text/css">
    ol.one{list-style-type:decimal;}
    ol.two{list-style-type:lower-roman;}
    ol.three{list-style-type:upper-roman;}
    ol.four{list-style-type:lower-alpha;}
    ol.five{list-style-type:upper-alpha;}
    table,th,td{border:1px solid black;border-collapse:collapse; }
    td,th{width:120px;}
    th{padding:5px;color:red;}
    </style>

</head>
<html>
<body>
<h1>有序列表样式实例</h1>
<table>
<tr>
  <th>数字</th>
  <th>小阿拉伯</th>
  <th>大阿拉伯</th>
  <th>小写</th>
  <th>大写</th>
</tr>
<tr>
    <td>
        <ol class="one">
        <li>苹果</li>
        <li>香蕉</li>
        <li>雪梨</li>
        </ol>
    </td>
    <td>

<ol class="two">
<li>咖啡</li>
<li>奶茶</li>
<li>可乐</li>
</ol>
 </td>

 <td>
<ol class="three">
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
</ol>
 </td>
 <td>

<ol class="four">
<li>咖啡</li>
<li>奶茶</li>
<li>可乐</li>
 </ol></td>

 <td>

<ol class="five">
<li>红茶</li>
<li>绿茶</li>
<li>普尔茶</li>

 </ol>
</td>
</tr>
</table>
</body>
</html>

运行效果:

css_042.png

标签

评论