使用 HTML + CSS 实现一个技术博客主页，效果如下图：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的个人博客 - 记录生活与技术成长</title>
<style>
/* 全局样式重置与基础配置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Microsoft YaHei", "Heiti SC", sans-serif;
}
body {
background-color: #f5f7fa;
color: #333;
line-height: 1.6;
}
a {
text-decoration: none;
color: #2f80ed;
transition: color 0.3s ease;
}
a:hover {
color: #165dff;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部导航样式 */
header {
background-color: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
position: sticky;
top: 0;
z-index: 999;
}
.nav-wrap {
display: flex;
justify-content: space-between;
align-items: center;
height: 60px;
}
.blog-logo {
font-size: 22px;
font-weight: bold;
color: #2f80ed;
}
.nav-menu {
display: flex;
list-style: none;
}
.nav-menu li {
margin-left: 30px;
}
.nav-menu a {
color: #333;
font-size: 16px;
}
.nav-menu a:hover {
color: #2f80ed;
}
/* 博客封面样式 */
.blog-banner {
background: linear-gradient(135deg, #2f80ed 0%, #56ccf2 100%);
color: #fff;
padding: 80px 0;
text-align: center;
margin-bottom: 40px;
}
.banner-title {
font-size: 40px;
margin-bottom: 16px;
}
.banner-desc {
font-size: 18px;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
}
/* 主要内容区域（文章列表 + 侧边栏） */
.main-content {
display: flex;
justify-content: space-between;
margin-bottom: 60px;
}
/* 文章列表样式 */
.article-list {
flex: 0 0 75%;
max-width: 75%;
}
.article-card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
padding: 30px;
margin-bottom: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.article-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.article-category {
display: inline-block;
background-color: #e8f3ff;
color: #2f80ed;
font-size: 12px;
padding: 4px 12px;
border-radius: 12px;
margin-bottom: 16px;
}
.article-title {
font-size: 24px;
margin-bottom: 12px;
}
.article-meta {
color: #999;
font-size: 14px;
margin-bottom: 16px;
display: flex;
align-items: center;
}
.article-meta span {
margin-right: 20px;
}
.article-desc {
color: #666;
font-size: 16px;
margin-bottom: 20px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.article-read {
display: inline-block;
font-size: 16px;
font-weight: 500;
padding: 8px 16px;
background-color: #2f80ed;
color: #fff;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.article-read:hover {
background-color: #165dff;
color: #fff;
}
/* 侧边栏样式 */
.sidebar {
flex: 0 0 23%;
max-width: 23%;
}
.sidebar-card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
padding: 25px;
margin-bottom: 20px;
}
.sidebar-title {
font-size: 18px;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 1px solid #f0f0f0;
}
/* 作者信息 */
.author-info {
text-align: center;
}
.author-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto 16px;
object-fit: cover;
border: 4px solid #e8f3ff;
}
.author-name {
font-size: 20px;
font-weight: bold;
margin-bottom: 8px;
}
.author-desc {
color: #666;
margin-bottom: 16px;
}
/* 热门标签 */
.tag-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag-item {
background-color: #f5f7fa;
color: #666;
padding: 6px 12px;
border-radius: 16px;
font-size: 14px;
}
.tag-item:hover {
background-color: #e8f3ff;
color: #2f80ed;
}
/* 热门文章 */
.hot-article-list {
list-style: none;
}
.hot-article-item {
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
}
.hot-article-item:last-child {
border-bottom: none;
}
.hot-article-item a {
color: #333;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.hot-article-item a:hover {
color: #2f80ed;
}
/* 底部信息样式 */
footer {
background-color: #333;
color: #ccc;
padding: 40px 0;
text-align: center;
}
.footer-desc {
margin-bottom: 16px;
font-size: 14px;
}
.footer-copyright {
font-size: 12px;
opacity: 0.8;
}
/* 响应式适配（移动端） */
@media (max-width: 768px) {
.nav-menu {
display: none;
}
.banner-title {
font-size: 30px;
}
.banner-desc {
font-size: 16px;
}
.main-content {
flex-direction: column;
}
.article-list, .sidebar {
flex: 0 0 100%;
max-width: 100%;
}
.sidebar {
margin-top: 40px;
}
}
</style>
</head>
<body>
<!-- 头部导航 -->
<header>
<div class="container nav-wrap">
<a href="#" class="blog-logo">我的博客</a>
<ul class="nav-menu">
<li><a href="#">首页</a></li>
<li><a href="#">技术文章</a></li>
<li><a href="#">生活随笔</a></li>
<li><a href="#">关于我</a></li>
</ul>
</div>
</header>
<!-- 博客封面 -->
<section class="blog-banner">
<div class="container">
<h1 class="banner-title">记录每一次的成长与感悟</h1>
<p class="banner-desc">专注于前端技术分享、编程经验总结，偶尔聊聊生活中的那些小美好</p>
</div>
</section>
<!-- 主要内容区域 -->
<div class="container main-content">
<!-- 文章列表 -->
<section class="article-list">
<div class="article-card">
<span class="article-category">前端技术</span>
<h2 class="article-title"><a href="#">纯 HTML + CSS 实现响应式博客首页（无 JS）</a></h2>
<div class="article-meta">
<span>发布时间：2026-01-31</span>
<span>阅读量：1289</span>
</div>
<p class="article-desc">本文详细介绍了如何仅使用 HTML 和 CSS 实现一个美观、整洁的个人博客首页，包含头部导航、文章列表、侧边栏等核心模块，同时支持移动端响应式适配，无需任何 JavaScript 代码。</p>
<a href="#" class="article-read">阅读全文</a>
</div>
<div class="article-card">
<span class="article-category">JavaScript</span>
<h2 class="article-title"><a href="#">JS 核心知识点：闭包的理解与实际应用</a></h2>
<div class="article-meta">
<span>发布时间：2026-01-28</span>
<span>阅读量：2567</span>
</div>
<p class="article-desc">闭包是 JavaScript 中的核心难点之一，也是面试中的高频考点。本文将从闭包的定义、形成条件、工作原理入手，结合多个实际开发场景案例，帮助你彻底理解闭包并熟练运用它解决问题。</p>
<a href="#" class="article-read">阅读全文</a>
</div>
<div class="article-card">
<span class="article-category">生活随笔</span>
<h2 class="article-title"><a href="#">编程路上的三年：从新手到进阶的感悟</a></h2>
<div class="article-meta">
<span>发布时间：2026-01-20</span>
<span>阅读量：896</span>
</div>
<p class="article-desc">回顾三年的编程学习与工作之路，从一开始对着代码无从下手，到现在能够独立完成项目开发，中间踩过无数的坑，也收获了很多成长。本文将分享我在编程路上的一些心得体会，希望能给新手朋友一些启发。</p>
<a href="#" class="article-read">阅读全文</a>
</div>
</section>
<!-- 侧边栏 -->
<aside class="sidebar">
<!-- 作者信息 -->
<div class="sidebar-card author-info">
<h3 class="sidebar-title">关于作者</h3>
<img src="https://picsum.photos/200/200" alt="作者头像" class="author-avatar">
<h4 class="author-name">编程爱好者</h4>
<p class="author-desc">专注前端开发，热爱分享技术与生活</p>
</div>
<!-- 热门标签 -->
<div class="sidebar-card">
<h3 class="sidebar-title">热门标签</h3>
<div class="tag-list">
<a href="#" class="tag-item">HTML</a>
<a href="#" class="tag-item">CSS</a>
<a href="#" class="tag-item">JavaScript</a>
<a href="#" class="tag-item">前端</a>
<a href="#" class="tag-item">响应式</a>
<a href="#" class="tag-item">生活随笔</a>
</div>
</div>
<!-- 热门文章 -->
<div class="sidebar-card">
<h3 class="sidebar-title">热门文章</h3>
<ul class="hot-article-list">
<li class="hot-article-item"><a href="#">JS 核心知识点：闭包的理解与实际应用</a></li>
<li class="hot-article-item"><a href="#">纯 HTML + CSS 实现响应式博客首页（无 JS）</a></li>
<li class="hot-article-item"><a href="#">CSS 弹性盒 Flex 布局完全指南</a></li>
<li class="hot-article-item"><a href="#">编程路上的三年：从新手到进阶的感悟</a></li>
</ul>
</div>
</aside>
</div>
<!-- 底部信息 -->
<footer>
<div class="container">
<p class="footer-desc">分享技术，记录生活 | 愿每一个编程爱好者都能在自己的路上闪闪发光</p>
<p class="footer-copyright">© 2026 我的个人博客 版权所有</p>
</div>
</footer>
</body>
</html>
川公网安备51010802032098