仿百度首页div+css

刚刚开始学前端，手写仿百度首页。很多地方有缺陷，主要练习下div分割布局过程，加深对盒模型的理解。当是自己工作的一个记录吧。其中有参考过开源中国上的一个哥们的仿百度首页代码，但是思路上有差别。可能他的比较的成熟，我主要还是实现个样子。问题主要出现在图片位置确定，搜索框位置和按钮的契合。做的很low，还花了很久来做，估计零零散散要两个多小时，但是感觉还是有进步的。前端还是要多动手啊，看着很简单，动手之后各种问题层出不穷的。

	

		

		

		

			

				
糯米
				
新闻
				
hao123
				
地图
				
视频
				
贴吧
				
登录
				
设置
				

			
		
	

	

		

			
		

		

			

			
			
		

	
	
	

		©2016 baidu 使用百度前必读 京ICP证030173号
	

*{
	padding:0px;
	margin:0px;
}
body{
	font-size:12px;
	font-family:"Microsoft YaHei";
}
.wrapper{
	width:100%;
}
.top{
	height:50px;
	/*background-color:blue;*/
}
.topleft{
	float:left;
}
.topright{
	float:right
}
.main{
	height:450px;
	/*background:blue;*/
}
.pic{	
	margin-top:100px;
	text-align:center
}
.search{
	text-align:center;
	margin-top:30px;
}
.input{
	font-size:20px;
	width:400px;
	border-width:1px;
	border-color:#317EF3;
	padding:0px;
	vertical-align: middle
}
#button{
	color:#FFF;
	width:100px;
	height:25px;
	background:#317EF3;
	margin-left:-10px;
	border:0px;
	padding:0px;
	vertical-align: middle
}
.bottom{
	text-align:center;
	margin-bottom:30px;
}
.ul1 li{
	display:inline;
	margin-bottom:10px;
	margin-right:10px;
}