🌐 我的个人博客

记录生活 · 分享经历 · 简单表达

📖 项目简介

这是一个极简风格的个人博客网站，采用纯 HTML 和 CSS 构建，无需任何框架或构建工具。博客采用响应式设计，支持桌面端和移动端访问，提供舒适的阅读体验。

✨ 主要特性

• 🎨 简洁设计：采用现代化 UI 设计，配色清新舒适
• 📱 响应式布局：完美适配桌面端和移动端设备
• 🚀 轻量快速：纯静态页面，无需后端支持，加载速度快
• 📝 易于维护：结构简单，添加新日记只需复制模板
• 🎯 固定侧边栏：桌面端左侧信息固定，方便随时查看个人信息

🛠️ 技术栈

• HTML5
• CSS3 (Grid, Flexbox, CSS Variables)
• Google Fonts (Inter)

📁 项目结构

Blog/
├── index.html          # 主页面文件
├── .idea/              # IDE 配置文件
└── README.md           # 项目说明文档

🚀 使用方法

本地预览

直接双击 index.html 文件即可在浏览器中打开查看。

部署上线

由于是纯静态页面，可以部署到以下平台：

• GitHub Pages
• Vercel
• Netlify
• 任何静态网站托管服务

📝 添加新日记

在 index.html 中的 <section class="diary"> 部分添加新的日记条目：

<article class="card entry">
    <div class="date">YYYY-MM-DD</div>
    <p>
        你的日记内容...
    </p>
</article>

🎨 自定义配置

修改主题颜色

在 <style> 标签的 :root 部分修改 CSS 变量：

:root {
    --bg-color: #f6f8fb;      /* 背景色 */
    --card-color: #ffffff;    /* 卡片背景色 */
    --text-color: #333;       /* 文字颜色 */
    --sub-text: #666;         /* 次要文字颜色 */
    --accent: #6c8cff;        /* 强调色 */
    --radius: 16px;           /* 圆角大小 */
}

修改个人信息

在侧边栏区域修改个人简介、经历和基本信息等内容。

📱 响应式说明

• 桌面端 (>900px)：左右两栏布局，侧边栏固定
• 移动端 (≤900px)：单列布局，侧边栏位于顶部

📄 许可证

© 2025 zts · All rights reserved

📮 联系方式

• 📍 地区：中国河北
• 📮 Email：keleaihe1@gmail.com
• 💻 兴趣：吉他 / Minecraft