html+css实现百度首页（简单版）

从头开始学前端，先从小事做起，多写代码。
第一版：使用基本的html和css元素，在学完《html+css快速上手》后，可以将基本的元素配齐，和基本样式基本布局，但缺少对于块元素的排版，圆角边框等等。

代码如下：

	
	
	
	


	

		

			新闻
			hao123
			地图
			直播
			视频
			贴吧
			学术
			更多
	    
	    

	    	设置
	    	登录
	    
	    

	
	

	    

		    
	    
	    

		    
		    
	    
	
	

		关于百度
		about BaiDu
		使用百度必读
		帮助中心
		京备10212222200
	

Css代码

*{
	margin: 0;
	padding: 0;
}
.navleft{
	float: left;
}
.navright{
	float: right;
}
.nav a{
	text-decoration: none;
	color: black;
	margin: 10px;
	width: 30px;
	height: 20px;
}
.nav a:hover{
	color: blue;
}
#login{
	background-color: #4E6EF2;
	color: white;
}
.clear{
	clear: both;
}
.main{
	text-align: center;
}
.pic{
	text-align: center;
}
.search{
	text-align: center;
}
.foot{
	position: fixed;
	bottom: 0px;
}
.foot a{
	text-decoration: none;
	color: black;
}

第二版效果如下：

代码如下，基本只改了CSS

	
	
	
	


	

		

			新闻
			hao123
			地图
			直播
			视频
			贴吧
			学术
			更多
	    
	    

	    	设置
	    	登录
	    
	
	

	    

		    
	    
	    

	    	

		        
		        百度一下
		    
	    
	
	

		关于百度
		about BaiDu
		使用百度必读
		帮助中心
		京备10212222200
	

CSS代码：

*{
	margin: 0;
	padding: 0;
}
.navleft{
	float: left;
	height: 40px;
}
.navright{
	float: right;
	height: 40px;
}
.nav{
	*zoom:1;
}
.nav::after{
	clear: both;
	content: "";
	display: block;
	height: 0;
	visibility: hidden;
}
.navleft a{
	font: 13px/23px Arial,sans-serif;
	float: left;
	text-decoration: none;
	color: black;
	margin: 10px;
	padding: 5px;
}
.navright a{
	font: 13px/23px Arial,sans-serif;
	float: right;
	text-decoration: none;
	color: black;
	margin: 10px;
	padding: 5px;
}
.nav a:hover{
	color: blue;
}
#login{
	background-color: #4E6EF2;
	color: white;
	border-radius: 5px;
}
.main{
	text-align: center;
}
.pic{
	text-align: center;
}
.pic img{
	width: 200px;
	height: 100px;
}
.search{
	text-align: center;
	width:100% ;
	height: 30px;
}
.foot{
	position: fixed;
	bottom: 0px;
}
.foot a{
	padding-left: 150px;
	text-decoration: none;
	color: black;
}
.search{
	text-align: center;

}
.holder{
	display: inline-block;
}
#searchcontent{
	height: 36px;
	width: 500px;
	float: left;
	border-radius: 10px 0 0 10px;
	border-width: 1px;
	border-color: CEC7C4;
	border-right: 0px;
}
.search a{
	text-decoration: none;
	display: inline-block;
	width: 100px;
	/*这里也可以使用基线对齐，height36px*/
	height: 38px;
	line-height: 36px;
	text-align: center;
	border-radius: 0px 5px 5px 0px;
	font-family: "微软雅黑";
	cursor: pointer;
	background-color: #4E6EF2;
	color: white;
	float: left;
}
.search a:hover{
	background-color: blue;
}

还有很多可以优化的，比如初始化浏览器样式，页面导航栏更加美化，注意样式表书写顺序，合并相同的定义，利用继承合并属性，去除多余标签等，这里就懒得一一实现了，毕竟模仿网页和自己构思个页面还是不一样，模仿贵在通过自己的实践达到相似效果，看源码会禁锢自己的想法，自己构思则可以多看源码，学习他人所长，这些编码细节我会多多在以后的编程实践中注意一下。按理应该优化到和百度首页一模一样的，但我决定加快进度，从下一个项目开始注意吧。
多说两句：今天看到一篇文章，大意是“程序员，别再卷了”，个人感觉，计算机和其他行业一样，都是一个很专业的职业，没有什么工作是轻松的，没有献身的决心，做什么事都做不好，世界虽大，并没有地方可供我们逃避。