CSS 教程

<div class="grid-container"> 
    <div class="item">1</div> 
    <div class="item">2</div> 
    <div class="item">3</div> 
    <div class="item">4</div> 
    <div class="item">5</div> 
    <div class="item">6</div> 
</div> 

<style> 
.grid-container { /* 选择器：class 为 grid-container 的元素 */
    display: grid; /* 属性：display，设置为 grid，创建一个块级网格容器 */
    grid-template-columns: repeat(3, 1fr); /* 属性：grid-template-columns，使用 repeat 函数定义 3 列，每列宽度为 1 份剩余空间 */
    grid-template-rows: repeat(2, 100px); /* 属性：grid-template-rows，使用 repeat 函数定义 2 行，每行高度为 100 像素 */
    gap: 10px; /* 属性：gap，设置网格项目之间的间隙为 10 像素 */
}

.item { /* 选择器：class 为 item 的元素 */
    background-color: #e0f7fa; /* 属性：background-color，设置背景颜色为浅蓝色 */
    padding: 20px; /* 属性：padding，设置内边距为 20 像素（四个方向） */
    text-align: center; /* 属性：text-align，设置文本对齐方式为居中 */
    border-radius: 4px; /* 属性：border-radius，设置圆角为 4 像素 */
}
</style> 

<div class="responsive-grid"> 
    <div class="item">1</div> 
    <div class="item">2</div> 
    <div class="item">3</div> 
    <div class="item">4</div> 
    <div class="item">5</div> 
</div> 

<style> 
.responsive-grid { /* 选择器：class 为 responsive-grid 的元素 */
    display: grid; /* 属性：display，设置为 grid，创建一个块级网格容器 */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 属性：grid-template-columns，使用 repeat(auto-fit, minmax(200px, 1fr)) 创建自适应网格，每列最小宽度为 200 像素，最大为 1 份剩余空间 */
    gap: 10px; /* 属性：gap，设置网格项目之间的间隙为 10 像素 */
}

.item { /* 选择器：class 为 item 的元素 */
    background-color: #e8f5e8; /* 属性：background-color，设置背景颜色为浅绿色 */
    padding: 20px; /* 属性：padding，设置内边距为 20 像素（四个方向） */
    text-align: center; /* 属性：text-align，设置文本对齐方式为居中 */
    border-radius: 4px; /* 属性：border-radius，设置圆角为 4 像素 */
}
</style> 

<div class="complex-layout"> 
    <header class="header">头部</header> 
    <aside class="sidebar">侧边栏</aside> 
    <main class="main">主内容</main> 
    <section class="widget1">小部件 1</section> 
    <section class="widget2">小部件 2</section> 
    <footer class="footer">底部</footer> 
</div> 

<style> 
.complex-layout { /* 选择器：class 为 complex-layout 的元素 */
    display: grid; /* 属性：display，设置为 grid，创建一个块级网格容器 */
    grid-template-columns: 200px 1fr 1fr; /* 属性：grid-template-columns，定义 3 列，宽度分别为 200 像素、1 份、1 份剩余空间 */
    grid-template-rows: auto 1fr auto auto; /* 属性：grid-template-rows，定义 4 行，高度分别为自动、1 份剩余空间、自动、自动 */
    grid-template-areas: /* 属性：grid-template-areas，定义网格区域布局 */
        "header header header" /* 第一行：整个行都是 header 区域 */
        "sidebar main main" /* 第二行：左侧是 sidebar 区域，中间和右侧是 main 区域 */
        "sidebar widget1 widget2" /* 第三行：左侧是 sidebar 区域，中间是 widget1 区域，右侧是 widget2 区域 */
        "footer footer footer"; /* 第四行：整个行都是 footer 区域 */
    gap: 10px; /* 属性：gap，设置网格区域之间的间隙为 10 像素 */
    min-height: 100vh; /* 属性：min-height，设置最小高度为 100 视口高度，确保占满整个屏幕 */
}

.header { /* 选择器：class 为 header 的元素 */
    grid-area: header; /* 属性：grid-area，将元素分配到 header 区域 */
    background-color: #333; /* 属性：background-color，设置背景颜色为深灰色 */
    color: white; /* 属性：color，设置文本颜色为白色 */
    padding: 20px; /* 属性：padding，设置内边距为 20 像素（四个方向） */
}

.sidebar { /* 选择器：class 为 sidebar 的元素 */
    grid-area: sidebar; /* 属性：grid-area，将元素分配到 sidebar 区域 */
    background-color: #f0f0f0; /* 属性：background-color，设置背景颜色为浅灰色 */
    padding: 20px; /* 属性：padding，设置内边距为 20 像素（四个方向） */
}

.main { /* 选择器：class 为 main 的元素 */
    grid-area: main; /* 属性：grid-area，将元素分配到 main 区域 */
    background-color: #ffffff; /* 属性：background-color，设置背景颜色为白色 */
    padding: 20px; /* 属性：padding，设置内边距为 20 像素（四个方向） */
}

.widget1 { /* 选择器：class 为 widget1 的元素 */
    grid-area: widget1; /* 属性：grid-area，将元素分配到 widget1 区域 */
    background-color: #e3f2fd; /* 属性：background-color，设置背景颜色为浅蓝色 */
    padding: 20px; /* 属性：padding，设置内边距为 20 像素（四个方向） */
}

.widget2 { /* 选择器：class 为 widget2 的元素 */
    grid-area: widget2; /* 属性：grid-area，将元素分配到 widget2 区域 */
    background-color: #e8f5e8; /* 属性：background-color，设置背景颜色为浅绿色 */
    padding: 20px; /* 属性：padding，设置内边距为 20 像素（四个方向） */
}

.footer { /* 选择器：class 为 footer 的元素 */
    grid-area: footer; /* 属性：grid-area，将元素分配到 footer 区域 */
    background-color: #333; /* 属性：background-color，设置背景颜色为深灰色 */
    color: white; /* 属性：color，设置文本颜色为白色 */
    padding: 20px; /* 属性：padding，设置内边距为 20 像素（四个方向） */
}
</style> 

<div class="card-grid">
    <div class="card">
        <h3>卡片 1</h3>
        <p>这是一张卡片内容</p>
    </div>
    <div class="card">
        <h3>卡片 2</h3>
        <p>这是一张卡片内容</p>
    </div>
    <div class="card">
        <h3>卡片 3</h3>
        <p>这是一张卡片内容</p>
    </div>
    <div class="card">
        <h3>卡片 4</h3>
        <p>这是一张卡片内容</p>
    </div>
    <div class="card">
        <h3>卡片 5</h3>
        <p>这是一张卡片内容</p>
    </div>
</div>

<style>
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px;
}

.card {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 20px;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

.card h3 {
    margin-top: 0;
    color: #333;
}

.card p {
    color: #666;
}
</style>