企业官网建设流程全解析

1. 首页页面结构规划

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

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

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

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

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

2. 首页外层两栏布局 CSS

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

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

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

此时效果如下：

3. 文章卡片容器 Grid 样式

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

/* 文章卡片外层容器 */.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 样式

/* 侧边栏盒子 */.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 整合，得到完整首页文件。

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

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 阴影过渡效果。