前端——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、搜索框

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

	

	

				
			
	
百度一下

	
		
	

在搜索框这个大的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。

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

下面附上程序源码：

	
	
	
	
	

	
	

	

		
更多产品
		
设置
		
登录
		
学术
		
贴吧
		
视频
		
地图
		
hao123
		
新闻
	

	

		
	
	
	
	
			
	

	

	

				
			
	
百度一下

	
		
	
	
	

	

		
	

	

			把百度设为主页
			关于百度
			About  Baidu
			百度推广

		
	
	

			©2018 Baidu 使用百度前必读
			意见反馈
			京ICP证030173号
			京公网安备11000002000001号