Day19:美化項目清單

2024 iThome 鐵人賽

DAY 19

佛心分享-IT 人自學之術

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

16th鐵人賽

gogococo

2024-10-03 16:33:33

66 瀏覽

分享至

說明:
1.結構簡單：HTML 部分建立一個基本的無序清單（ul），包含一些待辦事項。

2.清單樣式：移除了預設的項目符號 (list-style-type: none)。
每個清單項目背景設為綠色，並加入了圓角和陰影來提升視覺效果。
每個清單項目前面用 ::before 加入一個 "✔" 符號。
增加了 hover 效果，當滑鼠懸停時，背景色會變深。

3.響應式設計：版面設定為中心對齊，適合不同設備的視窗大小。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled List</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="list-container">
        <h2>My Stylish To-Do List</h2>
        <ul class="styled-list">
            <li>Finish project report</li>
            <li>Attend team meeting</li>
            <li>Workout for 30 minutes</li>
            <li>Read a book</li>
            <li>Prepare dinner</li>
        </ul>
    </div>
</body>
</html>

CSS


body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f5;
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.list-container {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    max-width: 400px;
    width: 100%;
    text-align: center;
}

h2 {
    color: #333;
    margin-bottom: 15px;
}

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

.styled-list li {
    background-color: #4CAF50; 
    color: white;
    margin: 8px 0;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease; 
}

.styled-list li:hover {
    background-color: #45a049; 
}

.styled-list li:before {
    content: "✔"; 
    margin-right: 10px;
    color: #fff;
}