本章目标：先搭骨架再填血肉
就像装修房子先砌墙，我们先做好基础布局，后续再添加电器和软装！
一、创建基础结构（毛坯房搭建）
步骤1：新建index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>校园墙首页</title>
<style>
/* 基础样式放这里 */
</style>
</head>
<body>
<!-- 页面内容从这里开始 -->
</body>
</html>步骤2：划分页面区域
<body>
<!-- 头部课程提醒 -->
<div class="course-notice"></div>
<!-- 核心功能菜单 -->
<div class="menu-grid"></div>
<!-- 底部占位 -->
<div class="footer-space"></div>
</body>二、填充课程提醒区（今日课程展示）
静态模板代码
<div class="course-notice">
<div class="course-card">
<h3>下一节课：数据结构与算法</h3>
<div class="detail">
<span>📌 第三教学楼402</span>
<span>⏰ 14:00-15:30</span>
</div>
</div>
<!-- 无课时状态 -->
<!-- <div class="empty-tip">
<h3>今天已经没有课程啦！</h3>
<p>好好休息吧～</p>
</div> -->
</div>配套样式
.course-notice {
padding: 15px;
background: #f8f9fa;
border-radius: 12px;
margin: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.course-card h3 {
color: #2c3e50;
margin: 0 0 8px 0;
}
.detail {
display: flex;
justify-content: space-between;
color: #7f8c8d;
font-size: 14px;
}三、设计功能菜单（核心功能区）
网格布局实现
<div class="menu-grid">
<div class="menu-item">
<div class="icon">📝</div>
<span>发布动态</span>
</div>
<div class="menu-item">
<div class="icon">🛍️</div>
<span>跳蚤市场</span>
</div>
<div class="menu-item">
<div class="icon">📅</div>
<span>我的课表</span>
</div>
<div class="menu-item">
<div class="icon">⚙️</div>
<span>个人设置</span>
</div>
</div>样式设计要点
.menu-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
padding: 20px;
}
.menu-item {
background: white;
border-radius: 12px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: transform 0.2s;
}
.menu-item:hover {
transform: translateY(-3px);
}
.icon {
font-size: 28px;
margin-bottom: 8px;
}四、优化视觉体验（软装进场）
1. 添加校园主题色
:root {
--campus-blue: #478EF2;
--warm-gray: #f8f9fa;
}
body {
background: var(--warm-gray);
}
.menu-item {
border: 1px solid var(--campus-blue);
}2. 增加动态效果
/* 按钮点击效果 */
.menu-item:active {
background: #f1f5ff;
}
/* 课程卡片悬停动画 */
.course-card {
transition: box-shadow 0.3s;
}
.course-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}五、完整静态页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>校园墙首页</title>
<style>
:root {
--campus-blue: #478EF2;
--warm-gray: #f8f9fa;
}
body {
background: var(--warm-gray);
margin: 0;
font-family: -apple-system, sans-serif;
}
.course-notice {
padding: 15px;
background: white;
border-radius: 12px;
margin: 15px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.menu-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
padding: 20px;
}
.menu-item {
background: white;
border-radius: 12px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
border: 1px solid var(--campus-blue);
transition: all 0.2s;
}
/* 其他样式参考上文... */
</style>
</head>
<body>
<div class="course-notice">
<div class="course-card">
<h3>下一节课：数据结构与算法</h3>
<div class="detail">
<span>📌 第三教学楼402</span>
<span>⏰ 14:00-15:30</span>
</div>
</div>
</div>
<div class="menu-grid">
<!-- 四个菜单项参考上文 -->
</div>
</body>
</html>六、新手常见问题解答
❓ 为什么用grid布局不用flex？
答：Grid更适合二维布局（同时控制行和列），Flex适合一维布局。菜单需要整齐排列成网格，Grid更合适。
❓ 如何在不同设备上适配？
答：使用rem单位、媒体查询等响应式技术（后续章节详解）
❓ 阴影效果参数什么意思？
答：box-shadow: 水平偏移 垂直偏移 模糊度 扩散度 颜色;
下一章预告：《让页面动起来——交互实现篇》
你将学到：
- 实现菜单点击跳转
- 添加课程数据切换
- 制作加载动画
- 响应式布局适配手机
开发小贴士：
不要试图一次做完所有功能！就像盖楼要先打好地基，我们下节课会给这个静态页面装上"马达"，让它真正活起来！
