實例解析：使用DIV CSS網頁布局實現Google首頁

作者：admin 2010-08-17 11:12:18

DIV CSS網頁布局有很多值得我們學習的地方，本文向大家介紹一下如何使用DIV CSS網頁布局實現Google首頁，希望你會感興趣。

本文和大家重點討論一下用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>

【編輯推薦】

DIV CSS實例教程要點總結
解析DIV布局之四大屬性用法
Html中DIV和Span的區別揭秘
使用Div CSS構架的三大好處
Div CSS實例教程：頁面制作方法全程指導

責任編輯：佚名來源： code-123.com

DIV CSS