HTML5CSS3前端案例教程：制作响应式首页并验证布局效果

完成后应看到的首页布局效果

最终页面应包含顶部导航、主内容区域和按钮模块。桌面宽度下内容居中显示，页面元素之间有清晰留白；缩小窗口后，容器宽度能跟随屏幕调整，不出现横向滚动条。

准备项目文件和基础结构

新建一个练习文件夹，例如html-css-homepage，里面放两个文件：index.html和style.css。HTML负责页面结构，CSS负责颜色、间距、宽度和响应式变化。

为了便于新手排错，建议先不引入复杂框架。等原生HTML5和CSS3结构跑通后，再学习Bootstrap、Vue或React会更稳。

创建HTML5页面骨架

第1步：写入标准HTML结构

在index.html中写入基础结构，并通过<link>引入样式文件。页面标题可以写成前端案例首页，主体区域使用语义化标签组织。

<header class="site-header">前端案例首页</header>
<main class="container">
  <h2>你好，世界！</h2>
  <p>这是一个HTML5和CSS3响应式页面案例。</p>
  <a class="btn" href="#">开始学习</a>
</main>

保存后用浏览器打开index.html，如果能看到文字内容，说明HTML文件路径和浏览器预览已经正常。

编写CSS让页面形成居中布局

第2步：设置页面背景和容器宽度

在style.css中先处理全局字体、背景和容器宽度。max-width用于限制大屏下内容过宽，margin: 0 auto用于让容器水平居中。

body {
  margin: 0;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  background: #f5f7fb;
}
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px;
}

完成后刷新浏览器，主体内容应从左贴边变成居中显示，左右留白更稳定。

第3步：添加按钮和状态样式

按钮样式重点看display、padding、border-radius和background。这些属性决定按钮能否像真正可点击元素一样显示。

.btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 6px;
  background: #1e88e5;
  color: #fff;
  text-decoration: none;
}

刷新页面后，如果链接变成蓝色圆角按钮，说明选择器和样式文件都已生效。

加入CSS3响应式规则

第4步：使用媒体查询适配窄屏

响应式布局的核心是根据屏幕宽度调整元素尺寸。可以给.container添加媒体查询，在小屏幕下减少内边距并让内容占满可用宽度。

@media screen and (max-width: 767px) {
  .container {
    padding: 24px 14px;
  }
  .site-header {
    text-align: center;
  }
}

max-width: 767px表示屏幕宽度小于或等于767像素时应用这些规则。保存后拖动浏览器宽度，页面间距应随之变小。

检查页面是否真正完成

完成案例后，至少检查三点：第一，浏览器控制台没有找不到style.css的错误；第二，桌面宽度下内容不贴边；第三，窄屏下没有明显横向滚动条。如果其中一项不满足，优先检查文件路径和CSS选择器。

还可以给页面继续扩展图片卡片、导航菜单或表单区域，但每次只增加一个模块，增加后立即刷新验证，避免一次改太多导致无法定位问题。

常见问题与调整方法

表现：CSS写了但页面没有变化

原因通常是<link rel="stylesheet" href="style.css">路径错误，或者浏览器缓存没有刷新。确认CSS文件和HTML文件在同一目录后，使用强制刷新再查看。

表现：手机宽度下页面出现横向滚动

常见原因是某个元素写死了过大的width，例如width: 1200px。把固定宽度改为max-width或百分比，并给图片设置max-width: 100%。

表现：按钮颜色和预期不一致

先检查选择器是否写成了.btn，再确认HTML中是否真的有class="btn"。类名少一个字符，CSS就不会命中对应元素。

总结

HTML5 CSS3前端案例的学习顺序应是先搭结构，再写基础样式，最后做响应式验证。只要能把文件路径、容器布局、按钮样式和媒体查询这几件事跑通，就已经具备继续做个人主页、产品页和后台静态页面的基础。