今天我们来学习用 Web 标准的方法来制作 Google 首页（中文）。Google 首页一直是用 table 布局的。我们把 Google 首页用 PrtScr 截屏，作为制作时的设计稿参考，并且不打开 Google 首页查看其源代码——就当它不存在。这样和真实项目工作比较接近。

第一部分、HTML 的构建（基于XHTML Transitional）

　　从设计稿上看到的内容，去揣摩结构。因为整个页面内容较少，轻易理解，但也碰到了我们的第一个问题：是用 <p> 标签还是 <div>？各自代表着 paragraph 和 division，原则上说，这个页面上没有任何的段落存在，所以不应该用 <p>。但这里涉及到一个问题，抛开样式表显示的话，用 <p> 更加的清楚，因为默认 <div> 的 margin 和 padding 值都为零。好吧，用 <p> 还是用 <div> 是一个个人喜好问题，但是原则上应当用后者。在本例中也使用后者。开始找个称手的编辑器写 HTML ：

Example Source Code []

<div><strong>junchenwu@gmail.com</strong> | <a href=\"ig\">个性化主页</a> | <a href=\"MyAccount\">我的帐户</a> | <a href=\"logout\">退出</a></div>
<div><img src="http://www./img/divcss/200810515304984177804.gif" alt=\"Google\" /></div>

　　这包括头部的登陆状态和中间的大 Logo。我们先不增加任何样式 id 和 class。

　　然后我们看到中间有“网页 图片 资讯 论坛 更多 ?”这些链接。怎么做？一般就两种写法，看个人喜好。把这几个链接写一行里面或者写在一个 ul 里面，如下：

Example Source Code []

<div><strong>网页</strong> <a href=\"pic\">图片</a> <a href=\"info\">资讯</a> <a href=\"group\">论坛</a> <a href=\"more\"><strong>更多 ?</strong></a></div>

或者：

Example Source Code []

<ul>
<li><strong>网页</strong></li>
<li><a href=\"pic\">图片</a></li>
<li><a href=\"info\">资讯</a></li>
<li><a href=\"group\">论坛</a></li>
<li><a href=\"more\"><strong>更多 ?</strong></a></li>
</ul>

　　这两种写法各有什么优缺点呢？这里一共有 5 项，第一项是加粗的文字，其余 4 项是链接。假如使用第一种写法对于样式的控制就显得力不从心，比如控制这 5 项之间的间距；假如使用第二种写法，那么在脱离样式的情况下，分了 5 行显示。这里我把缺点都写出来，根据本例情况，我们还是选择第一种写法，这样要控制样式就需要在每一项前后增加无意义的 <span>。

　　我们先继续往下写，碰到了搜索表单以及边上的高级搜索等三个链接。先写哪一个？看上去是平级的啊。这个时候最好问一下产品设计师的本意。我们在这里先写表单。如下：

Example Source Code []

<form action=\"\" method=\"post\">
<div><input type=\"text\" size=\"55\" title=\"Google 搜索\" /></div>
<div><button type=\"submit\">Google 搜索</button><button>手气不错</button></div>
<div><label><input type=\"radio\" name=\"t\" checked=\"checked\" /> 搜索所有网页</label> <label><input type=\"radio\" name=\"t\" /> 中文网页</label> <label><input type=\"radio\" name=\"t\" /> 简体中文网页</label></div>
</form>

　　注重给每一项 radio button 添加一个 label，具体的效果大家可以自行测试一下。另外这里采用了 label 包含的写法，也可以写成 <label for=\"foo\"> 针对 id 为 foo 的 label </label>。怎么写这也是看个人喜好的。

　　接下来是高级搜索等三个链接，以及底部的版权信息等，代码如下：

Example Source Code []

<div><a href=\"advanced_search\">高级搜索</a> <a href=\"pref\">使用偏好</a> <a href=\"lang\">语言工具</a></div>
<div><a href=\"ad\">广告计划</a> - <a href=\"all\">Google 大全</a> - <a href=\"en\">Google.com in English</a></div>
<div>?2007 Google</div>

　　到这里我们基本完成了 Google 首页的 HTML 构建，这里是样例文件，待会儿我们还会再修整一部分代码。

第二部分、样式表

　　我们采用直接把样式写在 head 里面的方式，较为简单也方便演示。首先我们看到除了头部的登陆状态，其余部分都是居中对齐的，并且发现字体是 Arial，默认文字大小为 13 px。我们在 head 区域增加以下样式：

Example Source Code []