CSS3 列表控制詳解
CSS 列表控制的語法知識點及案例代碼的詳細說明，包括 list-style-type、list-style-image、list-style-position 和 list-style 的用法。
1. list-style-type 屬性
list-style-type 屬性用于設置列表項標記的類型。
語法
list-style-type: value;
常用值
none：無標記disc：實心圓點（默認值）circle：空心圓圈square：實心方塊decimal：數字 1, 2, 3, 4…decimal-leading-zero：數字 01, 02, 03, 04…lower-roman：小寫羅馬數字 i, ii, iii, iv…upper-roman：大寫羅馬數字 I, II, III, IV…lower-alpha：小寫字母 a, b, c, d…upper-alpha：大寫字母 A, B, C, D…lower-greek：小寫希臘字母 α, β, γ…lower-latin：小寫拉丁字母 (等同于 lower-alpha)upper-latin：大寫拉丁字母 (等同于 upper-alpha)armenian：亞美尼亞數字georgian：喬治亞數字
示例代碼
<!DOCTYPE html>
<html>
<head>
<style>ul.custom {list-style-type: square; /* 使用方塊作為列表標記 */}ol.decimal-leading-zero {list-style-type: decimal-leading-zero; /* 使用前導零的數字 */}ol.roman {list-style-type: lower-roman; /* 使用小寫羅馬數字 */}
</style>
</head>
<body><h2>自定義列表樣式</h2>
<ul class="custom"><li>項目一</li><li>項目二</li><li>項目三</li>
</ul><ol class="decimal-leading-zero"><li>第一步</li><li>第二步</li><li>第三步</li>
</ol><ol class="roman"><li>第一章</li><li>第二章</li><li>第三章</li>
</ol></body>
</html>
2. list-style-image 屬性
list-style-image 屬性用于使用圖像作為列表項標記。
語法
list-style-image: none|url|initial|inherit;
屬性值
none：默認值，不使用圖像url：圖像的路徑initial：設置為默認值inherit：從父元素繼承
示例代碼
<!DOCTYPE html>
<html>
<head>
<style>ul.image-marker {list-style-image: url('https://via.placeholder.com/15x15'); /* 使用占位圖片作為標記 */}ul.image-marker-fallback {/* 先嘗試使用圖片，如果圖片不可用則使用方塊 */list-style-type: square;list-style-image: url('nonexistent.png');}
</style>
</head>
<body><h2>圖像作為列表標記</h2>
<ul class="image-marker"><li>帶圖片標記的項目一</li><li>帶圖片標記的項目二</li><li>帶圖片標記的項目三</li>
</ul><h2>帶回退的圖像標記</h2>
<ul class="image-marker-fallback"><li>如果圖片不存在，會顯示方塊</li><li>第二個項目</li>
</ul></body>
</html>
3. list-style-position 屬性
list-style-position 屬性用于設置列表項標記的位置。
語法
list-style-position: inside|outside|initial|inherit;
屬性值
outside：默認值，標記位于列表項內容之外inside：標記位于列表項內容之內initial：設置為默認值inherit：從父元素繼承
示例代碼
<!DOCTYPE html>
<html>
<head>
<style>ul.outside {list-style-position: outside; /* 默認值，標記在內容外 */border: 1px solid #ccc;width: 200px;}ul.inside {list-style-position: inside; /* 標記在內容內 */border: 1px solid #ccc;width: 200px;}li {background-color: #f8f8f8;margin: 5px 0;}
</style>
</head>
<body><h2>標記位置對比</h2><h3>outside (默認)</h3>
<ul class="outside"><li>列表項目一 - 標記在邊框外</li><li>列表項目二 - 文本對齊整齊</li>
</ul><h3>inside</h3>
<ul class="inside"><li>列表項目一 - 標記在邊框內</li><li>列表項目二 - 文本縮進與標記對齊</li>
</ul></body>
</html>
4. list-style 簡寫屬性
list-style 屬性是上述所有列表樣式屬性的簡寫形式。
語法
list-style: list-style-type list-style-position list-style-image;
使用說明
- 可以按任意順序指定值
- 可以省略一個或多個值，未指定的值將使用默認值
- 推薦順序：type position image
示例代碼
<!DOCTYPE html>
<html>
<head>
<style>ul.custom-shorthand {/* 使用簡寫屬性設置列表樣式 */list-style: square inside url('https://via.placeholder.com/15x15');width: 250px;border: 1px solid #ddd;padding: 10px;}ul.partial-shorthand {/* 只指定部分屬性 */list-style: lower-alpha outside;}ul.reset {/* 重置列表樣式 */list-style: none;padding-left: 0;}
</style>
</head>
<body><h2>list-style 簡寫屬性</h2><ul class="custom-shorthand"><li>使用簡寫屬性設置的列表項</li><li>同時指定了類型、位置和圖像</li><li>圖像優先顯示，如果不可用則顯示方塊</li>
</ul><ul class="partial-shorthand"><li>只指定了類型和位置</li><li>使用小寫字母標記</li><li>標記在內容外部</li>
</ul><h3>重置列表樣式</h3>
<ul class="reset"><li>沒有標記的列表</li><li>常用于導航菜單</li>
</ul></body>
</html>
5. 高級應用案例
自定義計數器列表
<!DOCTYPE html>
<html>
<head>
<style>/* 自定義計數器樣式 */ol.custom-counter {counter-reset: section; /* 初始化計數器 */list-style-type: none; /* 移除默認標記 */padding-left: 0;}ol.custom-counter li {counter-increment: section; /* 遞增計數器 */margin-bottom: 10px;position: relative;padding-left: 30px;}ol.custom-counter li::before {/* 使用偽元素顯示自定義計數器 */content: counter(section) ". "; /* 顯示計數器值 */position: absolute;left: 0;width: 25px;height: 25px;background-color: #4CAF50;color: white;text-align: center;line-height: 25px;border-radius: 50%;}/* 多級嵌套計數器 */ol.nested-counter {counter-reset: chapter;list-style-type: none;}ol.nested-counter > li {counter-increment: chapter;counter-reset: section;}ol.nested-counter > li::before {content: counter(chapter) ". ";font-weight: bold;}ol.nested-counter ol {list-style-type: none;counter-reset: section;padding-left: 20px;}ol.nested-counter ol li {counter-increment: section;}ol.nested-counter ol li::before {content: counter(chapter) "." counter(section) " ";}
</style>
</head>
<body><h2>自定義計數器列表</h2>
<ol class="custom-counter"><li>第一個項目</li><li>第二個項目</li><li>第三個項目</li>
</ol><h2>嵌套計數器</h2>
<ol class="nested-counter"><li>第一章<ol><li>第一節</li><li>第二節</li></ol></li><li>第二章<ol><li>第一節</li><li>第二節</li></ol></li>
</ol></body>
</html>
水平導航菜單
<!DOCTYPE html>
<html>
<head>
<style>/* 將列表轉換為水平導航菜單 */ul.horizontal-nav {list-style-type: none; /* 移除標記 */margin: 0;padding: 0;overflow: hidden;background-color: #333;}ul.horizontal-nav li {float: left; /* 使列表項水平排列 */}ul.horizontal-nav li a {display: block; /* 使整個區域可點擊 */color: white;text-align: center;padding: 14px 16px;text-decoration: none;}ul.horizontal-nav li a:hover {background-color: #111;}/* 當前活動項 */ul.horizontal-nav li.active {background-color: #4CAF50;}/* 響應式設計 - 小屏幕時垂直堆疊 */@media screen and (max-width: 600px) {ul.horizontal-nav li {float: none;}}
</style>
</head>
<body><h2>水平導航菜單</h2>
<ul class="horizontal-nav"><li><a href="#home">首頁</a></li><li><a href="#news">新聞</a></li><li class="active"><a href="#contact">聯系</a></li><li><a href="#about">關于</a></li>
</ul></body>
</html>
總結
CSS3 提供了強大的列表樣式控制能力，主要包括：
list-style-type- 控制列表標記的類型list-style-image- 使用自定義圖像作為列表標記list-style-position- 控制標記的位置（內部或外部）list-style- 上述屬性的簡寫形式
通過組合這些屬性和其他CSS技術（如偽元素、計數器等），可以創建高度定制化的列表樣式，滿足各種設計需求。
CSS3 列表控制開發案例集
下面提供5個實際開發中常用的列表控制案例，每個案例都有詳細注釋和實際應用場景說明。
案例1：帶圖標的垂直導航菜單
<!DOCTYPE html>
<html>
<head>
<style>/* 垂直導航菜單樣式 */.icon-nav {width: 200px;list-style: none; /* 移除默認列表樣式 */padding: 0;margin: 0;font-family: Arial, sans-serif;border: 1px solid #e1e1e1;border-radius: 4px;overflow: hidden; /* 隱藏溢出部分 */}.icon-nav li {border-bottom: 1px solid #e1e1e1;}.icon-nav li:last-child {border-bottom: none; /* 最后一個項目無下邊框 */}.icon-nav a {display: flex; /* 使用flex布局對齊圖標和文本 */align-items: center;padding: 12px 15px;text-decoration: none;color: #333;transition: all 0.3s ease; /* 添加過渡效果 */}.icon-nav a:hover {background-color: #f5f5f5;color: #0066cc;}.icon-nav .icon {width: 20px;height: 20px;margin-right: 10px;background-size: contain;background-repeat: no-repeat;}/* 為每個菜單項設置不同的圖標 */.icon-home { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>'); }.icon-news { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>'); }.icon-contact { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>'); }.icon-about { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>'); }/* 懸停時改變圖標顏色 */.icon-nav a:hover .icon {filter: invert(39%) sepia(90%) saturate(2000%) hue-rotate(190deg) brightness(90%) contrast(90%);}
</style>
</head>
<body><h3>帶圖標的垂直導航菜單</h3>
<ul class="icon-nav"><li><a href="#"><span class="icon icon-home"></span>首頁</a></li><li><a href="#"><span class="icon icon-news"></span>新聞中心</a></li><li><a href="#"><span class="icon icon-contact"></span>聯系我們</a></li><li><a href="#"><span class="icon icon-about"></span>關于我們</a></li>
</ul></body>
</html>
應用場景：后臺管理系統側邊欄、網站主導航
案例2：步驟指示器
<!DOCTYPE html>
<html>
<head>
<style>/* 步驟指示器樣式 */.step-indicator {list-style: none;padding: 0;margin: 30px 0;display: flex;justify-content: space-between;counter-reset: step-counter; /* 初始化計數器 */}.step-indicator li {flex: 1;position: relative;text-align: center;font-size: 14px;color: #999;}/* 步驟編號 */.step-indicator li::before {counter-increment: step-counter; /* 遞增計數器 */content: counter(step-counter); /* 顯示計數器值 */display: block;width: 30px;height: 30px;line-height: 30px;margin: 0 auto 10px;border-radius: 50%;background-color: #e0e0e0;color: #999;font-weight: bold;}/* 連接線 */.step-indicator li::after {content: '';position: absolute;top: 15px;left: -50%;width: 100%;height: 2px;background-color: #e0e0e0;z-index: -1;}/* 第一個項目不需要連接線 */.step-indicator li:first-child::after {display: none;}/* 當前步驟樣式 */.step-indicator li.active {color: #4285f4;}.step-indicator li.active::before {background-color: #4285f4;color: white;}/* 已完成步驟樣式 */.step-indicator li.completed {color: #34a853;}.step-indicator li.completed::before {background-color: #34a853;color: white;content: '?'; /* 使用對勾代替數字 */}.step-indicator li.completed::after {background-color: #34a853;}
</style>
</head>
<body><h3>訂單流程步驟指示器</h3>
<ul class="step-indicator"><li class="completed">選擇商品</li><li class="completed">填寫信息</li><li class="active">支付訂單</li><li>等待發貨</li><li>完成評價</li>
</ul></body>
</html>
應用場景：電商訂單流程、多步驟表單、注冊流程
案例3：新聞資訊列表
<!DOCTYPE html>
<html>
<head>
<style>/* 新聞列表樣式 */.news-list {list-style: none;padding: 0;max-width: 800px;margin: 0 auto;font-family: 'Helvetica Neue', Arial, sans-serif;}.news-item {display: flex;padding: 20px 0;border-bottom: 1px solid #eee;}.news-item:last-child {border-bottom: none;}.news-date {flex: 0 0 100px;text-align: center;margin-right: 20px;}.news-day {font-size: 28px;font-weight: bold;color: #4285f4;display: block;line-height: 1;}.news-month {font-size: 14px;color: #666;text-transform: uppercase;display: block;}.news-content {flex: 1;}.news-title {font-size: 18px;margin: 0 0 8px 0;color: #333;}.news-title a {color: inherit;text-decoration: none;transition: color 0.2s;}.news-title a:hover {color: #4285f4;}.news-summary {font-size: 14px;color: #666;line-height: 1.5;margin: 0 0 10px 0;}.news-meta {font-size: 12px;color: #999;}.news-meta span {margin-right: 15px;}.news-meta .category {color: #34a853;font-weight: bold;}/* 響應式設計 */@media (max-width: 600px) {.news-item {flex-direction: column;}.news-date {display: flex;align-items: center;margin-bottom: 10px;}.news-day {margin-right: 10px;font-size: 24px;}.news-month {font-size: 12px;}}
</style>
</head>
<body><h3>新聞資訊列表</h3>
<ul class="news-list"><li class="news-item"><div class="news-date"><span class="news-day">15</span><span class="news-month">Jun</span></div><div class="news-content"><h4 class="news-title"><a href="#">公司發布新一代人工智能產品</a></h4><p class="news-summary">我們很高興地宣布推出全新AI解決方案，該產品將徹底改變企業工作流程...</p><div class="news-meta"><span class="category">公司動態</span><span>作者: 張經理</span><span>閱讀: 1245</span></div></div></li><li class="news-item"><div class="news-date"><span class="news-day">08</span><span class="news-month">Jun</span></div><div class="news-content"><h4 class="news-title"><a href="#">2023年技術峰會在上海成功舉辦</a></h4><p class="news-summary">為期三天的技術峰會吸引了來自全球的2000多名開發者參與，共同探討前沿技術發展趨勢...</p><div class="news-meta"><span class="category">行業資訊</span><span>作者: 李編輯</span><span>閱讀: 892</span></div></div></li><li class="news-item"><div class="news-date"><span class="news-day">01</span><span class="news-month">Jun</span></div><div class="news-content"><h4 class="news-title"><a href="#">夏季促銷活動即將開始</a></h4><p class="news-summary">為慶祝公司成立10周年，我們將在6月10日至20日期間推出全場商品8折優惠...</p><div class="news-meta"><span class="category">促銷活動</span><span>作者: 王主管</span><span>閱讀: 1567</span></div></div></li>
</ul></body>
</html>
應用場景：企業新聞頁面、博客文章列表、資訊中心
案例4：產品功能列表
<!DOCTYPE html>
<html>
<head>
<style>/* 產品功能列表樣式 */.feature-list {list-style: none;padding: 0;display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 30px;margin: 40px 0;}.feature-item {background: white;border-radius: 8px;box-shadow: 0 5px 15px rgba(0,0,0,0.05);overflow: hidden;transition: transform 0.3s, box-shadow 0.3s;}.feature-item:hover {transform: translateY(-5px);box-shadow: 0 10px 25px rgba(0,0,0,0.1);}.feature-icon {height: 80px;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, #4285f4, #34a853);}.feature-icon svg {width: 40px;height: 40px;fill: white;}.feature-content {padding: 25px;}.feature-title {font-size: 18px;margin: 0 0 15px 0;color: #333;}.feature-desc {font-size: 14px;line-height: 1.6;color: #666;margin: 0;}/* 不同功能項使用不同顏色 */.feature-item:nth-child(2) .feature-icon {background: linear-gradient(135deg, #ea4335, #fbbc05);}.feature-item:nth-child(3) .feature-icon {background: linear-gradient(135deg, #34a853, #4285f4);}.feature-item:nth-child(4) .feature-icon {background: linear-gradient(135deg, #fbbc05, #ea4335);}/* 響應式設計 */@media (max-width: 768px) {.feature-list {grid-template-columns: 1fr;}}
</style>
</head>
<body><h3>產品核心功能</h3>
<ul class="feature-list"><li class="feature-item"><div class="feature-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><path d="M3.27 6.96L12 12.01l8.73-5.05M12 22.08V12"></path></svg></div><div class="feature-content"><h4 class="feature-title">安全可靠</h4><p class="feature-desc">采用銀行級加密技術，確保您的數據安全無憂。多重備份機制，99.99%的服務可用性保證。</p></div></li><li class="feature-item"><div class="feature-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 12h-4l-3 9L9 3l-3 9H2"></path></svg></div><div class="feature-content"><h4 class="feature-title">極速性能</h4><p class="feature-desc">全球CDN加速，毫秒級響應。優化的算法架構，比傳統方案快3倍以上。</p></div></li><li class="feature-item"><div class="feature-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg></div><div class="feature-content"><h4 class="feature-title">團隊協作</h4><p class="feature-desc">實時多人協作編輯，權限精細控制。歷史版本追溯，隨時恢復任意版本。</p></div></li><li class="feature-item"><div class="feature-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83"></path></svg></div><div class="feature-content"><h4 class="feature-title">智能分析</h4><p class="feature-desc">內置AI分析引擎，自動生成可視化報表。預測趨勢，輔助決策。</p></div></li>
</ul></body>
</html>
應用場景：產品介紹頁面、服務特色展示、解決方案功能點
案例5：帶復選框的任務列表
<!DOCTYPE html>
<html>
<head>
<style>/* 任務列表樣式 */.task-list {list-style: none;padding: 0;max-width: 600px;margin: 30px auto;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}.task-item {display: flex;align-items: center;padding: 12px 15px;background: white;border-radius: 6px;margin-bottom: 10px;box-shadow: 0 2px 4px rgba(0,0,0,0.05);transition: all 0.3s ease;}.task-item:hover {box-shadow: 0 4px 8px rgba(0,0,0,0.1);transform: translateY(-2px);}/* 自定義復選框樣式 */.task-checkbox {position: relative;margin-right: 15px;}.task-checkbox input[type="checkbox"] {position: absolute;opacity: 0;cursor: pointer;height: 0;width: 0;}.checkmark {position: relative;display: inline-block;width: 20px;height: 20px;background-color: #f5f5f5;border: 2px solid #ddd;border-radius: 4px;transition: all 0.2s;}.task-checkbox input:checked ~ .checkmark {background-color: #34a853;border-color: #34a853;}/* 對勾圖標 */.checkmark:after {content: "";position: absolute;display: none;left: 6px;top: 2px;width: 5px;height: 10px;border: solid white;border-width: 0 2px 2px 0;transform: rotate(45deg);}.task-checkbox input:checked ~ .checkmark:after {display: block;}.task-content {flex: 1;}.task-title {font-weight: 500;margin: 0 0 3px 0;color: #333;}.task-desc {font-size: 13px;color: #777;margin: 0;}/* 已完成任務樣式 */.task-item.completed .task-title {color: #999;text-decoration: line-through;}.task-item.completed .task-desc {color: #bbb;}/* 優先級標簽 */.task-priority {font-size: 12px;padding: 3px 8px;border-radius: 10px;margin-left: 15px;font-weight: bold;}.priority-high {background-color: #fce8e6;color: #d93025;}.priority-medium {background-color: #fef7e0;color: #f9ab00;}.priority-low {background-color: #e6f4ea;color: #34a853;}/* 截止日期 */.task-due {font-size: 12px;color: #777;margin-left: 15px;white-space: nowrap;}.task-due.overdue {color: #d93025;font-weight: bold;}
</style>
</head>
<body><h3>任務管理列表</h3>
<ul class="task-list"><li class="task-item"><label class="task-checkbox"><input type="checkbox" checked><span class="checkmark"></span></label><div class="task-content"><h4 class="task-title">完成項目需求文檔</h4><p class="task-desc">整理客戶需求并編寫詳細的功能規格說明書</p></div><span class="task-priority priority-high">高優先級</span><span class="task-due">今天</span></li><li class="task-item completed"><label class="task-checkbox"><input type="checkbox" checked><span class="checkmark"></span></label><div class="task-content"><h4 class="task-title">團隊周例會</h4><p class="task-desc">討論項目進度和下周工作計劃</p></div><span class="task-priority priority-medium">中優先級</span><span class="task-due">周一</span></li><li class="task-item"><label class="task-checkbox"><input type="checkbox"><span class="checkmark"></span></label><div class="task-content"><h4 class="task-title">UI設計評審</h4><p class="task-desc">與設計團隊討論新版界面設計方案</p></div><span class="task-priority priority-medium">中優先級</span><span class="task-due">周三</span></li><li class="task-item"><label class="task-checkbox"><input type="checkbox"><span class="checkmark"></span></label><div class="task-content"><h4 class="task-title">學習新技術</h4><p class="task-desc">完成React新特性學習并寫demo</p></div><span class="task-priority priority-low">低優先級</span><span class="task-due overdue">上周五</span></li>
</ul></body>
</html>
應用場景：任務管理系統、待辦事項應用、項目管理工具
這些案例涵蓋了從簡單到復雜的各種列表應用場景，展示了CSS3列表控制的強大功能和靈活性。您可以根據實際需求進行調整和擴展。
