[04-08] list-style-type,无序列表 & 有序列表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="17.css"/>
</head>
<body>
  <div class="ll">
    <ol>
      <li>湖北</li>
      <li>北京</li>
      <li>上海</li>
    </ol>
    <ul>
      <li>珠海</li>
      <li>深圳</li>
      <li>常州</li>
      <li>杭州</li>
    </ul>
  </div>
</body>
</html>
 
 
 
/*
list-style-type
  · 无序列表取值
    - none:无标记;
    - dics: 实心圆,为默认值;
    - circle:空心圆;
    - square:实心方块;
 
  · 有序列表取值
    - none: 无标记;
    - decimal: 数字(如 1,2,3),为默认值;
    - lower-roman: 小写罗马数字(如 i,ii,iii,iv,v)
    - upper-roman:大写罗马数字(如 I,II,III,IV,V)
    - 等

list-style-image 属性使用图像来替换列表项的标记
  - 取值为:nul(),指定图像作为有序或无序列表的标志;
*/
 
 
------css----
.ll{
  border: 1px solid red;/*边框*/
  margin: 400px 50px;/*外边框到另一端边的距离*/
  height: 200px;
  width: 150px;
 
  /*有序列表;upper-roman:大写罗马数字*/
  list-style-type: uper-roman;
}
ul{
  /*无序排列;square:实心方块;*/
  list-style-type: square;
}

 

posted @ 2019-05-15 14:56  菜鸟不飞  阅读(273)  评论(0编辑  收藏  举报