body{
font-family: Arial, sans-serif;
font-size: 13px;
text-align: center;
margin-top: 3px;
}
a:link{
color: #00C;
}
a:visited{
color: #551a8b;
}

　　这里使用了 px 这个绝对单位。关于绝对单位和相对单位，网上相关文章很多，并且也一直是 Web 前台的热门话题，本文简单起见，直接使用绝对单位。

　　然后我们逐步增加其他样式：

Example Source Code []

#login{ /*这是头部的登陆状态*/
text-align: right;
}
#stype{ /*这就是上文提到的那 5 项搜索类型*/
margin-bottom: 4px;
}
#stype span{ /*此处增加了无意义的 span*/
padding: 0 6px;
}

　　之后的搜索表单，我们碰到了样式化的难点，首先作为搜索的 size 为 55 的输入框从布局上来说是绝对居中的，而右侧高级搜索那三项的宽度加上输入框在内并不是绝对居中。也就是说视觉上，高级搜索那三项偏右了。如下图所示：

　　这里我们使用绝对定位的方法来处理它（在 HTML 中将高级搜索这三项的内容放入 form 之内）：

Example Source Code []

#search{ /*这是搜索表单*/
margin: 0 auto;
width: 400px;
position: relative;
}
#more{
width: 4em; /*4个汉字宽，这样可以形成类似列表的效果*/
position: absolute;
top: 0;
right: -4.5em;
}

　　最后我们加上底部链接和版权信息部分的样式：

Example Source Code []

#ft{
margin: 54px auto 16px;
}

　　在浏览器里面预览并且微调一下各个数值，这样就完成了 Google 首页的制作。最终效果及源文件：

Source Code to Run []

[ 可先修改部分代码 再运行查看效果 ]

　　这在 Firefox 1.5 下测试，与 Google 首页没有任何像素的差异。在 IE 下会有一些像素上的差异，这就是各个浏览器的兼容性问题，留给大家自行处理了。本系列以后会有专门的文章讨论这些问题。

　　本例的最终代码还能够有进一步的优化，做法每个人习惯不同，希望本文能够帮助到大家。

怿飞补充：
　　1、对于“?”使用代码“＆raquo;”来代替;
　　2、label写法推荐写成 <label for=\"foo\"> 针对 id 为 foo 的 label </label>。因为<label><input />xxxxx</label>只有在FF等对标准支持很好的浏览器里才显示正常，在IE6中无法显示正常的效果。
　　3、对于strong，需要重点显示出来的内容，可以使用strong，而对于布局里需要区分主次点的部分，就写到样式里，比如分类的一级分类为粗体，二级分类为一般字体……，其实strong对于搜索引擎优化也有一定的作用，搜索引擎会优先strong的内容，而写在样式里就不会有这样的效果！