文章目录1. 页面开发思路2. list.html 完整页面代码3. 列表外层与标题 CSS4. 文章列表容器与条目基础样式5. 文章链接与 Flex 左右布局样式6. 缩略图图片样式7. 文章文字信息区域样式8. hover 悬浮交互样式9. 分页组件 CSS 样式10. 本篇小结1. 页面开发思路本篇只专注文章列表页list.html复用项目已有的头部、底部公共结构把文章列表做成带缩略图的图文条目排版更精致。列表项采用 Flex 左右布局左侧缩略图右侧文章信息增加圆角、阴影、hover 交互和首页卡片视觉风格统一保留分页组件配色继续沿用淡蓝色主题#4086d3、#f0f7ff、#cde3ff2. list.html 完整页面代码下面是文章列表完整 HTML 结构复用之前项目的 header、footermain 区域搭建标题、文章列表、分页模块。!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8!-- 适配移动端视口保证手机正常显示 --metanameviewportcontentwidthdevice-width, initial-scale1.0title文章列表 - HTMLCSS实战博客/title!-- 引入外部公共CSS样式文件 --linkrelstylesheethrefcss/style.css/headbodyheader!-- 容器限制内容宽度居中 --divclasscontainerdivclassheader-inner!-- 网站LOGO文字区域 --divclasslogoHTMLCSS实战/divnav!-- 导航菜单列表 --ulclassnav-listliahrefindex.html首页/a/liliahreflist.html文章列表/a/liliahrefabout.html关于本站/a/li/ul/nav/div/div/headermaindivclasscontainerdivclasslist-wraph2classlist-title全部文章/h2!-- 文章条目列表 --ulclassarticle-listliclassarticle-itemahrefarticle.htmlclassitem-linkdivclassitem-thumbimgsrchttps://picsum.photos/200/120alt文章缩略图/divdivclassitem-infoh3CSS Grid布局入门讲解/h3pGrid是强大的二维布局方案可以同时控制行与列非常适合卡片类排版。/pspanclassitem-time发布时间2026-10-01/span/div/a/liliclassarticle-itemahrefarticle.htmlclassitem-linkdivclassitem-thumbimgsrchttps://picsum.photos/200/120alt文章缩略图/divdivclassitem-infoh3Flex弹性布局实战技巧/h3pFlex一维布局适合导航、横向排列模块是前端开发高频布局方案。/pspanclassitem-time发布时间2026-10-03/span/div/a/liliclassarticle-itemahrefarticle.htmlclassitem-linkdivclassitem-thumbimgsrchttps://picsum.photos/200/120alt文章缩略图/divdivclassitem-infoh3CSS伪类与伪元素详解/h3p利用伪类伪元素可以在不新增HTML标签的前提下增加页面装饰与交互。/pspanclassitem-time发布时间2026-10-05/span/div/a/liliclassarticle-itemahrefarticle.htmlclassitem-linkdivclassitem-thumbimgsrchttps://picsum.photos/200/120alt文章缩略图/divdivclassitem-infoh3CSS媒体查询响应式开发/h3p使用media媒体查询在不同屏幕尺寸下自动切换页面布局实现手机端适配。/pspanclassitem-time发布时间2026-10-07/span/div/a/li/ul!-- 分页区域 --divclasspaginationahref#上一页/aahref#classactive1/aahref#2/aahref#3/aahref#下一页/a/div/div/div/mainfooter!-- 容器保持和头部内容宽度一致 --divclasscontainerp©2026 HTMLCSS实战博客 版权所有/p/div/footer/body/html重点说明页面整体结构和首页保持统一共用 header 和 footer文章列表使用 ulli 语义化列表每一条文章使用 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 变色、多行文字省略效果。最终效果如下