自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

實(shí)例解析：使用DIV CSS網(wǎng)頁(yè)布局實(shí)現(xiàn)Google首頁(yè)

作者：admin
開(kāi)發(fā) 前端
DIV CSS網(wǎng)頁(yè)布局有很多值得我們學(xué)習(xí)的地方，本文向大家介紹一下如何使用DIV CSS網(wǎng)頁(yè)布局實(shí)現(xiàn)Google首頁(yè)，希望你會(huì)感興趣。

本文和大家重點(diǎn)討論一下用DIV CSS網(wǎng)頁(yè)布局之Google首頁(yè)實(shí)現(xiàn)，Google首頁(yè)一直是用table布局的。我們把Google首頁(yè)用PrtScr截屏，作為制作時(shí)的設(shè)計(jì)稿參考，并且不打開(kāi)Google首頁(yè)查看其源代碼——就當(dāng)它不存在。這樣和真實(shí)項(xiàng)目工作比較接近。

用DIV CSS網(wǎng)頁(yè)布局之Google首頁(yè)實(shí)現(xiàn)

今天我們來(lái)學(xué)習(xí)用Web標(biāo)準(zhǔn)的方法來(lái)制作Google首頁(yè)（中文）。Google首頁(yè)一直是用table布局的。我們把Google首頁(yè)用PrtScr截屏，作為制作時(shí)的設(shè)計(jì)稿參考，并且不打開(kāi)Google首頁(yè)查看其源代碼——就當(dāng)它不存在。這樣和真實(shí)項(xiàng)目工作比較接近。

***部分、DIV CSS網(wǎng)頁(yè)布局之HTML的構(gòu)建（基于XHTMLTransitional）

　　從設(shè)計(jì)稿上看到的內(nèi)容，去揣摩結(jié)構(gòu)。因?yàn)檎麄€(gè)頁(yè)面內(nèi)容較少，容易理解，但也碰到了我們的***個(gè)問(wèn)題：是用

標(biāo)簽還是

？各自代表著paragraph和division，原則上說(shuō)，這個(gè)頁(yè)面上沒(méi)有任何的段落存在，所以不應(yīng)該用

。但這里涉及到一個(gè)問(wèn)題，拋開(kāi)樣式表顯示的話(huà)，用

更加的清晰，因?yàn)槟J(rèn)

的margin和padding值都為零。好吧，用

還是用

是一個(gè)個(gè)人喜好問(wèn)題，但是原則上應(yīng)當(dāng)用后者。在本例中也使用后者。開(kāi)始找個(gè)稱(chēng)手的編輯器寫(xiě)HTML： 

  1. <div><strong>junchenwu@gmail.comstrong>|<ahrefahref="ig">個(gè)性化主頁(yè)  
  2.  
  3. a>|<ahrefahref="MyAccount">我的帳戶(hù)a>|<ahrefahref="logout">退出a>div> 
  4. <div><imgsrcimgsrc="http://www.google.com/intl/zh-CN_ALL/images/logo.gif"alt="Google"/>div> 

　　這包括頭部的登陸狀態(tài)和中間的大Logo。我們先不增加任何樣式id和class。

　　然后我們看到中間有“網(wǎng)頁(yè)圖片資訊論壇更多»”這些鏈接。怎么做？一般就兩種寫(xiě)法，看個(gè)人喜好。把這幾個(gè)鏈接寫(xiě)一行里面或者寫(xiě)在一個(gè)ul里面，如下：

  1. <div><strong>網(wǎng)頁(yè)strong><ahrefahref="pic">圖片a><ahrefahref="info"> 
  2.  
  3. 資訊a><ahrefahref="group">論壇a><ahrefahref="more"> 
  4.  
  5. <strong>更多»strong>a>div> 

或者：

  1. <ul> 
  2. <li><strong>網(wǎng)頁(yè)strong>li> 
  3. <li><ahrefahref="pic">圖片a>li> 
  4. <li><ahrefahref="info">資訊a>li> 
  5. <li><ahrefahref="group">論壇a>li> 
  6. <li><ahrefahref="more"><strong>更多»strong>a>li> 
  7. ul> 

　　這兩種寫(xiě)法各有什么優(yōu)缺點(diǎn)呢？這里一共有5項(xiàng)，***項(xiàng)是加粗的文字，其余4項(xiàng)是鏈接。如果使用***種寫(xiě)法對(duì)于樣式的控制就顯得力不從心，比如控制這5項(xiàng)之間的間距；如果使用第二種寫(xiě)法，那么在脫離樣式的情況下，分了5行顯示。這里我把缺點(diǎn)都寫(xiě)出來(lái)，根據(jù)本例情況，我們還是選擇***種寫(xiě)法，這樣要控制樣式就需要在每一項(xiàng)前后增加無(wú)意義的。

　　我們先繼續(xù)往下寫(xiě)，遇到了搜索表單以及邊上的高級(jí)搜索等三個(gè)鏈接。先寫(xiě)哪一個(gè)？看上去是平級(jí)的啊。這個(gè)時(shí)候***問(wèn)一下產(chǎn)品設(shè)計(jì)師的本意。我們?cè)谶@里先寫(xiě)表單。如下：

  1. <formactionformaction=""method="post"> 
  2. <div><inputtypeinputtype="text"size="55"title="Google搜索"/>div> 
  3. <div><buttontypebuttontype="submit">Google搜索button><button>手氣不錯(cuò)button>div> 
  4. <div><label><inputtypeinputtype="radio"name="t"checked="checked"/> 
  5.  
  6. 搜索所有網(wǎng)頁(yè)label><label><inputtypeinputtype="radio"name="t"/> 
  7.  
  8. 中文網(wǎng)頁(yè)label><label><inputtypeinputtype="radio"name="t"/>簡(jiǎn)體中文網(wǎng)頁(yè)label>div> 
  9. form> 

　　注意給每一項(xiàng)radiobutton添加一個(gè)label，具體的效果大家可以自行測(cè)試一下。另外這里采用了label包含的寫(xiě)法，也可以寫(xiě)成針對(duì)id為foo的label。怎么寫(xiě)這也是看個(gè)人喜好的。

　　接下來(lái)是高級(jí)搜索等三個(gè)鏈接，以及底部的版權(quán)信息等，代碼如下：
 

  1. <div><ahrefahref="advanced_search">高級(jí)搜索a><ahrefahref="pref">使用偏好a><ahrefahref="lang">語(yǔ)言工具a>div> 
  2. <div><ahrefahref="ad">廣告計(jì)劃a>-<ahrefahref="all">Google大全a>-<ahrefahref="en">Google.cominEnglisha>div> 
  3. <div>©2007Googlediv> 

　　到這里我們基本完成了Google首頁(yè)的HTML構(gòu)建，這里是樣例文件，待會(huì)兒我們還會(huì)再修整一部分代碼。#p#

第二部分、DIV CSS網(wǎng)頁(yè)布局之樣式表

　　我們采用直接把樣式寫(xiě)在head里面的方式，較為簡(jiǎn)單也方便演示。首先我們看到除了頭部的登陸狀態(tài)，其余部分都是居中對(duì)齊的，并且發(fā)現(xiàn)字體是Arial，默認(rèn)文字大小為13px。我們?cè)趆ead區(qū)域增加以下樣式：
 

  1. body{  
  2. font-family:Arial,sans-serif;  
  3. font-size:13px;  
  4. text-align:center;  
  5. margin-top:3px;  
  6. }  
  7. a:link{  
  8. color:#00C;  
  9. }  
  10. a:visited{  
  11. color:#551a8b;  
  12. } 

　　這里使用了px這個(gè)絕對(duì)單位。關(guān)于絕對(duì)單位和相對(duì)單位，網(wǎng)上相關(guān)文章很多，并且也一直是Web前臺(tái)的熱門(mén)話(huà)題，本文簡(jiǎn)單起見(jiàn)，直接使用絕對(duì)單位。

　　然后我們逐步增加其他樣式：
 

  1. #login{/*這是頭部的登陸狀態(tài)*/  
  2. text-align:right;  
  3. }  
  4. #stype{/*這就是上文提到的那5項(xiàng)搜索類(lèi)型*/  
  5. margin-bottom:4px;  
  6. }  
  7. #stypespan{/*此處增加了無(wú)意義的span*/  
  8. padding:06px;  
  9. } 

　　之后的搜索表單，我們碰到了樣式化的難點(diǎn)，首先作為搜索的size為55的輸入框從布局上來(lái)說(shuō)是絕對(duì)居中的，而右側(cè)高級(jí)搜索那三項(xiàng)的寬度加上輸入框在內(nèi)并不是絕對(duì)居中。也就是說(shuō)視覺(jué)上，高級(jí)搜索那三項(xiàng)偏右了。如下圖所示：

 

　　這里我們使用絕對(duì)定位的方法來(lái)處理它（在HTML中將高級(jí)搜索這三項(xiàng)的內(nèi)容放入form之內(nèi)）： 

  1.  
  2. #search{/*這是搜索表單*/  
  3. margin:0auto;  
  4. width:400px;  
  5. position:relative;  
  6. }  
  7. #more{  
  8. width:4em;/*4個(gè)漢字寬，這樣可以形成類(lèi)似列表的效果*/  
  9. position:absolute;  
  10. top:0;  
  11. right:-4.5em;  
  12. } 

　　***我們加上底部鏈接和版權(quán)信息部分的樣式： 

  1.  
  2. #ft{  
  3. margin:54pxauto16px;  
  4. } 

在瀏覽器里面預(yù)覽并且微調(diào)一下各個(gè)數(shù)值，這樣就完成了Google首頁(yè)的制作。#p#

第三部分、DIV CSS網(wǎng)頁(yè)布局之完整代碼

如下： 

  2.  
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  4. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  5. <head> 
  6. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/> 
  7. <title>Googletitle> 
  8. <styletypestyletype="text/css"> 
  9. body{  
  10. background:#FFF;  
  11. color:#000;  
  12. font-family:Arial,sans-serif;  
  13. font-size:13px;  
  14. text-align:center;  
  15. margin-top:3px;  
  16. }  
  17. a:link{  
  18. color:#00C;  
  19. }  
  20. a:visited{  
  21. color:#551a8b;  
  22. }  
  23. #login{  
  24. text-align:right;  
  25. }  
  26. #stype{  
  27. margin-bottom:4px;  
  28. }  
  29. #stypespan{  
  30. padding:06px;  
  31. }  
  32. #search{  
  33. margin:0auto;  
  34. width:400px;  
  35. position:relative;  
  36. }  
  37. #more{  
  38. width:4em;  
  39. position:absolute;  
  40. top:0;  
  41. right:-4.5em;  
  42. }  
  43. #ft{  
  44. margin:54pxauto16px;  
  45. }  
  46. style> 
  47. head> 
  48.  
  49. <body> 
  50. <divstyledivstyle="text-align:right"><ahrefahref="ig">個(gè)性化主頁(yè)a>|<ahrefahref="MyAccount"> 
  51.  
  52. 我的帳戶(hù)a>|<ahrefahref="logout">退出a>div> 
  53. <divstyledivstyle="margin:4pxauto19px;"> 
  54.  
  55. <imgsrcimgsrc="http://www.google.com/intl/zh-CN_ALL/images/logo.gif"alt="Google"/>div> 
  56.  
  57. <dividdivid="stype"><span><strong>網(wǎng)頁(yè)strong>span><span><ahrefahref="pic">圖片a> 
  58.  
  59. span><span><ahrefahref="info">資訊a>span><span><ahrefahref="group">論壇a>span><span> 
  60.  
  61. <ahrefahref="more"><strong>更多»strong>a>span>div> 
  62.  
  63. <formidformid="search"action=""method="post"> 
  64. <div><inputtypeinputtype="text"size="55"title="Google搜索"/>div> 
  65. <div><buttontypebuttontype="submit">Google搜索button><button>手氣不錯(cuò)button>div> 
  66. <divstyledivstyle="margin-top:6px;"><label><inputtypeinputtype="radio"name="t"checked="checked"/> 
  67.  
  68. 搜索所有網(wǎng)頁(yè)label><label><inputtypeinputtype="radio"name="t"/>中文網(wǎng)頁(yè)label><label> 
  69.  
  70. <inputtypeinputtype="radio"name="t"/>簡(jiǎn)體中文網(wǎng)頁(yè)label>div> 
  71. <dividdivid="more"><ahrefahref="advanced_search">高級(jí)搜索a> 
  72.  
  73. <ahrefahref="pref">使用偏好a><ahrefahref="lang">語(yǔ)言工具a>div> 
  74. form> 
  75.  
  76. <dividdivid="ft"><ahrefahref="ad">廣告計(jì)劃a>-<ahrefahref="all"> 
  77.  
  78. Google大全a>-<ahrefahref="en">Google.cominEnglisha>div> 
  79. <div>©2007Googlediv> 
  80. body> 
  81. html> 
  82.  

【編輯推薦】

  1. DIV CSS實(shí)例教程要點(diǎn)總結(jié)
  2. 解析DIV布局之四大屬性用法
  3. Html中DIV和Span的區(qū)別揭秘
  4. 使用Div CSS構(gòu)架的三大好處
  5. Div CSS實(shí)例教程：頁(yè)面制作方法全程指導(dǎo)


 

責(zé)任編輯：佚名 來(lái)源： code-123.com
DIV CSS
相關(guān)推薦

2010-09-13 13:12:57

CSS定位

2010-09-09 13:12:54

CSSfloatDIV

2010-09-09 10:56:56

CSS

2010-08-24 15:31:51

DIVCSS

2010-09-02 09:32:09

DIV CSS

2010-09-01 10:42:11

DIV+CSS

2010-08-24 11:00:55

DIV CSS

2010-08-24 15:45:48

DIVCSSfloat

2010-09-03 15:40:42

最小高度DIVCSS

2010-08-17 13:28:31

DIVCSS

2010-09-13 13:56:52

CSSDIV背景

2010-08-16 14:18:49

DIV+CSS

2010-08-24 13:01:13

DIV+CSS

2010-08-30 14:57:21

DIV+CSS

2010-08-23 09:59:16

DIV+CSSSEO

2010-09-10 10:36:30

DIV CSS

2010-08-27 13:46:58

DIV+CSS

2010-09-03 15:09:08

DIV+CSS

2010-09-14 17:07:26

DIV浮動(dòng)定位CSS

2010-09-10 14:06:47

DIV固定CSS
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)