在移动互联网时代，拥有一个适配手机浏览的网页，无论是用于个人展示、小型业务还是兴趣分享，都变得至关重要。与传统的电脑网页不同，手机网页需要在更小的屏幕上提供同样优质、流畅的浏览体验。本文将以清晰的步骤，引导你从零开始，制作一个基础但完整的手机适配网页，无需高深的编程基础，只需一台电脑和浏览器即可开始。

一、准备工作：搭建你的“工具箱”

在动工之前，我们需要准备好必要的工具和环境。这些工具都是免费且容易获取的。

1. 文本编辑器：这是你编写网页代码的地方。你可以使用电脑自带的记事本（Windows）或文本编辑（Mac），但更推荐使用专为编程设计的编辑器，如 Visual Studio Code、Sublime Text 或 Atom。它们能高亮显示代码，让编写和调试更轻松。

2. 现代网页浏览器：推荐使用 Google Chrome 或 Microsoft Edge。它们内置了雄厚的“开启者工具”，可以让我们随时查看网页在手机上的模拟效果。

3. 规划你的内容：在纸上或思维导图工具中简单画一下你的网页布局。一个典型的单页手机网页可以包含：顶部标题（Header）、导航菜单、主要内容区（可能包含图片和文字）、以及底部信息（Footer）。

二、第一步：创建网页的基本骨架（HTML）

HTML是网页的“骨架”，它定义了网页的结构和内容。

1. 新建文件：在你的电脑上创建一个新文件夹，命名为“my_mobile_web”。然后打开文本编辑器，新建一个文件，保存到该文件夹中，命名为 `index.html`。

2. 编写基础HTML结构：将以下代码复制到 `index.html` 文件中。这是所有网页的起点。

```html

```

关键点说明：

三、第二步：让网页在手机上变漂亮（CSS）

CSS是网页的“外衣”，负责颜色、布局、字体等所有视觉效果。我们需要让布局能根据屏幕宽度灵活变化。

1. 创建样式文件：在同一个文件夹（`my_mobile_web`）中，新建一个文件，命名为 `style.css`。

2. 编写响应式CSS样式：将以下代码复制到 `style.css` 文件中。

```css

/ 1. 基础重置与全局样式 /

{

margin: 0;

padding: 0;

box-sizing: border-box; / 确保元素宽度包含内边距和边框 /

body {

font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;

line-height: 1.6;

color: 333;

background-color: f9f9f9;

padding: 10px; / 为手机屏幕增加一点内边距 /

/ 2. 头部样式 /

header {

background: linear-gradient(135deg, 6a11cb 0%, 2575fc 优质成分);

color: white;

text-align: center;

padding: 1.5rem;

border-radius: 0 0 10px 10px;

margin-bottom: 1.5rem;

header h1 {

font-size: 1.8rem;

margin-bottom: 0.5rem;

nav a {

color: white;

text-decoration: none;

margin: 0 10px;

padding: 5px 10px;

border-radius: 15px;

background-color: rgba(255, 255, 255, 0.2);

/ 3. 主体内容样式 /

main {

max-width: 800px; / 在大屏幕上限制更大宽度 /

margin: 0 auto; / 居中显示 /

section {

background: white;

padding: 1.5rem;

margin-bottom: 1.5rem;

border-radius: 10px;

box-shadow: 0 2px 8px rgba(0,0,0,0.1);

section h2 {

color: 2575fc;

margin-bottom: 1rem;

padding-bottom: 0.5rem;

border-bottom: 2px solid eee;

img {

max-width: 优质成分; / 蕞关键的一行：让图片更大宽度不超过容器宽度 /

height: auto; / 高度自动按比例缩放 /

display: block;

margin: 1rem auto;

border-radius: 5px;

ul {

padding-left: 1.5rem;

/ 4. 页脚样式 /

footer {

text-align: center;

padding: 1.5rem;

color: 666;

font-size: 0.9rem;

border-top: 1px solid eee;

margin-top: 2rem;

/ 5. 媒体查询：针对更小屏幕（如手机）的微调 /

@media (max-width: 600px) {

header h1 {

font-size: 1.5rem; / 在小屏幕上缩小标题字号 /

nav a {

display: block; / 将导航链接改为块级元素，上下堆叠 /

margin: 5px auto;

width: 80%;

section {

padding: 1rem; / 减少内边距，节省空间 /

```

核心技巧解释：

四、第三步：测试与预览

这是检验成果的关键一步。

1. 在电脑浏览器中预览：双击你创建的 `index.html` 文件，它会在默认浏览器中打开。你应该能看到一个带有颜色和布局的简单网页。

2. 使用浏览器开启者工具模拟手机：

3. 在真实手机上测试（可选但推荐）：

五、进阶提示：让你的网页更好

完成基础制作后，你可以考虑以下优化：