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

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

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

本文和大家重点讨论一下用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：

 


			
    
				
  1. 
					<div><strong>junchenwu@gmail.comstrong>|<ahrefahref="ig">个性化主页  
    2. 
				
  2. 
					 
    3. 
				
  3. 
					a>|<ahrefahref="MyAccount">我的帐户a>|<ahrefahref="logout">退出a>div> 
    4. 
				
  4. 
					<div><imgsrcimgsrc="http://www.google.com/intl/zh-CN_ALL/images/logo.gif"alt="Google"/>div> 
    5. 
			

			

				这包括头部的登陆状态和中间的大Logo。我们先不增加任何样式id和class。

			

				然后我们看到中间有“网页图片资讯论坛更多»”这些链接。怎么做？一般就两种写法，看个人喜好。把这几个链接写一行里面或者写在一个ul里面，如下：

			

			
    
				
  1. 
					<div><strong>网页strong><ahrefahref="pic">图片a><ahrefahref="info"> 
    2. 
				
  2. 
					 
    3. 
				
  3. 
					资讯a><ahrefahref="group">论坛a><ahrefahref="more"> 
    4. 
				
  4. 
					 
    5. 
				
  5. 
					<strong>更多»strong>a>div> 
    6. 
			

			

				或者：

			

			
    
				
  1. 
					<ul> 
    2. 
				
  2. 
					<li><strong>网页strong>li> 
    3. 
				
  3. 
					<li><ahrefahref="pic">图片a>li> 
    4. 
				
  4. 
					<li><ahrefahref="info">资讯a>li> 
    5. 
				
  5. 
					<li><ahrefahref="group">论坛a>li> 
    6. 
				
  6. 
					<li><ahrefahref="more"><strong>更多»strong>a>li> 
    7. 
				
  7. 
					ul> 
    8. 
			

			

				这两种写法各有什么优缺点呢？这里一共有5项，第一项是加粗的文字，其余4项是链接。如果使用第一种写法对于样式的控制就显得力不从心，比如控制这5项之间的间距；如果使用第二种写法，那么在脱离样式的情况下，分了5行显示。这里我把缺点都写出来，根据本例情况，我们还是选择第一种写法，这样要控制样式就需要在每一项前后增加无意义的。

			

				我们先继续往下写，遇到了搜索表单以及边上的高级搜索等三个链接。先写哪一个？看上去是平级的啊。这个时候最好问一下产品设计师的本意。我们在这里先写表单。如下：

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

			

			
    
				
  1. 
					<formactionformaction=""method="post"> 
    2. 
				
  2. 
					<div><inputtypeinputtype="text"size="55"title="Google搜索"/>div> 
    3. 
				
  3. 
					<div><buttontypebuttontype="submit">Google搜索button><button>手气不错button>div> 
    4. 
				
  4. 
					<div><label><inputtypeinputtype="radio"name="t"checked="checked"/> 
    5. 
				
  5. 
					 
    6. 
				
  6. 
					搜索所有网页label><label><inputtypeinputtype="radio"name="t"/> 
    7. 
				
  7. 
					 
    8. 
				
  8. 
					中文网页label><label><inputtypeinputtype="radio"name="t"/>简体中文网页label>div> 
    9. 
				
  9. 
					form> 
    10. 
			

			

				注意给每一项radiobutton添加一个label，具体的效果大家可以自行测试一下。另外这里采用了label包含的写法，也可以写成针对id为foo的label。怎么写这也是看个人喜好的。

			

				接下来是高级搜索等三个链接，以及底部的版权信息等，代码如下：

			

			
    
				
  1. 
					<div><ahrefahref="advanced_search">高级搜索a><ahrefahref="pref">使用偏好a><ahrefahref="lang">语言工具a>div> 
    2. 
				
  2. 
					<div><ahrefahref="ad">广告计划a>-<ahrefahref="all">Google大全a>-<ahrefahref="en">Google.cominEnglisha>div> 
    3. 
				
  3. 
					<div>©2007Googlediv> 
    4. 
			

			

				到这里我们基本完成了Google首页的HTML构建，这里是样例文件，待会儿我们还会再修整一部分代码。

		

	






			

			

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

		
		
			  
	  
 
	

	 
	

	





	
	



飞机