这里我们使用绝对定位的方法来处理它（在 HTML 中将高级搜索这三项的内容放入 form 之内）：
以下是引用片段：
#search{ /*这是搜索表单*/
margin: 0 auto;
width: 400px;
position: relative;
}
#more{
width: 4em; /*4个汉字宽，这样可以形成类似列表的效果*/
position: absolute;
top: 0;
right: -4.5em;
} |
最后我们加上底部链接和版权信息部分的样式：
以下是引用片段：
#ft{
margin: 54px auto 16px;
} |
在浏览器里面预览并且微调一下各个数值，这样就完成了 Google 首页的制作。最终效果及源文件：
运行代码框
提示：您可以先修改部分代码再运行
这在 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的内容，而写在样式里就不会有这样的效果！ 上一页 [1] [2] [3] |
