DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 實例解析：使用DIV CSS網頁布局實現Google首頁(3)
實例解析：使用DIV CSS網頁布局實現Google首頁(3)
編輯：CSS詳解     

第三部分、DIV CSS網頁布局之完整代碼

如下： 

  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">個性化主頁a>|<ahrefahref="MyAccount"> 
  51.  
  52. 我的帳戶a>|<ahrefahref="logout">退出a>div> 
  53. <divstyledivstyle="margin:4pxauto19px;"> 
  54.  
  55. <imgsrcimgsrc="/School/UploadFiles_7810/201202/20120226182941929.gif"alt="Google"/>div> 
  56.  
  57. <dividdivid="stype"><span><strong>網頁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>手氣不錯button>div> 
  66. <divstyledivstyle="margin-top:6px;"><label><inputtypeinputtype="radio"name="t"checked="checked"/> 
  67.  
  68. 搜索所有網頁label><label><inputtypeinputtype="radio"name="t"/>中文網頁label><label> 
  69.  
  70. <inputtypeinputtype="radio"name="t"/>簡體中文網頁label>div> 
  71. <dividdivid="more"><ahrefahref="advanced_search">高級搜索a> 
  72.  
  73. <ahrefahref="pref">使用偏好a><ahrefahref="lang">語言工具a>div> 
  74. form> 
  75.  
  76. <dividdivid="ft"><ahrefahref="ad">廣告計劃a>-<ahrefahref="all"> 
  77.  
  78. Google大全a>-<ahrefahref="en">Google.cominEnglisha>div> 
  79. <div>©2007Googlediv> 
  80. body> 
  81. Html> 
  82.

【編輯推薦】

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


【責任編輯：程華權 TEL：（010）68476606】
CSS詳解
DIV高度自適應及應該注意的問題(2)
二、DIV高度自適應（子div高度隨父親div高度改變而改變）在有邊框的情況下，你會發現同一個di
CSS特效代碼之制作韓國風格菜單
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 St
CSS3網頁資源:快速生成CSS漸變的10個在線工具
文章簡介：創建一個CSS漸變效果相對來說是比較費時的且對於新手來說也是比較困難。免費的在線工具將幫

相關文章

CSS基礎知識Sass教程CSS3基礎關於CSSCSS進階教程DIV十CSS布局CSS特效代碼CSS詳解
小編推薦
CSS網頁布局的好與壞 HTML 5：實至名歸還是言過其實？ CSS margin-bottom屬性使用秘訣 CSS讓圖片垂直居中和底端對齊的代碼 HTML特效代碼 IE與Firefox在獲得對象上的區別(1) 用dl dt dd來制作列表 讓FireFox與IE兼容 CSS常見問題大全(2) CSS3網頁制作實例:純CSS3打造的精致時鐘 text-indent隱藏文字出現虛線框outline
熱門推薦
簡單理解em CSS網頁制作教程:鼠標指向時DIV區域放大 css實現的滑動鼠標到img後切換圖片移開恢復默認 關於CSS 3 你應該知道的五項新技術 DIV＋CSS網頁布局入門教程(1) css仿word首字下沉效果示例 控制first-letter偽類的背景 CSS編輯器：TopStylePro使用技巧 深入解讀CSS的OOCSS和SMACSS以及BEM
大家都在看
CSS初學福音:解決你對英文單詞的不理解 Jquery中offset()和position()的區別分析 Web設計中如何使用XML數據 JavaScript代碼復用模式詳解 js提交form表單,並傳遞參數的實現方法 你知道嗎？CSS樣式表也能掛網頁木馬 Javascript特效實例10個 交互設計:評價系統設計提綱
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved