iT邦幫忙

2021 iThome 鐵人賽

DAY 16
1
自我挑戰組

前進切版之路! CSS微體驗系列 第 16

【心得】我就是要跟別人不一樣!!List 清單樣式變變變~

  • 分享至 

  • xImage
  •  

當我們看到條列式的文字時,首先都會想到使用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, ...)
      <!-- 設定在<ol>上 -->
      <h2>早餐</h2>
      <ul type="A">
          <li>玉米濃湯</li>
          <li>鮪魚吐司</li>
          <li>薯條</li>
      </ul>
      

      <!-- 設定在<li>上 -->
      <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
}

這樣它就會自己產生數字囉~~
codepen實作


上一篇
【踩坑】為什麼a標籤沒有包住我要的範圍!?
下一篇
【踩坑】animation 選單按鈕動起來(複習篇)
系列文
前進切版之路! CSS微體驗30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言