Day19 CSS項目清單屬性＆實作範例

2024 iThome 鐵人賽

DAY 19

佛心分享-IT 人自學之術

新手踏入網頁前端的世界系列第 19 篇

16th鐵人賽

zhiz

2024-09-23 21:04:03

83 瀏覽

分享至

今天要介紹CSS的項目清單屬性

list-style-type設定項目清單的符號，如下：
- 無順序性
  disc (實心圓)、circle (空心圓)、square (正方形)。
- 有順序性
  decimal (從1～9排列) 、lower-alpha (從a～z排列)、upper-alpha (從A～Z排列)、lower-roman (從羅馬數字i排列)。
list-style-image 設定項目符號的圖片，寫入圖片的url。
實作範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圖片項目符號</title>
    <style>
        ul{
            list-style-image: url(apple.png);
        }
    </style>
</head>
<body>
    <h3>蘋果周邊商品</h3>
    <ul>
        <li>蘋果汁</li>
        <li>蘋果麵包</li>
        <li>蘋果蛋糕</li>
    </ul>
    
</body>
</html>

list-style-position設定項目符號的位置，如outside ( 符號在外層，其內容會在符號之後縮排)、inside (符號在內層，其內容會和符號一起縮排)。
實作範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>項目符號位置</title>
    <style>
        .outside{
            list-style-position: outside;
        }
        .inside{
            list-style-position: inside;
        }
    </style>
</head>
<body>
    <h2>大眾運輸交通工具</h2>
    <ul class="outside">
        <li>公車</li>
        <li>火車</li>
        <li>捷運</li>
    </ul>
    ---------------------------
    <ul class="inside">
        <li>公車</li>
        <li>火車</li>
        <li>捷運</li>
    </ul>
    
</body>
</html>

前面介紹了許多項目清單屬性，若覺得逐條設定很麻煩，可以利用下面這個方式來快速設定。

list-style功用是不用逐一設定項目清單的屬性，不同屬性值用空格隔開。
實作範例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>項目清單屬性</title>
    <style>
        ol{list-style: outside lower-roman ;}
    </style>
</head>
<body>
    <h3>滅火器使用口訣</h3>
    <ol>
        <li>拉</li>
        <li>瞄</li>
        <li>壓</li>
        <li>掃</li>

    </ol>
    
</body>
</html>