1. 页面开发思路

本篇开发关于页面about.html，继续复用网站公共头部与底部。关于页采用单栏布局，不需要侧边栏，适合展示站点介绍、作者信息。

• 页面结构：页面标题、介绍段落、个人信息卡片
• 样式风格：延续项目淡蓝色主题，圆角、阴影保持和全站统一

2. about.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><linkrel="stylesheet"href="css/style.css"></head><body><header><divclass="container"><divclass="header-inner"><divclass="logo">HTML+CSS实战</div><nav><ulclass="nav-list"><li><ahref="index.html">首页</a></li><li><ahref="list.html">文章列表</a></li><li><ahref="article.html">文章详情</a></li><li><ahref="about.html">关于本站</a></li></ul></nav></div></div></header><main><divclass="container"><divclass="about-wrap"><h2class="about-title">关于本站</h2><divclass="about-card"><divclass="about-img"><imgsrc="https://picsum.photos/200/200"alt="站点配图"></div><divclass="about-text"><h3>副队长前端教程</h3><p>这个网站是HTML+CSS静态实战项目，用来练习前端基础布局。整个网站由多个页面组成，包含首页、文章列表、文章详情、关于页面。</p><p>项目全程只使用HTML和CSS，不使用JavaScript。我们练习了Flex、Grid、伪类、过渡、阴影等大量CSS知识点。</p><p>如果你正在学习前端基础，跟着这个项目一步步搭建，可以快速掌握多页面网站的开发思路。</p></div></div><divclass="about-desc"><h3>项目技术栈</h3><ul><li>HTML：搭建页面语义化结构</li><li>CSS：Flex、Grid、选择器、圆角、阴影、过渡等样式</li></ul></div></div></div></main><footer><divclass="container"><p>©2026 HTML+CSS实战博客 版权所有</p></div></footer></body></html>

重点说明：导航增加「关于本站」的跳转链接，保证全站页面之间可以互相访问；about-card 使用图文布局，ul 列表用来罗列项目技术栈，保持语义化。

当前效果：

3. 外层容器与页面标题 CSS

下面编写外层容器和页面标题样式，追加到 style.css 原有样式后面。

/* 关于页面外层容器 */.about-wrap{margin:40px 0;}.about-title{font-size:24px;color:#333;margin-bottom:24px;padding-left:12px;border-left:4px solid #4086d3;}

重点说明：标题样式和文章列表页标题保持一致，统一网站视觉风格；左侧蓝色竖线装饰，不用额外标签。

当前效果：

4. 个人信息卡片外层与 Flex 布局 CSS

卡片使用 Flex 实现左图右文，白色底色，圆角加阴影，和全站卡片风格统一。

/* 关于信息卡片 */.about-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px #d8e8f8;padding:30px;display:flex;gap:30px;align-items:flex-start;}

重点说明：align-items: flex-start，图片和文字区域顶部对齐，而不是垂直居中；padding 写在卡片容器上，不用给内部元素单独设置边距。

当前效果：

5. 卡片图片样式 CSS

控制图片盒子大小，设置圆角，裁切图片。

/* 卡片图片区域 */.about-img{width:200px;height:200px;border-radius:8px;overflow:hidden;flex-shrink:0;}.about-img img{width:100%;height:100%;object-fit:cover;}

重点说明：flex-shrink:0固定图片盒子尺寸，不会被文字挤压变形；object-fit:cover保证图片不变形，超出部分裁切。

当前效果：

6. 卡片文字区域 CSS

设置标题和段落样式，调整行高优化阅读体验。

/* 卡片文字区域 */.about-text{flex:1;}.about-text h3{font-size:22px;color:#222;margin-bottom:16px;}.about-text p{font-size:16px;line-height:1.8;color:#444;margin-bottom:12px;}

重点说明：flex:1让文字区域自动占满卡片剩余空间；line-height:1.8 保持和文章详情页正文阅读风格一致。

当前效果：

7. 项目介绍模块 about-desc 样式 CSS

技术介绍板块，放在卡片下方，使用白色背景，展示项目技术栈列表。

/* 项目说明板块 */.about-desc{background:#fff;border-radius:8px;box-shadow:0 2px 8px #d8e8f8;padding:24px 30px;margin-top:30px;}.about-desc h3{font-size:20px;color:#222;margin-bottom:16px;}.about-desc li{font-size:16px;line-height:1.8;color:#444;margin-left:20px;}

重点说明：margin-top 设置板块之间的间距，两个白色卡片上下分开；li 增加左侧外边距，默认项目符号正常显示。

最终效果：

8. 本篇小结

本篇完成关于页面 about.html 的开发，采用单栏页面布局，使用 Flex 实现卡片内图文排版；页面风格、卡片阴影、配色和全站页面保持统一。