CSS list 列表样式-代码号

CSS 列表样式详解：创建专业的内容列表

属性概述

CSS 列表属性提供了强大的控制能力，用于美化和定制网页中的列表显示效果。通过合理的列表样式设计，可以创建出结构清晰、视觉美观的内容展示方式，提升用户体验和页面专业性。

核心属性介绍

list-style-type（列表标记类型）

控制列表项前导标记的样式，支持多种预定义类型和自定义格式。

list-style-image（列表标记图像）

使用自定义图像作为列表项标记，提供更丰富的视觉效果。

list-style-position（列表标记位置）

控制标记符号相对于列表项内容框的位置，支持内外两种定位方式。

list-style（简写属性）

集成了以上所有属性的简写形式，提高代码编写效率。

基础语法结构

/* 单独设置各个属性 */
selector {
    list-style-type: value;
    list-style-position: value;
    list-style-image: url('image.png');
}

/* 使用简写属性 */
selector {
    list-style: type position image;
}

列表标记类型示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表标记类型示例 - 代码号编程教程</title>
    <style>
        .list-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 30px;
            font-family: "Microsoft YaHei", sans-serif;
            background: #f8f9fa;
            border-radius: 12px;
        }
        
        .list-section {
            margin: 30px 0;
            padding: 25px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .decimal-list {
            list-style-type: decimal;
        }
        
        .lower-alpha-list {
            list-style-type: lower-alpha;
        }
        
        .upper-roman-list {
            list-style-type: upper-roman;
        }
        
        .circle-list {
            list-style-type: circle;
        }
        
        .square-list {
            list-style-type: square;
        }
        
        .disc-list {
            list-style-type: disc;
        }
        
        .none-list {
            list-style-type: none;
            padding-left: 0;
        }
        
        .none-list li {
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }
        
        .list-title {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }
        
        .feature-item {
            background: #e8f4fd;
            padding: 20px;
            border-radius: 6px;
            border-left: 4px solid #3498db;
        }
    </style>
</head>
<body>
    <div class="list-container">
        <h1>CSS 列表样式类型展示</h1>
        <p>学习如何使用不同的列表标记类型来美化内容展示</p>
        
        <div class="feature-grid">
            <div class="feature-item">
                <h3>有序列表类型</h3>
                <p>支持数字、字母、罗马数字等多种格式</p>
            </div>
            <div class="feature-item">
                <h3>无序列表类型</h3>
                <p>提供圆形、方形、实心圆等标记样式</p>
            </div>
            <div class="feature-item">
                <h3>自定义标记</h3>
                <p>可以使用图片或自定义标记样式</p>
            </div>
        </div>
        
        <div class="list-section">
            <h2 class="list-title">有序列表示例</h2>
            <ol class="decimal-list">
                <li>HTML5 基础教程</li>
                <li>CSS3 样式设计</li>
                <li>JavaScript 编程</li>
            </ol>
            
            <ol class="lower-alpha-list">
                <li>前端框架学习</li>
                <li>响应式布局</li>
                <li>性能优化</li>
            </ol>
            
            <ol class="upper-roman-list">
                <li>项目需求分析</li>
                <li>技术方案设计</li>
                <li>开发实施</li>
            </ol>
        </div>
        
        <div class="list-section">
            <h2 class="list-title">无序列表示例</h2>
            <ul class="disc-list">
                <li>代码号教程中心</li>
                <li>编程实践平台</li>
                <li>源码下载资源</li>
            </ul>
            
            <ul class="circle-list">
                <li>前端开发技术</li>
                <li>后端开发技术</li>
                <li>移动端开发</li>
            </ul>
            
            <ul class="square-list">
                <li>学习路径规划</li>
                <li>实战项目练习</li>
                <li>技能认证考核</li>
            </ul>
        </div>
        
        <div class="list-section">
            <h2 class="list-title">无标记列表</h2>
            <ul class="none-list">
                <li><a href="https://www.ebingou.cn/jiaocheng/" style="color: #3498db; text-decoration: none;">❄️ 详细教程文档</a></li>
                <li><a href="https://www.ebingou.cn/biancheng/" style="color: #3498db; text-decoration: none;">⛏️ 在线编程环境</a></li>
                <li><a href="https://www.ebingou.cn/yuanma/" style="color: #3498db; text-decoration: none;">⚙️ 项目源码下载</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

列表标记位置控制

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表标记位置控制 - 代码号布局教程</title>
    <style>
        .position-demo {
            max-width: 900px;
            margin: 40px auto;
            padding: 30px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        .inside-list {
            list-style-type: decimal;
            list-style-position: inside;
            background: #e8f5e9;
            padding: 25px;
            border-radius: 8px;
        }
        
        .outside-list {
            list-style-type: decimal;
            list-style-position: outside;
            background: #e3f2fd;
            padding: 25px;
            border-radius: 8px;
        }
        
        .comparison {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin: 40px 0;
        }
        
        .comparison-item {
            padding: 20px;
            background: #f8f9fa;
            border-radius: 8px;
        }
        
        .code-block {
            background: #2c3e50;
            color: #ecf0f1;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            font-family: 'Consolas', monospace;
        }
        
        .note {
            background: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="position-demo">
        <h1>列表标记位置控制</h1>
        <p>学习如何使用 list-style-position 属性控制标记符号的位置</p>
        
        <div class="comparison">
            <div class="comparison-item">
                <h3>inside - 标记在内容框内</h3>
                <ol class="inside-list">
                    <li>这是一个较长的列表项内容，用于演示标记在内容框内的效果。当文本换行时，第二行文本会对齐到标记符号之后。</li>
                    <li>第二个列表项，同样包含较多的文本内容，以便观察inside位置属性的实际表现效果。</li>
                    <li>短项</li>
                </ol>
            </div>
            
            <div class="comparison-item">
                <h3>outside - 标记在内容框外（默认）</h3>
                <ol class="outside-list">
                    <li>这是一个较长的列表项内容，用于演示标记在内容框外的效果。当文本换行时，第二行文本会与第一行文本对齐。</li>
                    <li>第二个列表项，同样包含较多的文本内容，以便观察outside位置属性的实际表现效果。</li>
                    <li>短项</li>
                </ol>
            </div>
        </div>
        
        <div class="code-block">
            /* 内部位置示例 */<br>
            .inside-list {<br>
            &nbsp;&nbsp;list-style-position: inside;<br>
            &nbsp;&nbsp;background: #e8f5e9;<br>
            &nbsp;&nbsp;padding: 25px;<br>
            }<br><br>
            /* 外部位置示例 */<br>
            .outside-list {<br>
            &nbsp;&nbsp;list-style-position: outside;<br>
            &nbsp;&nbsp;background: #e3f2fd;<br>
            &nbsp;&nbsp;padding: 25px;<br>
            }
        </div>
        
        <div class="note">
            <strong>注意：</strong>outside 是默认值，标记符号位于内容框外部，不会影响文本的布局和对齐。
        </div>
    </div>
</body>
</html>

自定义列表样式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义列表样式 - 代码号高级技巧</title>
    <style>
        .custom-list-demo {
            max-width: 1000px;
            margin: 40px auto;
            padding: 30px;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            border-radius: 15px;
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        .image-marker-list {
            list-style-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="%23667eea"><circle cx="12" cy="12" r="8"/></svg>');
            padding-left: 40px;
        }
        
        .gradient-list {
            list-style: none;
            padding: 0;
        }
        
        .gradient-list li {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            margin: 10px 0;
            border-radius: 8px;
            display: flex;
            align-items: center;
        }
        
        .gradient-list li::before {
            content: '✓';
            background: white;
            color: #667eea;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-weight: bold;
        }
        
        .numbered-card-list {
            list-style: none;
            padding: 0;
            counter-reset: custom-counter;
        }
        
        .numbered-card-list li {
            background: white;
            padding: 20px;
            margin: 15px 0;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: relative;
            padding-left: 80px;
        }
        
        .numbered-card-list li::before {
            counter-increment: custom-counter;
            content: counter(custom-counter);
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 18px;
        }
        
        .style-showcase {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin: 40px 0;
        }
        
        .showcase-item {
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="custom-list-demo">
        <h1>自定义列表样式展示</h1>
        <p>探索各种创新的列表样式设计方法</p>
        
        <div class="style-showcase">
            <div class="showcase-item">
                <h3>图像标记列表</h3>
                <ul class="image-marker-list">
                    <li>前端开发教程</li>
                    <li>JavaScript 高级编程</li>
                    <li>CSS 布局实战</li>
                </ul>
            </div>
            
            <div class="showcase-item">
                <h3>渐变背景列表</h3>
                <ul class="gradient-list">
                    <li>响应式设计原理</li>
                    <li>性能优化技巧</li>
                    <li>浏览器兼容性</li>
                </ul>
            </div>
            
            <div class="showcase-item">
                <h3>数字卡片列表</h3>
                <ol class="numbered-card-list">
                    <li>HTML5 语义化标签</li>
                    <li>CSS3 动画效果</li>
                    <li>ES6 新特性</li>
                </ol>
            </div>
        </div>
    </div>
</body>
</html>

实际应用场景

功能特性列表

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>功能特性列表 - 代码号产品展示</title>
    <style>
        .feature-list-container {
            max-width: 1200px;
            margin: 50px auto;
            padding: 40px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 25px rgba(0,0,0,0.1);
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-top: 40px;
        }
        
        .feature-item {
            background: #f8f9fa;
            padding: 30px;
            border-radius: 10px;
            border-left: 4px solid #3498db;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .feature-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }
        
        .feature-icon {
            font-size: 2.5rem;
            color: #3498db;
            margin-bottom: 20px;
        }
        
        .feature-title {
            color: #2c3e50;
            font-size: 20px;
            margin-bottom: 15px;
            font-weight: 600;
        }
        
        .feature-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .feature-list li {
            padding: 10px 0;
            border-bottom: 1px solid #e9ecef;
            color: #495057;
            position: relative;
            padding-left: 25px;
        }
        
        .feature-list li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #28a745;
            font-weight: bold;
        }
        
        .feature-list li:last-child {
            border-bottom: none;
        }
        
        .cta-section {
            text-align: center;
            margin-top: 50px;
            padding: 30px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 10px;
        }
        
        .cta-button {
            display: inline-block;
            padding: 15px 40px;
            background: white;
            color: #667eea;
            text-decoration: none;
            border-radius: 6px;
            font-weight: 600;
            margin-top: 20px;
            transition: transform 0.3s ease;
        }
        
        .cta-button:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div class="feature-list-container">
        <h1 style="text-align: center; color: #2c3e50; margin-bottom: 20px;">
            代码号平台核心功能
        </h1>
        <p style="text-align: center; color: #6c757d; font-size: 18px;">
            多方位的学习体验，助力编程技能提升
        </p>
        
        <div class="feature-grid">
            <div class="feature-item">
                <div class="feature-icon">⚡</div>
                <h3 class="feature-title">学习资源</h3>
                <ul class="feature-list">
                    <li>系统化的课程体系</li>
                    <li>实战项目驱动学习</li>
                    <li>新技术文档</li>
                    <li>多语言支持</li>
                </ul>
            </div>
            
            <div class="feature-item">
                <div class="feature-icon">⚙️</div>
                <h3 class="feature-title">编程环境</h3>
                <ul class="feature-list">
                    <li>在线代码编辑器</li>
                    <li>实时预览功能</li>
                    <li>多语言支持</li>
                    <li>代码自动补全</li>
                </ul>
            </div>
            
            <div class="feature-item">
                <div class="feature-icon">⛏️</div>
                <h3 class="feature-title">社区支持</h3>
                <ul class="feature-list">
                    <li>技术讨论区</li>
                    <li>代码审查服务</li>
                    <li>学习小组功能</li>
                    <li>专家答疑</li>
                </ul>
            </div>
        </div>
        
        <div class="cta-section">
            <h2>开始您的编程之旅</h2>
            <p>加入代码号，探索编程的无限可能</p>
            <a href="https://www.ebingou.cn/" class="cta-button">立即体验</a>
        </div>
    </div>
</body>
</html>