前端——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>

 

没有更多推荐了,返回首页