HTML制作简易百度首页

前些天为了学习页面布局，做了一个简易的百度首页。做百度首页的原因是因为它的布局比较简单，需要顾及的地方比较少，但是需要相关的知识点又基本上都能用上，对自己理解页面布局以及一些标签（如float和margin）的用法有很大的帮助。

仿做一个网页之前需要分析该网页的布局，下图是百度首页。

从上图可以看出，百度首页大概分为三个块：头部，中部，和底部。中部又可以分为LOGO和搜索框，地步可以分为百度二维码和底部细则。因此，总的来说百度首页分为五个块。所以先给网页分割成五个块。

1、头部导航

头部导航很好做，因为之前将页面分割成了五个块，头部（top）中再写几个div，设置margin-left，从而使导航位于右边，当然，也可以写float-right。而因为导航是一列，所以在div中写一个float：left。这样导航中的几个div就自动漂浮。当然，如果不想设置margin-left，也可以将float-left改为float-right，这样导航就自动漂浮到右边了。之后可以通过margin-right来调整div与右边的距离。而图中“更多产品”这一块，只需要将该div的background-color改为对应的颜色即可。背景色的代码可以在百度首页的源代码中找到。

效果如下：

2、百度LOGO

百度LOGO单独作为一个块，直接网上下载一张百度的LOGO，插入一张图片，调整图片的位置就可以。如果如下：

3、搜索框

搜索框总共有三个部分，一个是文本框，一个是照相机的小图标，还有就是“百度一下”的按钮。这个的代码比较简单，如下：

<form  action="https://www.baidu.com/s" method="get" id="submit">
	<div><input id="username" name="wd" type="text" style="width:70%;float:left;height:36px; align="center""/></div>
	<div class="div_place "style="float:left;margin-left:-30px;margin-top:3px;">
				<img height="30" width="30" src="images/pic.png"/>
			</div>
	<div><button type="submit" style="width:100px;height:42px;float:left;background-color:#38f;margin-left:-1px;"><b>百度一下</b></button><br/></div>
	
		</form>

在搜索框这个大的div中，写三个小div，分别是文本框，相机图标和“百度一下”按钮。文本框用的是input，而“百度一下”直接用的是button。将这三个部分写在一个div里面的目的是为了让这三个的相对位置固定，防止这三个部分在网页大小变化的时候移位。

至于form的使用，详情见https://blog.csdn.net/Searchin_R/article/details/82819592。

4、底部

底部主要就是百度的二维码以及下面的细则。百度二维码很方便放置，直接在div中插入图片，随后调整图片位置即可，

而最底部的细则也方便。因为点击百度首页的部分细则，当前页面会直接跳转到另一个页面。因此，直接在文本上添加超链接就行。每一个细则是一个div，这样有利于调整他们的相对位置。

至于整个页面的一些细节方面，比如字体大小和字体颜色，或者div的背景色，这些都可以在百度首页上查看。

制作的百度首页的效果图如下：

制作这个页面，最需要注意的地方float的理解和使用，如果有疑问的地方，详情见https://blog.csdn.net/Searchin_R/article/details/82818788。

如果大家对页面布局有什么更好的方法，欢迎大家留言评论，大家一起学习呀。

下面附上程序源码：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>松大王的百度</title>
	<style>

	.div_top{
			width:100%;
			height:35px;
			background-color:#FFF;	
			}
	.div_menu{
		//width:100%;
		//height:55px;	
		float:right;
		font-size:14px;
		color:#555;
		//text-align:center;
		line-height:35px;
		margin-top:2%;
	}
	.div_more{
		width: 60px;
      		height: 23px;
   		color: #fff;	
		background: #38f;
   		line-height: 24px;
		font-size:13px;
		text-align:center;
		border-bottom:1px solid #38f;
		margin-left:10px;
		margin-top:2%;	}	
	.color-menu{
		background-color:#FFF;
	}
	
	.div_logo{
				//height:100px;
				width:100%;
				text-align:center;
				float:left;
				margin-top:10%;
				background-color:#FFF;
			}
	
	
	.div_text{
				//height:30px;
				width:45%;
				float:left;
			//	margin-top:7%;
				background-color:#FFF;
				text-align:center;
				margin-left:33%;
				margin-right:33%;
	}
	
	.div_logo2{
			//	height:100px;
				width:100%;
				float:left;
				margin-top:7%;
				background-color:#FFF;
				text-align:center;
			}
	.div_foot{
				width:100%;
				height:40px;
				margin-top:2%;
			//	margin-left:10%;
			//	background-color:#000;
				float:left;
				color:#999;
				//clear:both;
				text-decoration:none;
				//text-align: center;
				line-height: 22px;
				font: 12px arial;	
		}
	.div_tail{
				width:100%;
			//	height:30px;
				text-align: center;
				line-height: 22px;
				float:left;
				color:#999;
				font: 12px arial;
				margin-top:1%;
				
			}

	.div_place{
  	//	position:absolute;
 		// left:73.4%;
 		 //top:55.6%;
 	 }
</style>
	
	
</head>
	
<body >	

	<div class="div_top">
		<div class="div_menu colormenu div_more">更多产品</div>
		<div class="div_menu color-menu" >设置</div>
		<div class="div_menu color-menu"style="margin-right:10px">登录</div>
		<div class="div_menu color-menu"style="margin-right:10px" >学术</div>
		<div class="div_menu color-menu" style="margin-right:10px">贴吧</div>
		<div class="div_menu color-menu" style="margin-right:10px">视频</div>
		<div class="div_menu color-menu" style="margin-right:10px">地图</div>
		<div class="div_menu color-menu" style="margin-right:10px">hao123</div>
		<div class="div_menu color-menu" style="margin-right:10px">新闻</div>
	</div>

	<div class="div_logo">
		<img height="200" width="380" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1477436123,3577936229&fm=27&gp=0.jpg"alt="百度LOGO "/>
	</div>
	
	<div class="div_text"style="float:left;text-align:center"">	
			
	<form  action="https://www.baidu.com/s" method="get" id="submit">
	<div><input id="username" name="wd" type="text" style="width:70%;float:left;height:36px; align="center""/></div>
	<div class="div_place "style="float:left;margin-left:-30px;margin-top:3px;">
				<img height="30" width="30" src="images/pic.png"/>
			</div>
	<div><button type="submit" style="width:100px;height:42px;float:left;background-color:#38f;margin-left:-1px;"><b>百度一下</b></button><br/></div>
	
		</form>	
	</div>
	

	<div class="div_logo2">
		<img height="130" width="130" src="images/logo.png"alt="二维码"/>
	</div>

	<div class="div_foot ">
			<a href="https://www.baidu.com/cache/sethelp/help.html"style="margin-left:43%;"><font color="#999">把百度设为主页</font></a>
			<a href="http://home.baidu.com/"style=><font color="#999">关于百度</font></a>
			<a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-irhome"><font color="#999">About&nbsp&nbspBaidu</font></a>
			<a href="http://e.baidu.com/?refer=888"><font color="#999">百度推广</font></a><br>
		</div>	
	<div class="div_tail">
			©2018 Baidu <a href="https://www.baidu.com/duty/"><font color="#999">使用百度前必读</font></a>
			<a href="http://jianyi.baidu.com/"><font color="#999">意见反馈</font></a>
			京ICP证030173号
			<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001"><font color="#999">京公网安备11000002000001号</font></a>
		</div>	
	


</body>
</html>