CSS 教程

<div class="container"> 
    <div class="item">居中内容</div> 
</div> 

<style> 
.container { /* 选择器：class 为 container 的元素 */
    display: flex; /* 属性：display，设置为 flex，创建一个块级弹性容器 */
    justify-content: center; /* 属性：justify-content，设置弹性项目在主轴上居中对齐 */
    align-items: center; /* 属性：align-items，设置弹性项目在交叉轴上居中对齐 */
    height: 200px; /* 属性：height，设置容器高度为 200 像素 */
    background-color: #f0f0f0; /* 属性：background-color，设置背景颜色为浅灰色 */
}

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

<nav class="navbar"> 
    <div class="logo">Logo</div> 
    <ul class="nav-links"> 
        <li><a href="#">首页</a></li> 
        <li><a href="#">关于我们</a></li> 
        <li><a href="#">服务</a></li> 
        <li><a href="#">联系我们</a></li> 
    </ul> 
</nav> 

<style> 
.navbar { /* 选择器：class 为 navbar 的元素 */
    display: flex; /* 属性：display，设置为 flex，创建一个块级弹性容器 */
    justify-content: space-between; /* 属性：justify-content，设置弹性项目在主轴上两端对齐，中间留白 */
    align-items: center; /* 属性：align-items，设置弹性项目在交叉轴上居中对齐 */
    padding: 10px 20px; /* 属性：padding，设置内边距：上下 10 像素，左右 20 像素 */
    background-color: #333; /* 属性：background-color，设置背景颜色为深灰色 */
    color: white; /* 属性：color，设置文本颜色为白色 */
}

.nav-links { /* 选择器：class 为 nav-links 的元素 */
    display: flex; /* 属性：display，设置为 flex，创建一个块级弹性容器 */
    list-style: none; /* 属性：list-style，设置列表样式为无（移除默认项目符号） */
    gap: 20px; /* 属性：gap，设置弹性项目之间的间距为 20 像素 */
}

.nav-links a { /* 选择器：nav-links 内的 a 元素 */
    color: white; /* 属性：color，设置文本颜色为白色 */
    text-decoration: none; /* 属性：text-decoration，设置文本装饰为无（移除默认下划线） */
}
</style> 

<div class="card-container"> 
    <div class="card">卡片 1</div> 
    <div class="card">卡片 2</div> 
    <div class="card">卡片 3</div> 
    <div class="card">卡片 4</div> 
</div> 

<style> 
.card-container { /* 选择器：class 为 card-container 的元素 */
    display: flex; /* 属性：display，设置为 flex，创建一个块级弹性容器 */
    flex-wrap: wrap; /* 属性：flex-wrap，设置弹性项目在容器空间不足时换行 */
    gap: 20px; /* 属性：gap，设置弹性项目之间的间距为 20 像素 */
    padding: 20px; /* 属性：padding，设置内边距为 20 像素（四个方向） */
}

.card { /* 选择器：class 为 card 的元素 */
    flex: 1 1 200px; /* 属性：flex，设置为 1 1 200px，表示会放大也会缩小，初始尺寸为 200 像素 */
    padding: 20px; /* 属性：padding，设置内边距为 20 像素（四个方向） */
    background-color: #f0f0f0; /* 属性：background-color，设置背景颜色为浅灰色 */
    border-radius: 4px; /* 属性：border-radius，设置圆角为 4 像素 */
    text-align: center; /* 属性：text-align，设置文本对齐方式为居中 */
}
</style> 

<div class="holy-grail"> 
    <header>头部</header> 
    <main class="content"> 
        <aside class="left-sidebar">左侧边栏</aside> 
        <section class="main-content">主内容</section> 
        <aside class="right-sidebar">右侧边栏</aside> 
    </main> 
    <footer>底部</footer> 
</div> 

<style> 
.holy-grail { /* 选择器：class 为 holy-grail 的元素 */
    display: flex; /* 属性：display，设置为 flex，创建一个块级弹性容器 */
    flex-direction: column; /* 属性：flex-direction，设置主轴为垂直方向，弹性项目垂直排列 */
    min-height: 100vh; /* 属性：min-height，设置最小高度为 100 视口高度，确保占满整个屏幕 */
}

header, footer { /* 选择器：header 和 footer 元素 */
    padding: 20px; /* 属性：padding，设置内边距为 20 像素（四个方向） */
    background-color: #333; /* 属性：background-color，设置背景颜色为深灰色 */
    color: white; /* 属性：color，设置文本颜色为白色 */
}

.content { /* 选择器：class 为 content 的元素 */
    display: flex; /* 属性：display，设置为 flex，创建一个块级弹性容器 */
    flex: 1; /* 属性：flex，设置为 1，使主内容区域占据剩余空间 */
}

.left-sidebar, .right-sidebar { /* 选择器：class 为 left-sidebar 和 right-sidebar 的元素 */
    flex: 0 0 200px; /* 属性：flex，设置为 0 0 200px，表示不放大也不缩小，固定宽度为 200 像素 */
    background-color: #f0f0f0; /* 属性：background-color，设置背景颜色为浅灰色 */
    padding: 20px; /* 属性：padding，设置内边距为 20 像素（四个方向） */
}

.main-content { /* 选择器：class 为 main-content 的元素 */
    flex: 1; /* 属性：flex，设置为 1，使主内容区域占据剩余空间 */
    padding: 20px; /* 属性：padding，设置内边距为 20 像素（四个方向） */
    background-color: #ffffff; /* 属性：background-color，设置背景颜色为白色 */
}
</style>