企业官网建设流程全解析

1. 页面开发思路

本篇只专注文章列表页list.html，复用项目已有的头部、底部公共结构，把文章列表做成带缩略图的图文条目，排版更精致。

• 列表项采用 Flex 左右布局：左侧缩略图，右侧文章信息
• 增加圆角、阴影、hover 交互，和首页卡片视觉风格统一
• 保留分页组件，配色继续沿用淡蓝色主题：#4086d3、#f0f7ff、#cde3ff

2. list.html 完整页面代码

下面是文章列表完整 HTML 结构，复用之前项目的 header、footer，main 区域搭建标题、文章列表、分页模块。

<!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="list-wrap"><h2class="list-title">全部文章</h2><!-- 文章条目列表 --><ulclass="article-list"><liclass="article-item"><ahref="article.html"class="item-link"><divclass="item-thumb"><imgsrc="https://picsum.photos/200/120"alt="文章缩略图"></div><divclass="item-info"><h3>CSS Grid布局入门讲解</h3><p>Grid是强大的二维布局方案，可以同时控制行与列，非常适合卡片类排版。</p><spanclass="item-time">发布时间：2026-10-01</span></div></a></li><liclass="article-item"><ahref="article.html"class="item-link"><divclass="item-thumb"><imgsrc="https://picsum.photos/200/120"alt="文章缩略图"></div><divclass="item-info"><h3>Flex弹性布局实战技巧</h3><p>Flex一维布局，适合导航、横向排列模块，是前端开发高频布局方案。</p><spanclass="item-time">发布时间：2026-10-03</span></div></a></li><liclass="article-item"><ahref="article.html"class="item-link"><divclass="item-thumb"><imgsrc="https://picsum.photos/200/120"alt="文章缩略图"></div><divclass="item-info"><h3>CSS伪类与伪元素详解</h3><p>利用伪类伪元素，可以在不新增HTML标签的前提下，增加页面装饰与交互。</p><spanclass="item-time">发布时间：2026-10-05</span></div></a></li><liclass="article-item"><ahref="article.html"class="item-link"><divclass="item-thumb"><imgsrc="https://picsum.photos/200/120"alt="文章缩略图"></div><divclass="item-info"><h3>CSS媒体查询响应式开发</h3><p>使用@media媒体查询，在不同屏幕尺寸下自动切换页面布局，实现手机端适配。</p><spanclass="item-time">发布时间：2026-10-07</span></div></a></li></ul><!-- 分页区域 --><divclass="pagination"><ahref="#">上一页</a><ahref="#"class="active">1</a><ahref="#">2</a><ahref="#">3</a><ahref="#">下一页</a></div></div></div></main><footer><!-- 容器，保持和头部内容宽度一致 --><divclass="container"><p>©2026 HTML+CSS实战博客 版权所有</p></div></footer></body></html>

重点说明：页面整体结构和首页保持统一，共用 header 和 footer；文章列表使用 ul+li 语义化列表；每一条文章使用 a 标签包裹，点击整行都可以跳转文章详情。

3. 列表外层与标题 CSS

下面先写列表容器和标题样式，控制整体外边距、标题左侧蓝色标识条。追加到style.css原有样式后面。

/* 文章列表外层容器 */ .list-wrap { margin:40px 0; } .list-title { font-size:24px; color:#333; margin-bottom:24px; padding-left:12px; border-left:4px solid #4086d3; }

重点说明：左侧蓝色竖线是装饰性边框，用 border-left 实现，不用额外增加 HTML 标签，简化结构。

效果：

4. 文章列表容器与条目基础样式

下面设置列表外框白色底色、圆角、阴影，以及每个文章条目分隔边框。

/* 文章列表容器 */.article-list{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #d8e8f8;}/* 单篇文章条目 */.article-item{border-bottom:1px solid #eee;}/* 最后一条取消下边框 */.article-item:last-child{border-bottom:none;}

重点说明：overflow:hidden配合父容器 border-radius，用来把内部内容裁切，保证圆角正常显示；:last-child伪类选中最后一个条目，去掉多余底边框。

效果：

5. 文章链接与 Flex 左右布局样式

设置 a 链接开启 flex 布局，实现左图右文排版，取消默认下划线。

.item-link{display:flex;gap:20px;padding:20px;align-items:center;/* 取消a标签默认下划线 */text-decoration:none;}

重点说明：display:flex开启弹性布局，gap直接设置左右两大块之间的间距，比 margin 写法更简洁。

效果：

6. 缩略图图片样式

控制缩略图盒子尺寸，固定大小，图片不变形自动裁切。

/* 缩略图盒子 */.item-thumb{width:200px;height:120px;border-radius:6px;overflow:hidden;flex-shrink:0;}.item-thumb img{width:100%;height:100%;/* 图片保持比例填满盒子，裁切多余部分 */object-fit:cover;}

重点说明：flex-shrink:0禁止缩略图盒子被压缩；object-fit:cover保证图片不变形，填满盒子，超出部分裁切。

效果：

7. 文章文字信息区域样式

设置标题、摘要、发布时间的字体、颜色，实现摘要最多两行，超出文字省略。

/* 文章文字信息区域 */.item-info{flex:1;}.item-info h3{font-size:18px;margin-bottom:8px;color:#222;}.item-info p{color:#666;font-size:14px;margin-bottom:8px;/* 文字最多显示2行，超出省略 */display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}.item-time{font-size:12px;color:#999;}

重点说明：flex:1让文字区域自动占满剩余宽度；-webkit-line-clamp是 webkit 内核浏览器实现多行文字截断的方案，适合文章摘要。

效果：

8. hover 悬浮交互样式

鼠标悬浮条目时，背景变色，标题文字切换为主色调。

/* hover交互效果 */.article-item:hover .item-link{background-color:#f0f7ff;}.article-item:hover h3{color:#4086d3;}

重点说明：使用后代选择器，hover 父元素，修改内部子元素样式，不用 JS 即可实现交互。

效果，当鼠标悬停时，背景色，标题颜色变化：

9. 分页组件 CSS 样式

分页居中布局，设置页码底色、圆角、hover 效果，当前页高亮。

/* 分页样式 */.pagination{margin-top:30px;display:flex;gap:10px;justify-content:center;}.pagination a{display:block;width:48px;height:36px;text-align:center;line-height:36px;background:#fff;border-radius:4px;transition:background-color 0.3s;text-decoration:none;color:#333;}.pagination a.active{background-color:#4086d3;color:#fff;}.pagination a:hover:not(.active){background-color:#cde3ff;}

重点说明：line-height和盒子高度相等，实现单行文字垂直居中；:not(.active)表示排除当前激活页码，只给普通页码添加 hover 背景。

效果：

10. 本篇小结

本篇完成美化后的图文文章列表页面，采用 Flex 实现左图右文布局，增加卡片阴影、hover 变色、多行文字省略效果。

最终效果如下：