用CSS Grid搭建高效个人博客布局(附代码)

用CSS Grid搭建高效个人博客布局(附代码)

作为草根站长,我将在高哩观晓童分享这套零成本、高性能的CSS Grid布局方案,帮你打造专业级博客👇


🚀 最终效果

  • 桌面端​:三栏经典布局(头部/内容/侧边栏/底部)
  • 移动端​:自动转为单栏流式布局
  • 亮点​:无框架依赖、无缝响应式、代码简洁

🌐 文件结构

index.html       # 主页面
blog-styles.css  # Grid布局核心

一、HTML结构(语义化标签)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>高哩观晓童 | 个人博客</title>
  <link rel="stylesheet" href="blog-styles.css">
</head>
<body class="blog-grid">
  <!-- 布局容器 -->
  <header class="blog-header">
    <h1>高哩观晓童</h1>
    <p>草根站长的免费学习笔记</p>
  </header>

  <nav class="blog-nav">
    <a href="/">首页</a>
    <a href="/html">HTML教程</a>
    <a href="/css" class="active">CSS魔法</a>
    <a href="/resources">资源库</a>
  </nav>

  <main class="blog-content">
    <article>
      <h2>CSS Grid实战:10分钟搭建博客框架</h2>
      <p class="post-meta">发布于: 2023-08-20 | 阅读: 1280次</p>
      <!-- 文章内容区 -->
      <div class="post-content">
        <p>CSS Grid是草根站长的布局利器...(完整教程)</p>
        <!-- 更多内容 -->
      </div>
    </article>
    
    <!-- 分页 -->
    <div class="pagination">
      <a href="#">← 上篇:Flex布局详解</a>
      <a href="#">下篇:响应式设计技巧 →</a>
    </div>
  </main>

  <aside class="blog-sidebar">
    <section class="author-card">
      <img src="avatar.jpg" alt="小童头像">
      <h3>关于站长</h3>
      <p>草根站长,专注分享免费建站知识</p>
    </section>
    
    <section class="popular-posts">
      <h3>热门教程</h3>
      <ul>
        <li><a href="#">HTML5语义化标签指南</a></li>
        <li><a href="#">CSS选择器全解析</a></li>
        <li><a href="#">响应式设计避坑指南</a></li>
      </ul>
    </section>
  </aside>

  <footer class="blog-footer">
    <p>© 2023 高哩观晓童 | 学习是一件免费而又漫长的事</p>
    <div class="social-links">
      <a href="#">GitHub</a> | <a href="#">知乎</a>
    </div>
  </footer>
</body>
</html>

✨ 二、CSS Grid核心代码(blog-styles.css)

/* === 基础重置 === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary: #3498db;     /* 主蓝色 */
  --dark: #2c3e50;        /* 深蓝背景 */
  --light: #ecf0f1;       /* 浅灰文字 */
  --accent: #e74c3c;      /* 强调红色 */
}

body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* === 核心Grid布局 === */
.blog-grid {
  /* 定义网格容器 */
  display: grid;
  grid-template-columns: 1fr 300px; /* 主栏 + 侧边栏 */
  grid-template-rows: auto auto 1fr auto; /* 头/导航/主内容/页脚 */
  grid-template-areas:
    "header header"
    "nav nav"
    "content sidebar"
    "footer footer";
    
  min-height: 100vh; /* 撑满视口高度 */
  gap: 20px; /* 元素间距 */
  padding: 20px; /* 安全边距 */
}

/* 分配网格区域 */
.blog-header { grid-area: header; }
.blog-nav { grid-area: nav; }
.blog-content { grid-area: content; }
.blog-sidebar { grid-area: sidebar; }
.blog-footer { grid-area: footer; }

/* === 区域样式 === */
/* 头部 */
.blog-header {
  background: var(--dark);
  color: white;
  padding: 2rem;
  text-align: center;
  border-radius: 8px;
}

/* 导航 */
.blog-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 8px;
}

.blog-nav a {
  color: var(--dark);
  text-decoration: none;
  padding: 5px 15px;
  border-radius: 4px;
  transition: 0.3s;
}

.blog-nav a.active,
.blog-nav a:hover {
  background: var(--primary);
  color: white;
}

/* 主体内容 */
.blog-content {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.post-meta {
  color: #7f8c8d;
  margin: 1rem 0;
  font-size: 0.9em;
}

/* 侧边栏 */
.blog-sidebar {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.author-card {
  text-align: center;
  margin-bottom: 2rem;
}

.author-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
}

.popular-posts ul {
  padding-left: 20px;
}

.popular-posts li {
  margin-bottom: 0.8rem;
}

/* 页脚 */
.blog-footer {
  background: var(--dark);
  color: white;
  padding: 1.5rem;
  text-align: center;
  border-radius: 8px;
}

.social-links {
  margin-top: 10px;
}

.social-links a {
  color: #3498db;
  margin: 0 10px;
}

/* === 移动端响应式 === */
@media (max-width: 768px) {
  .blog-grid {
    /* 移动端变为单列布局 */
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "nav"
      "content"
      "sidebar"
      "footer";
  }
  
  .blog-nav {
    flex-wrap: wrap; /* 小屏幕导航换行 */
  }
}

🎨 扩展功能(可选)

1. 增加博客卡片布局效果

/* 在.blog-content中添加 */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 2rem;
}

.post-card {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s;
}

.post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

2. 夜间模式支持

@media (prefers-color-scheme: dark) {
  :root {
    --dark: #1a1a2e;
    --light: #e6e6ff;
  }
  
  body {
    background: #121212;
    color: #e0e0e0;
  }
  
  .blog-content, 
  .blog-sidebar {
    background: #1e1e1e;
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  }
}

🧪 布局原理图解

电脑端网格结构:
┌───────────── Header ─────────────┐
├───── Nav ────────────────────────┤
│               │                  │
│   Content     │    Sidebar       │
│               │                  │
└───────────── Footer ─────────────┘

手机端自动转换:
┌─────────── Header ───────────┐
├─────────── Nav ───────────────┤
├───────── Content ─────────────┤
├───────── Sidebar ────────────┤
└────────── Footer ────────────┘

💎 ​Grid布局就是草根站长的生产力加速器!​
在 ​高哩观晓童​ 我们实践:​零成本也能做出专业级网站布局!​

👉 点击获取完整示例代码包
🔥 下一期:用CSS变量实现主题切换!

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇