【心得】我就是要跟别人不一样!!List 清单样式变变变~

当我们看到条列式的文字时，首先都会想到使用HTML里面的<ol>、<ul>来制作

但<ol>、<ul>的预设样式有时候无法满足想要花枝招展的心

今天整理了一些怎麽变更清单样式的方法~

`<ul>`(unordered lists)--无序清单

HTML 变更

可以设定在<ul>上，继承给里面的<li>；也可以放在<li>进行单独设定

attribute

type="circle"
type="disc"
type="square"

<!-- 设定在<ul>上 -->
<h2>早餐</h2>
<ul type="circle">
    <li>玉米浓汤</li>
    <li>鲔鱼吐司</li>
    <li>薯条</li>
</ul>

<!-- 设定在<li>上 -->
<h2>早餐</h2>
<ul>
   <li type="disc">玉米浓汤</li>
   <li type="circle">鲔鱼吐司</li>
   <li type="square">薯条</li>
</ul>

巢状清单时第一层为disc>第二层为circle>第三层为square

 <li>
     <h2>早餐</h2>
     <ul>
         <li>玉米浓汤</li>
         <li>鲔鱼吐司</li>
         <li>薯条
            <ul>
              <li>盐味</li>
              <li>胡椒盐</li>
              <li>番茄酱</li>
            </ul>
         </li>
     </ul>
 </li>

`<ol>`(ordered lists)--有序清单

HTML 变更

attribute
- type
  可以设定在<ol>上，继承给里面的<li>；也可以放在<li>进行单独设定
  - type="1"：这是预设值，代表用阿拉伯数目（1, 2 ,3 ...）字编号。
  - type="A"：大写英文字母
  - type="a"：小写英文字母
  - type="I"：大写罗马数字（I, II, III, ...）
  - type="i"：小写罗马数字（i, ii, iii, ...）
```

<h2>早餐</h2>
<ul type="A">
    <li>玉米浓汤</li>
    <li>鲔鱼吐司</li>
    <li>薯条</li>
</ul>
```
```

<h2>早餐</h2>
<ul >
    <li type="a">玉米浓汤</li>
    <li type="I">鲔鱼吐司</li>
    <li type="i">薯条</li>
</ul>
```
- star ="数字" 起始数字
- reversed 顺序从高到低

巢状清单时则没有变化

<li>
    <h2>早餐</h2>
    <ol>
        <li>玉米浓汤</li>
        <li>鲔鱼吐司</li>
        <li>薯条
            <ol>
              <li>盐味</li>
              <li>胡椒盐</li>
              <li>番茄酱</li>
            </ol>
        </li>
     </ol>
</li>

CSS 变更

哎呀可是用HTML设定好麻烦呀~万一哪天要改动要一个一个改耶...
透过CSS的方法就可以快速又不动HTML改罗~
而且还可以改得更精致!

以下举例只是样式的冰山一角：

/*最常用的取消样式*/
list-style-type: none;

list-style-type: disc; 
list-style-type: circle;
list-style-type: square;
list-style-type: "文字";
list-style-type: decimal;

可以设定在<ol>或是<ul>上，继承给里面的<li>；也可以放在<li>进行单独设定

        <h2>早餐</h2>
        <ol >
          <li>玉米浓汤</li>
          <li>鲔鱼吐司</li>
          <li>薯条
            <ol>
              <li>盐味</li>
              <li>胡椒盐</li>
              <li>番茄酱</li>
            </ol>
          </li>
        </ol>

ol{
  list-style-type: "每天吃饱饱--";
}

ol li{
  list-style-type: "好饱好满足--"
}

`::marker` 对样式增加设定

看到上面范例感觉...离想要的感觉还是差了那麽一大截
想要改字型、改大小、改颜色让呈现更有层次该怎麽办?
锵锵~请用这个伪元素::marker来改
(::marker只能用在拥有display:list-item属性的物件上)

@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');

li li::marker{
  font-family: 'Gloria Hallelujah', cursive;
  font-size: 20px;
  color:#0f90f2;
}

codepen实作玩玩看

刚刚也有提到<ol>的巢状清单不像<ul>会根据层数自行变换样式
这时候就要对子层进行个别的设定，来产生不同的样式

假如说今天要做成像word一样

希望它根据大项目序号下去，自动产生出1-1、1-2、1-3、2-1、2-2...该怎麽做呢?

因为::marker是伪元素
它也可以使用content!
那麽就使用计数器让它自动产生序数吧~~

<ol>
  <li>OOOOO
    <ol>
      <li>XXXXX</li>
      <li>XXXXX</li>
    </ol>
  </li>
  <li>OOOOO
    <ol>
      <li>XXXXX</li>
      <li>XXXXX</li>
      <li>XXXXX</li>
    </ol>
  </li>
  <li>OOOOO
    <ol>
      <li>XXXXX</li>
      <li>XXXXX</li>
      <li>XXXXX</li>
    </ol>
  </li>
  
</ol>

li li::marker{
   content: counters(list-item,"-",list-item)" ";
   font-family: "Comic Sans MS", cursive, sans-serif;
   font-size: 15px;
   font-weight: 700;
   color:#396
}