本文和大家重点讨论一下用DIV CSS网页布局之Google首页实现，Google首页一直是用table布局的。我们把Google首页用PrtScr截屏，作为制作时的设计稿参考，并且不打开Google首页查看其源代码——就当它不存在。这样和真实项目工作比较接近。
用DIV CSS网页布局之Google首页实现
今天我们来学习用Web标准的方法来制作Google首页（中文）。Google首页一直是用table布局的。我们把Google首页用PrtScr截屏，作为制作时的设计稿参考，并且不打开Google首页查看其源代码——就当它不存在。这样和真实项目工作比较接近。
第一部分、DIV CSS网页布局之HTML的构建（基于XHTMLTransitional）
从设计稿上看到的内容，去揣摩结构。因为整个页面内容较少，容易理解，但也碰到了我们的第一个问题：是用
标签还是 ？各自代表着paragraph和division，原则上说，这个页面上没有任何的段落存在，所以不应该用
。但这里涉及到一个问题，抛开样式表显示的话，用
更加的清晰，因为默认 的margin和padding值都为零。好吧，用
还是用 是一个个人喜好问题，但是原则上应当用后者。在本例中也使用后者。开始找个称手的编辑器写HTML：
<div><strong> strong>|<ahrefahref="ig">个性化主页
a>|<ahrefahref="MyAccount">我的帐户 a>|<ahrefahref="logout">退出 a> div>
<div><imgsrcimgsrc="1/DTD/xhtml1-strict.dtd">
<htmlxmlnshtmlxmlns="">
<head>
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>Google title>
<styletypestyletype="text/css">
body{
background:#FFF;
color:#000;
font-family:Arial,sans-serif;
font-size:13px;
text-align:center;
margin-top:3px;
}
a:link{
color:#00C;
}
a:visited{
color:#551a8b;
}
#login{
text-align:right;
}
#stype{
margin-bottom:4px;
}
#stypespan{
padding:06px;
}
#search{
margin:0auto;
width:400px;
position:relative;
}
#more{
width:4em;
position:absolute;
top:0;
right:-4.5em;
}
#ft{
margin:54pxauto16px;
}
style>
head>
<body>
<divstyledivstyle="text-align:right"><ahrefahref="ig">个性化主页 a>|<ahrefahref="MyAccount">
我的帐户 a>|<ahrefahref="logout">退出 a> div>
<divstyledivstyle="margin:4pxauto19px;">
<imgsrcimgsrc=">
