今天就跟大家聊聊有關如何使用DIV CSS網頁布局實現Google首頁，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
我們把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包含的寫法，也可以寫成
接下來是高級搜索等三個鏈接，以及底部的版權信息等，代碼如下：
<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構建，這里是樣例文件，待會兒我們還會再修整一部分代碼。
第二部分、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首頁的制作。
第三部分、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網頁布局實現Google首頁有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
