<!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: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
background-color: #f8f9fa;
color: #333;
line-height: 1.6;
}
a {
text-decoration: none;
color: #2c3e50;
transition: color 0.3s;
}
a:hover {
color: #3498db;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 顶部导航 */
header {
background-color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 100;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
color: #2c3e50;
}
.logo span {
color: #3498db;
}
nav ul {
display: flex;
list-style: none;
}
nav ul li {
margin-left: 30px;
}
nav ul li a {
font-weight: 500;
}
/* 主要内容区域 */
.main-content {
display: flex;
margin: 40px 0;
gap: 30px;
}
/* 文章列表 */
.posts {
flex: 2;
}
.post {
background-color: #fff;
border-radius: 8px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s, box-shadow 0.3s;
}
.post:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.post-meta {
display: flex;
margin-bottom: 15px;
color: #7f8c8d;
font-size: 0.9rem;
}
.post-date, .post-category {
margin-right: 20px;
}
.post-title {
font-size: 1.8rem;
margin-bottom: 15px;
color: #2c3e50;
}
.post-excerpt {
color: #555;
margin-bottom: 20px;
line-height: 1.7;
}
.read-more {
display: inline-block;
color: #3498db;
font-weight: 500;
border-bottom: 2px solid transparent;
}
.read-more:hover {
border-bottom: 2px solid #3498db;
}
/* 侧边栏 */
.sidebar {
flex: 1;
}
.sidebar-widget {
background-color: #fff;
border-radius: 8px;
padding: 25px;
margin-bottom: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.widget-title {
font-size: 1.3rem;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 2px solid #f0f0f0;
color: #2c3e50;
}
.widget-list {
list-style: none;
}
.widget-list li {
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px dashed #eee;
}
.widget-list li:last-child {
border-bottom: none;
}
.about-author {
text-align: center;
}
.author-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto 15px;
background-color: #3498db;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
font-weight: bold;
}
.author-bio {
color: #666;
font-size: 0.95rem;
}
/* 标签云 */
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tag {
background-color: #f1f8ff;
padding: 5px 12px;
border-radius: 20px;
font-size: 0.85rem;
color: #3498db;
}
.tag:hover {
background-color: #3498db;
color: white;
}
/* 页脚 */
footer {
background-color: #2c3e50;
color: #ecf0f1;
padding: 50px 0 20px;
margin-top: 50px;
}
.footer-content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.footer-column {
flex: 1;
min-width: 250px;
margin-bottom: 30px;
}
.footer-title {
font-size: 1.2rem;
margin-bottom: 20px;
color: #fff;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links a {
color: #bdc3c7;
}
.footer-links a:hover {
color: #3498db;
}
.copyright {
text-align: center;
padding-top: 20px;
border-top: 1px solid #34495e;
color: #95a5a6;
font-size: 0.9rem;
}
/* 响应式设计 */
@media (max-width: 768px) {
.header-content {
flex-direction: column;
text-align: center;
}
nav ul {
margin-top: 15px;
}
nav ul li {
margin: 0 10px;
}
.main-content {
flex-direction: column;
}
.footer-column {
min-width: 100%;
}
}
/* 文章详情页样式 */
.article-header {
background-color: #fff;
border-radius: 8px;
padding: 40px;
margin-bottom: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.article-title {
font-size: 2.2rem;
margin-bottom: 10px;
color: #2c3e50;
}
.article-meta {
display: flex;
margin-bottom: 20px;
color: #7f8c8d;
font-size: 0.9rem;
}
.article-content {
background-color: #fff;
border-radius: 8px;
padding: 40px;
margin-bottom: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
line-height: 1.8;
}
.article-content h2 {
margin: 30px 0 15px;
color: #2c3e50;
}
.article-content p {
margin-bottom: 20px;
}
.article-content blockquote {
border-left: 4px solid #3498db;
padding-left: 20px;
margin: 25px 0;
font-style: italic;
color: #555;
}
</style>
</head>
<body>
<!-- 顶部导航 -->
<header>
<div class="container">
<div class="header-content">
<div class="logo">博客<span>空间</span></div>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#posts">文章</a></li>
<li><a href="#categories">分类</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
</div>
</div>
</header>
<div class="container">
<!-- 主要内容区域 -->
<div class="main-content">
<!-- 文章列表 -->
<main class="posts">
<!-- 文章1 -->
<article class="post" id="post1">
<div class="post-meta">
<span class="post-date">2025年12月15日</span>
<span class="post-category">技术思考</span>
</div>
<h2 class="post-title">未来Web开发趋势：AI与开发的融合</h2>
<p class="post-excerpt">随着人工智能技术的飞速发展，Web开发领域正在经历一场深刻的变革。从代码自动生成到智能调试，AI正在改变我们构建网站和应用的方式。本文将探讨这些变化，并预测未来几年内AI如何进一步融入开发工作流程。</p>
<a href="#" class="read-more">继续阅读 →</a>
</article>
<!-- 文章2 -->
<article class="post" id="post2">
<div class="post-meta">
<span class="post-date">2025年11月28日</span>
<span class="post-category">生活随笔</span>
</div>
<h2 class="post-title">数字时代下的专注力管理</h2>
<p class="post-excerpt">在信息爆炸的时代，我们的注意力成为了最稀缺的资源。不断涌入的通知、无穷无尽的社交媒体更新，都在争夺我们有限的专注力。如何在这个数字时代中保护和管理我们的注意力，成为了一个值得深入探讨的话题。</p>
<a href="#" class="read-more">继续阅读 →</a>
</article>
<!-- 文章3 -->
<article class="post" id="post3">
<div class="post-meta">
<span class="post-date">2025年10月10日</span>
<span class="post-category">设计美学</span>
</div>
<h2 class="post-title">简约设计中的情感表达</h2>
<p class="post-excerpt">极简主义设计不仅仅是减少元素，更是一种精心策划的减法艺术。在这篇文章中，我将探索如何通过有限的视觉元素传达丰富的情感和意义，以及如何让简洁的设计与用户建立深刻的情感连接。</p>
<a href="#" class="read-more">继续阅读 →</a>
</article>
</main>
<!-- 侧边栏 -->
<aside class="sidebar">
<!-- 关于作者 -->
<div class="sidebar-widget about-author">
<h3 class="widget-title">关于作者</h3>
<div class="author-avatar">元</div>
<p class="author-bio">一个热爱技术与写作的博客作者，专注于分享Web开发、设计思考和生活感悟。相信代码可以改变世界，文字可以温暖人心。</p>
</div>
<!-- 文章分类 -->
<div class="sidebar-widget">
<h3 class="widget-title">文章分类</h3>
<ul class="widget-list">
<li><a href="#">技术思考 (12)</a></li>
<li><a href="#">生活随笔 (8)</a></li>
<li><a href="#">设计美学 (5)</a></li>
<li><a href="#">读书笔记 (7)</a></li>
<li><a href="#">旅行见闻 (4)</a></li>
</ul>
</div>
<!-- 标签云 -->
<div class="sidebar-widget">
<h3 class="widget-title">标签云</h3>
<div class="tag-cloud">
<a href="#" class="tag">HTML5</a>
<a href="#" class="tag">CSS3</a>
<a href="#" class="tag">JavaScript</a>
<a href="#" class="tag">响应式设计</a>
<a href="#" class="tag">用户体验</a>
<a href="#" class="tag">前端开发</a>
<a href="#" class="tag">简约设计</a>
<a href="#" class="tag">数字生活</a>
</div>
</div>
<!-- 最新文章 -->
<div class="sidebar-widget">
<h3 class="widget-title">最新文章</h3>
<ul class="widget-list">
<li><a href="#post1">未来Web开发趋势：AI与开发的融合</a></li>
<li><a href="#post2">数字时代下的专注力管理</a></li>
<li><a href="#post3">简约设计中的情感表达</a></li>
<li><a href="#">阅读的力量：纸质书与电子书的思考</a></li>
<li><a href="#">如何构建高效的个人知识管理系统</a></li>
</ul>
</div>
</aside>
</div>
</div>
<!-- 页脚 -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-column">
<h3 class="footer-title">博客空间</h3>
<p>一个记录思考、分享知识与探索生活的个人空间。在这里，技术与人文交汇，理性与感性并存。</p>
</div>
<div class="footer-column">
<h3 class="footer-title">导航</h3>
<ul class="footer-links">
<li><a href="#home">首页</a></li>
<li><a href="#posts">文章</a></li>
<li><a href="#categories">分类</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</div>
<div class="footer-column">
<h3 class="footer-title">联系我</h3>
<ul class="footer-links">
<li>邮箱: contact@example.com</li>
<li>GitHub: github.com/username</li>
<li>Twitter: @username</li>
</ul>
</div>
</div>
<div class="copyright">
<p>© 2026 博客空间. 保留所有权利. 本博客由纯HTML+CSS构建</p>
</div>
</div>
</footer>
</body>
</html>