```html

```

三、 美化与适配：编写CSS样式

HTML提供了内容，而CSS则负责让网站在手机上看起来美观、布局合理。打开 `css/style.css` 文件。

1. 基础重置与全局样式

首先设置一些全局样式，消除不同浏览器的默认差异，并定义基础字体。

```css

{

margin: 0;

padding: 0;

box-sizing: border-box; / 确保元素宽度包含padding和border /

body {

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

line-height: 1.6;

color: 333;

background-color: f9f9f9;

font-size: 16px; / 设置基准字体大小 /

img {

max-width: 优质成分; / 确保图片不会超出容器宽度 /

height: auto;

```

2. 实现响应式布局

这是让网站变成“手机网站”的关键。我们主要使用媒体查询（Media Queries）和弹性盒子（Flexbox）布局。

导航栏响应式：

```css

header {

background-color: fff;

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

position: sticky;

top: 0;

z-index: 100;

nav {

display: flex;

justify-content: space-between;

align-items: center;

padding: 1rem 5%; / 使用百分比内边距适应屏幕 /

nav-links {

display: flex;

list-style: none;

nav-links li {

margin-left: 1.5rem;

nav-links a {

text-decoration: none;

color: 333;

font-weight: 500;

/ 当屏幕宽度小于768px时（典型手机横屏尺寸），改变导航布局 /

@media (max-width: 768px) {

nav {

flex-direction: column;

padding: 1rem;

nav-links {

margin-top: 1rem;

flex-wrap: wrap;

justify-content: center;

nav-links li {

margin: 0.5rem;

```

主要内容区响应式：

```css

hero {

text-align: center;

padding: 4rem 5%;

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

color: white;

features {

display: flex;

flex-wrap: wrap; / 允许子项换行 /

justify-content: center;

padding: 2rem 5%;

gap: 2rem; / 设置子项之间的间隔 /

feature-item {

flex: 1 1 300px; / 基础宽度300px，可伸缩，可换行 /

background: white;

padding: 1.5rem;

border-radius: 8px;

box-shadow: 0 4px 6px rgba(0,0,0,0.05);

text-align: center;

```

3. 优化触控体验

为手机用户优化按钮和链接：

```css

btn, .nav-links a {

padding: 0.8rem 1.5rem;

display: inline-block;

btn {

background-color: ff6b6b;

color: white;

border-radius: 50px;

text-decoration: none;

margin-top: 1rem;

border: none;

font-size: 1rem;

cursor: pointer; / 在桌面设备上显示手型光标 /

/ 增加触控目标尺寸，避免误触 /

@media (hover: none) and (pointer: coarse) {

btn, .nav-links a {

min-height: 44px; / Apple人机界面指南推荐的小巧触控尺寸 /

line-height: 44px;

padding: 0 1rem;

```

四、 测试、发布与基础维护

1. 本地测试

在浏览器中直接打开 `index.html` 文件。使用浏览器开启者工具（F12）中的“设备模拟”功能，切换不同的手机型号和屏幕尺寸，检查布局、字体大小和图片是否都表现正常。务必实际点击所有链接和按钮。

2. 发布到网络

要让别人能访问，你需要将网站文件上传到服务器。

选择托管服务：对于静态网站，有许多免费选择，如 GitHub Pages、Vercel 或 Netlify。它们操作简单，通常关联你的代码仓库后即可自动部署。

上传文件：根据托管平台的指引，将你的项目文件夹（`index.html`, `css/`, `images/`）上传或推送到平台。

获取访问链接：部署成功后，平台会提供一个免费的域名（如 `yourname.github.io`），你的手机网站就可以通过这个链接在全球访问了。

3. 基础维护

内容更新：直接修改本地的HTML或CSS文件，然后重新上传覆盖旧文件即可。

性能检查：利用Google的PageSpeed Insights工具测试你的手机网站速度，并根据建议优化（如压缩图片、减少CSS/JS文件大小）。

定期备份：定期将你的网站文件备份到电脑或云盘。