Day18:美化項目清單

2024 iThome 鐵人賽

DAY 18

佛心分享-IT 人自學之術

HTML&CSS網頁設計學習心得系列第 18 篇

16th鐵人賽

gogococo

2024-10-02 13:29:14

94 瀏覽

分享至

HTML 部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美化項目清單</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h1>我的待辦事項</h1>
    
    <ul class="custom-list">
        <li>完成HTML和CSS作業</li>
        <li>閱讀新書章節</li>
        <li>鍛煉30分鐘</li>
        <li>寫一篇博客</li>
    </ul>

    <h1>購物清單</h1>
    
    <ol class="custom-ordered-list">
        <li>牛奶</li>
        <li>麵包</li>
        <li>雞蛋</li>
        <li>咖啡</li>
    </ol>

</body>
</html>

CSS 部分：

body {
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
    padding: 20px;
    color: #333;
}

h1 {
    font-size: 24px;
    color: #4a90e2;
    margin-bottom: 15px;
}


.custom-list {
    list-style-type: none; 
    padding: 0;
}

.custom-list li {
    background: #e0f7fa; 
    margin: 10px 0;
    padding: 15px;
    border-radius: 8px; 
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}


.custom-list li::before {
    content: "\2022"; 
    color: #00796b; 
    font-size: 24px;
    margin-right: 15px; 
}

.custom-ordered-list {
    counter-reset: list-counter; 
    padding-left: 0;
    margin-left: 0;
}

.custom-ordered-list li {
    counter-increment: list-counter;
    margin: 10px 0;
    padding: 15px;
    background: #ffeb3b;
    border-radius: 8px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: relative;
    padding-left: 40px; 
}

.custom-ordered-list li::before {
    content: counter(list-counter) ". "; 
    color: #f44336;
    font-size: 20px;
    position: absolute;
    left: 10px;
}

說明：
無序列表美化 (ul.custom-list)：

list-style-type: none;：去掉默認的項目符號。
背景顏色 (background)：每個列表項有自己的背景顏色。
項目符號 (::before)：使用 ::before 伺服器生成一個圓點 (\2022)，並自定義它的顏色和大小。
圓角 (border-radius) 和陰影 (box-shadow)：讓列表項看起來更立體。
有序列表美化 (ol.custom-ordered-list)：

計數器 (counter-reset 和 counter-increment)：自定義有序列表的數字。
數字樣式 (::before)：自定義數字的顏色、大小、位置，使用 counter() 生成每個項目的序號。
背景顏色和圓角：每個項目使用不同的背景顏色和圓角來突出顯示。