Home思洋影视事业部网站建设知识库
0 Comments

实例解析：使用DIV CSS网页布局实现Google首页(3)

发布于：2013-07-22  |   作者：广州网站建设  |   已聚集：人围观

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

如下： 



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




	广州网站建设,网站建设,广州网页设计,广州网站设计


			

			

					 标签：网站建设(5654)广州网站设计(5620)广州网站建设(4075)广州网页设计(1868)
					 
			

		
		
			  
	  
 
	

	 
	

	





	
	



飞机