副队长HTML+CSS博客网站实战 (3)–首页主体：Grid 文章卡片 + 侧边栏布局

程序员大阳2026-10-14 11:33

文章目录

  • [1. 首页页面结构规划](#1. 首页页面结构规划)
  • [2. 首页外层两栏布局 CSS](#2. 首页外层两栏布局 CSS)
  • [3. 文章卡片容器 Grid 样式](#3. 文章卡片容器 Grid 样式)
  • [4. 侧边栏 CSS 样式](#4. 侧边栏 CSS 样式)
  • [5. index.html 完整页面代码](#5. index.html 完整页面代码)
  • [6. 本篇小结](#6. 本篇小结)

1. 首页页面结构规划

首页主体采用左右两栏布局，左侧是文章卡片列表区域，右侧是侧边栏。

  • 左侧主内容区：使用 Grid 布局排列文章卡片，每一张卡片包含图片、标题、简介、发布时间。
  • 右侧侧边栏：放置站点简介模块。

首页 main 内部整体结构：主容器包裹左右两大板块，后续使用 Grid 实现两栏自适应。

html 复制代码 
<main>
    <div class="container">
        <div class="home-wrap">
            <!-- 左侧文章卡片区域 -->
            <div class="article-card-wrap">
                <div class="article-card">
                    <div class="card-img">
                        <img src="https://picsum.photos/400/220" alt="文章配图">
                    </div>
                    <div class="card-text">
                        <h3>CSS Grid布局入门讲解</h3>
                        <p>Grid是强大的二维布局方案，可以同时控制行与列，非常适合卡片类排版。</p>
                        <span class="card-time">2026-10-01</span>
                    </div>
                </div>
                <div class="article-card">
                    <div class="card-img">
                        <img src="https://picsum.photos/400/220" alt="文章配图">
                    </div>
                    <div class="card-text">
                        <h3>Flex弹性布局实战技巧</h3>
                        <p>Flex一维布局，适合导航、横向排列模块，是前端开发高频布局方案。</p>
                        <span class="card-time">2026-10-03</span>
                    </div>
                </div>
                <div class="article-card">
                    <div class="card-img">
                        <img src="https://picsum.photos/400/220" alt="文章配图">
                    </div>
                    <div class="card-text">
                        <h3>CSS伪类与伪元素详解</h3>
                        <p>利用伪类伪元素，可以在不新增HTML标签的前提下，增加页面装饰与交互。</p>
                        <span class="card-time">2026-10-05</span>
                    </div>
                </div>
            </div>
            <!-- 右侧侧边栏 -->
            <aside class="sidebar">
                <div class="sidebar-box">
                    <h3>关于本站</h3>
                    <p>本网站是HTML+CSS纯静态实战项目，全程不使用JavaScript，练习前端基础布局能力。</p>
                </div>
            </aside>
        </div>
    </div>
</main>

代码解释：aside 标签语义上专门用来表示侧边栏，搜索引擎与屏幕阅读器可以识别这部分是附属补充信息，语义优于普通 div。

2. 首页外层两栏布局 CSS

打开 style.css，继续追加样式。home-wrap 开启 Grid，划分左侧主内容和右侧侧边栏。

css 复制代码 
/* 首页主体左右两栏容器 */
.home-wrap {
    display: grid;
    /* 左侧自适应，侧边栏固定宽度300px */
    grid-template-columns: 1fr 300px;
    gap: 30px;
    margin: 40px 0;
}

代码解释：1fr 代表剩余可用空间，意思是左侧区域自动占满剩下所有宽度，右侧固定 300px，这是 Grid 实现左右分栏非常简洁的写法。

此时效果如下：

3. 文章卡片容器 Grid 样式

文章卡片容器开启 Grid，设置每行 2 张卡片，卡片之间设置间距。

css 复制代码 
/* 文章卡片外层容器 */
.article-card-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

/* 单张文章卡片 */
.article-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    /* 增加过渡，hover效果平滑 */
    transition: box-shadow 0.3s;
}

/* 卡片悬浮效果 */
.article-card:hover {
    box-shadow: 0 4px 12px #b7d4f5;
}

/* 卡片图片区域 */
.card-img img {
    width: 100%;
}

/* 卡片文字区域 */
.card-text {
    padding: 16px;
}

.card-text h3 {
    font-size: 18px;
    margin-bottom:10px;
    color:#222;
}

.card-text p {
    font-size:14px;
    color:#666;
    margin-bottom:12px;
}

.card-time {
    font-size:12px;
    color:#999;
}

此时效果如下：

4. 侧边栏 CSS 样式

css 复制代码 
/* 侧边栏盒子 */
.sidebar-box {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
}

.sidebar-box h3 {
    font-size:18px;
    margin-bottom:14px;
    padding-bottom:8px;
    border-bottom: 2px solid #4086d3;
}

.sidebar-box p {
    font-size:14px;
    color:#555;
}

此时侧边栏效果如下：

5. index.html 完整页面代码

把前面写好的 header、main、footer 整合，得到完整首页文件。

html 复制代码 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 适配移动端视口，保证手机正常显示 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页 - HTML+CSS实战博客</title>
    <!-- 引入外部公共CSS样式文件 -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <!-- 容器，限制内容宽度居中 -->
        <div class="container">
            <div class="header-inner">
                <!-- 网站LOGO文字区域 -->
                <div class="logo">HTML+CSS实战</div>
                <nav>
                    <!-- 导航菜单列表 -->
                    <ul class="nav-list">
                        <li><a href="index.html">首页</a></li>
                        <li><a href="list.html">文章列表</a></li>
                        <li><a href="about.html">关于本站</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <main>
        <div class="container">
            <div class="home-wrap">
                <!-- 左侧文章卡片区域 -->
                <div class="article-card-wrap">
                    <div class="article-card">
                        <div class="card-img">
                            <img src="https://picsum.photos/400/220" alt="文章配图">
                        </div>
                        <div class="card-text">
                            <h3>CSS Grid布局入门讲解</h3>
                            <p>Grid是强大的二维布局方案，可以同时控制行与列，非常适合卡片类排版。</p>
                            <span class="card-time">2026-10-01</span>
                        </div>
                    </div>
                    <div class="article-card">
                        <div class="card-img">
                            <img src="https://picsum.photos/400/220" alt="文章配图">
                        </div>
                        <div class="card-text">
                            <h3>Flex弹性布局实战技巧</h3>
                            <p>Flex一维布局，适合导航、横向排列模块，是前端开发高频布局方案。</p>
                            <span class="card-time">2026-10-03</span>
                        </div>
                    </div>
                    <div class="article-card">
                        <div class="card-img">
                            <img src="https://picsum.photos/400/220" alt="文章配图">
                        </div>
                        <div class="card-text">
                            <h3>CSS伪类与伪元素详解</h3>
                            <p>利用伪类伪元素，可以在不新增HTML标签的前提下，增加页面装饰与交互。</p>
                            <span class="card-time">2026-10-05</span>
                        </div>
                    </div>
                </div>
                <!-- 右侧侧边栏 -->
                <aside class="sidebar">
                    <div class="sidebar-box">
                        <h3>关于本站</h3>
                        <p>本网站是HTML+CSS纯静态实战项目，全程不使用JavaScript，练习前端基础布局能力。</p>
                    </div>
                </aside>
            </div>
        </div>
    </main>
    <footer>
        <!-- 容器，保持和头部内容宽度一致 -->
        <div class="container">
            <p>©2026 HTML+CSS实战博客 版权所有</p>
        </div>
    </footer>
</body>
</html>

css到目前位置，全部代码如下：

css 复制代码 
/* 全局统一重置 */
* {
    margin: 0;
    padding: 0;
    /* 边框和内边距不会撑大元素总宽度，布局核心属性 */
    box-sizing: border-box;
}

/* 清除ul默认列表圆点 */
ul {
    list-style: none;
}

/* a标签样式重置 */
a {
    text-decoration: none;
    /* 文字颜色继承父元素 */
    color: inherit;
}

/* 图片通用设置 */
img {
    max-width: 100%;
    /* 消除图片底部默认空白缝隙 */
    display: block;
}.

/* 页面基础全局样式 */
body {
    font-family: "Microsoft Yahei", sans-serif;
    color: #333;
    /* 页面背景使用极浅的蓝色，视觉柔和不刺眼 */
    background-color: #f0f7ff;
    /* 行高，优化文字阅读体验 */
    line-height: 1.6;
}

/* 内容容器，用来实现区块居中，统一宽度 */
.container {
    width: 1200px;
    margin: 0 auto;
}

/* 头部区域样式，淡蓝色主题 */
header {
    background-color: #4086d3;
    color: #fff;
}

/* 头部内部盒子，弹性布局，左右分开 */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}

/* 导航列表开启弹性布局，横向排列 */
.nav-list {
    display: flex;
    /* 设置列表项之间的间距 */
    gap: 30px;
}

/* 导航链接过渡效果 */
.nav-list a {
    transition: color 0.3s;
}

/* 鼠标悬浮导航文字变色 */
.nav-list a:hover {
    color: #cde3ff;
}

/* 底部版权区域，和头部配色保持统一 */
footer {
    background-color: #4086d3;
    color: #fff;
    text-align: center;
    padding:20px 0;
    margin-top:40px;
}


.home-wrap {
    display: grid;
    /* 左侧自适应，侧边栏固定宽度300px */
    grid-template-columns: 1fr 300px;
    gap: 30px;
    margin: 40px 0;
}

/* 文章卡片外层容器 */
.article-card-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

/* 单张文章卡片 */
.article-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    /* 增加过渡，hover效果平滑 */
    transition: box-shadow 0.3s;
}

/* 卡片悬浮效果 */
.article-card:hover {
    box-shadow: 0 4px 12px #b7d4f5;
}

/* 卡片图片区域 */
.card-img img {
    width: 100%;
}

/* 卡片文字区域 */
.card-text {
    padding: 16px;
}

.card-text h3 {
    font-size: 18px;
    margin-bottom:10px;
    color:#222;
}

.card-text p {
    font-size:14px;
    color:#666;
    margin-bottom:12px;
}

.card-time {
    font-size:12px;
    color:#999;
}


/* 侧边栏盒子 */
.sidebar-box {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
}

.sidebar-box h3 {
    font-size:18px;
    margin-bottom:14px;
    padding-bottom:8px;
    border-bottom: 2px solid #4086d3;
}

.sidebar-box p {
    font-size:14px;
    color:#555;
}

最终网站整体效果如下：

6. 本篇小结

本篇完成首页主体部分开发，使用 Grid 实现页面左右分栏，文章卡片区域同样使用 Grid 实现两列卡片布局，添加 hover 阴影过渡效果。

相关推荐
程序员Sunday1 小时前
Flex 和 Grid 有什么区别？一维布局、二维布局怎么选？
前端·css·面试
爱喝水的小周2 小时前
实验十一 Vuex 实现王者荣耀后台比赛管理系统
前端·css·html
橘猫走江湖2 小时前
浮动塌陷复现失败：父元素为什么一直不塌
前端·css
ShineWinsu3 小时前
对于HTML：HTML常见标签的解析—下
前端·css·面试·html·标签·表单·emmet
倒头就睡的小比特3 小时前
HTML代码框架+标签初识1
html
程序员大阳15 小时前
副队长CSS教程(33)–圆角与透明
前端·css·透明·圆角
IMPYLH16 小时前
HTML 的 ＜wbr＞ 元素
前端·html
溪语流沙20 小时前
【每天一个CSS | Day21】落地页Hero动画的分镜表
前端·css
zhaiyy1 天前
HTML Popover API 实践
前端·javascript·html
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02历年考研数学一、数学二、数学三真题试卷及答案PDF03GitHub 镜像站点04「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06如何新建文件夹？ 电脑新建文件夹的4种方法07Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）08几个好用的ip纯净度检测网站09Telegram APK 下载安装完整指南 — 2026年最新10微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新