实例解析：使用DIV CSS网页布局实现Google首页-div+css网页布局实例

本文和大家重点讨论一下用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>junchenwu@gmail.comstrong>|<ahrefahref="ig">个性化主页  
 
a>|<ahrefahref="MyAccount">我的帐户a>|<ahrefahref="logout">退出a>div> 
<div><imgsrcimgsrc="http://www.google.com/intl/zh-CN_ALL/images/logo.gif"alt="Google"/>div>

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

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

<div><strong>网页strong><ahrefahref="pic">图片a><ahrefahref="info"> 
 
资讯a><ahrefahref="group">论坛a><ahrefahref="more"> 
 
<strong>更多»strong>a>div>

或者：

<ul> 
<li><strong>网页strong>li> 
<li><ahrefahref="pic">图片a>li> 
<li><ahrefahref="info">资讯a>li> 
<li><ahrefahref="group">论坛a>li> 
<li><ahrefahref="more"><strong>更多»strong>a>li> 
ul>

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

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

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

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

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

<div><ahrefahref="advanced_search">高级搜索a><ahrefahref="pref">使用偏好a><ahrefahref="lang">语言工具a>div> 
<div><ahrefahref="ad">广告计划a>-<ahrefahref="all">Google大全a>-<ahrefahref="en">Google.cominEnglisha>div> 
<div>©2007Googlediv>

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

第二部分、DIV CSS网页布局之样式表

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

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前台的热门话题，本文简单起见，直接使用绝对单位。

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

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

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

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

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

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

 
#ft{  
margin:54pxauto16px;  
}

在浏览器里面预览并且微调一下各个数值，这样就完成了Google首页的制作。#p#

第三部分、DIV CSS网页布局之完整代码

如下：


 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> 
<title>Googletitle> 
<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="http://www.google.com/intl/zh-CN_ALL/images/logo.gif"alt="Google"/>div> 
 
<dividdivid="stype"><span><strong>网页strong>span><span><ahrefahref="pic">图片a> 
 
span><span><ahrefahref="info">资讯a>span><span><ahrefahref="group">论坛a>span><span> 
 
<ahrefahref="more"><strong>更多»strong>a>span>div> 
 
<formidformid="search"action=""method="post"> 
<div><inputtypeinputtype="text"size="55"title="Google搜索"/>div> 
<div><buttontypebuttontype="submit">Google搜索button><button>手气不错button>div> 
<divstyledivstyle="margin-top:6px;"><label><inputtypeinputtype="radio"name="t"checked="checked"/> 
 
搜索所有网页label><label><inputtypeinputtype="radio"name="t"/>中文网页label><label> 
 
<inputtypeinputtype="radio"name="t"/>简体中文网页label>div> 
<dividdivid="more"><ahrefahref="advanced_search">高级搜索a> 
 
<ahrefahref="pref">使用偏好a><ahrefahref="lang">语言工具a>div> 
form> 
 
<dividdivid="ft"><ahrefahref="ad">广告计划a>-<ahrefahref="all"> 
 
Google大全a>-<ahrefahref="en">Google.cominEnglisha>div> 
<div>©2007Googlediv> 
body> 
html>

【编辑推荐】

责任编辑：佚名来源： code-123.com

DIV CSS