AI 生成网页后，手动调整布局与样式的 5 个实操

本文是出海建站系列教程之一。完整英文版请见英文标签页。Full English version available in the English tab.

中文版

生成之后，动手调：基本原则

AI 现在可以根据提示词生成一个能用的页面，但第一版通常都长着“第一版”的样子。这篇文章讲 AI 生成之后的步骤：手动调整布局和样式，直到页面看着顺眼。示例站是一个 Phone Number Generator（电话号码生成器）网站。

全文只守一条原则：不用纠结技术细节。目标是页面看起来好，而不是代码写得教科书般标准。下面的做法来自一个非专业前端——CSS 可能不够“规范”，没关系，看着对就行，上线要紧。

1. Logo：不要图片，用文字 Logo

快速上线不必设计图片 Logo。黑底白字加圆角的文字 Logo 就够了，一眼看过去就是个品牌标识。

有个细节：首页用 h1，内页用 div，因为内页的 h1 要留给主标题，Logo 不能抢。

<!-- 首页 -->
<h1 class="logo"><a href="./">Phone Number Generator</a></h1>
<!-- 内页 -->
<div class="logo"><a href="./">Phone Number Generator</a></div>

.logo { float:left; font-size:22px; font-weight:bold; font-style:normal;
  height:34px; line-height:34px; background-color:black;
  padding:0 8px; border-radius:6px; margin:0; }
.logo a { color:white; }

font-style:normal 去掉 h1 的默认样式，这样两种页面的 Logo 看起来完全一致。

2. 菜单栏：胶囊链接加当前页标识

三处改动，把一串裸链接变成正经导航：

• 加一个 Home 链接。用户需要一条回首页的路，别逼他们按浏览器后退键。
• 每个链接加背景色和圆角。胶囊形状（border-radius:5px、background-color:#e0e0e0）让每个链接看起来像可点的按钮。
• 标识当前页。当前链接加 curr 类——颜色 #2c89a0 加粗——用户一眼知道自己在哪。

菜单结构是 div.country-list，里面放各国家内页链接（china/india/us/indonesia/brazil/pakistan/nigeria/bangladesh/russia/japan，比如 china-phone-number-generator.html）。实操小技巧：截图时只保留三个国家、其余暂时隐藏，页面清爽了，布局问题也更容易看出来。

.country-list { float:left; width:100%; margin-top:10px; }
.country-list a { display:block; float:left; height:34px; line-height:34px;
  margin-right:10px; margin-top:10px; padding:0 10px;
  background-color:#e0e0e0; border-radius:5px;
  transition:background-color 0.3s; color:#333; }
.country-list a:hover { background-color:#d0d0d0; }
.country-list a .curr { color:#2c89a0; font-weight:bold; }

3. 页头：白色、全宽、左对齐

页头做三处调整：背景改白色，页头宽度等于网页宽度，logo 和导航从居中改为左对齐。body 背景换成浅灰（#f4f4f8），白色页头就成了一条分明的横带；nav 限制 max-width:1000px 并居中，宽屏下内容不会散开。

body { background-color:#f4f4f8; color:#333; line-height:1.5; padding:0; }
header { width:100%; margin-bottom:20px; padding:20px 0;
  text-align:center; background-color:#fff; overflow:hidden; }
header nav { width:100%; max-width:1000px; margin:0 auto; }

4. 按钮：白底描边，不要满屏色块

这是核心的样式决策：按钮不要用满屏的色块。白底加边框色，页面一眼看过去干净得多，也更透气。HTML 结构完全不动，只改 CSS（示例按钮：<button>China Phone Number Generator</button>）。

button { color:#247a8c; border:solid 1px #2c89a0; background-color:#fff;
  padding:10px 20px; border-radius:5px; cursor:pointer;
  transition:background-color 0.3s; }
button:hover { background-color:#247a8c; color:white; }

hover 时按钮填充 #247a8c、文字变白——反馈够了，克制也够了。

5. 页脚：常规版权文字

每个网站都需要页脚，不需要有创意。加一行常规的版权文字，页面就收尾了：

<footer>Copyright 2023 &copy; <a href="./" style="color:#333;">Phone Number Generator</a>. All rights reserved.</footer>

先上线，再继续

流程是：GPT4 生成初版后，截图做修改前后对比，列出待调优项，然后逐项走完这 5 处——文字 Logo（首页 h1、内页 div）、胶囊导航（加 Home 链接、当前页 curr 标识）、白色全宽左对齐页头、白底描边按钮（hover 填充）、常规版权页脚。

然后就上线。后面的步骤还多着：制作内页、站内优化和内链建设、增加多语言支持、注册域名设置解析、部署代码上线——再之后是增加外链、提交搜索引擎后台等待收录、观察排名数据进行调整、宣传推广。打磨永远不需要完美，需要的是上线。

(文中案例与数字均为来源材料中提及，未经独立核实。)

系列：出海建站