当前位置：首页 > 文章列表 > 文章 > 前端 > CSS实战：打造响应式个人主页

CSS实战：打造响应式个人主页

2026-02-24 21:56:37 0浏览收藏

用 `display: grid` 规划整体页面骨架

别从 header、nav 一个一个浮动或定位堆砌。先定义页面级网格，把“头/侧边栏/主内容/页脚”抽象为区域名，用 grid-template-areas 统一声明：

body {
  display: grid;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr;
  min-height: 100vh;
}

这样做的好处是：后续只需改 grid-template-areas 字符串就能切换布局（比如小屏时改成 "header" "main" "nav" "footer"），不用动 HTML 结构或大量重写 CSS。

注意 min-height: 100vh 是为了防止内容少时页脚塌陷，但 iOS Safari 旧版本对 vh 解析异常，可加 height: 100% 到 html 元素兜底
grid-template-columns: 200px 1fr 中的 200px 不建议写死，更稳妥的是用 minmax(200px, 25%) 配合 auto-fit
区域名（如 "nav"）必须和对应元素的 grid-area 值完全一致，大小写和空格都不能错

导航栏在小屏下收起为汉堡菜单，但不用 JS 控制显隐

纯 CSS 实现折叠靠的是 :checked + ~ 选择器组合，核心是把放在和

之前，利用兄弟选择器控制 nav 的 max-height 和 opacity：


☰
About

#menu-toggle:checked ~ nav {
  max-height: 300px;
  opacity: 1;
  transition: opacity 0.3s, max-height 0.3s;
}
nav {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.3s, max-height 0.3s;
}

常见错误是忘记设 overflow: hidden，导致 max-height 动画过程中内容溢出；或者把 transition 只加在 :checked 状态里，漏掉默认状态，造成“展开有动画、收起瞬间消失”。

`@media` 查询只改网格区域和尺寸，不动定位或浮动

响应式最易失控的点，就是大屏写一套 float，小屏又用 position: absolute 覆盖。正确做法是只调整 grid 相关属性：

小屏（max-width: 768px）下把侧边栏移到主内容下方：grid-template-areas: "header" "main" "nav" "footer"
取消固定列宽，改用 grid-template-columns: 1fr
若头图需全宽，给 header 加 grid-column: 1 / -1，让它横跨所有列
避免在媒体查询里出现 float、clear、position 等传统布局声明，它们和 grid 冲突且不可预测

真正需要额外处理的只有字体大小、行高、内边距等视觉细节，这些可以单独抽成 clamp() 函数或 CSS 自定义属性，例如：font-size: clamp(1rem, 4vw, 1.25rem)。

最后提醒一句：所谓“初级项目”，最容易被忽略的是语义化与可访问性——nav 标签要包住导航链接，main 要有 role="main" 或直接用

，否则屏幕阅读器无法识别主内容区域。样式再漂亮，结构不合规，就不算完成。

今天关于《CSS实战：打造响应式个人主页》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！

CSS设置段落首字母样式的方法主要是使用::first-letter伪元素。这个伪元素可以用来样式化段落中第一个字母，常用于实现首字母大写、悬停效果、颜色变化等。✅基本语法p::first-letter{/*样式属性*/}🎯示例：设置段落首字母为红色并放大p::first-letter{color:red;font-size:2em;font-weight:bold;}📌注意事项只适用于块级元素：

上一篇: CSS设置段落首字母样式的方法主要是使用::first-letter伪元素。这个伪元素可以用来样式化段落中第一个字母，常用于实现首字母大写、悬停效果、颜色变化等。✅基本语法p::first-letter{/*样式属性*/}🎯示例：设置段落首字母为红色并放大p::first-letter{color:red;font-size:2em;font-weight:bold;}📌注意事项只适用于块级元素：