HTML如何制作百度首页？代码是什么

互联网 18-10-20

本篇文章给大家带来的内容是关于HTML如何制作百度首页？代码是什么，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

制作百度首页时候，除了要用到p进行分块，还需要对快的位置进行控制，一般有

对p进行规范大小width，height分别对应宽度高度

margin：有对p进行定位有margin-top,margin-left,margin-right,margin-buttom

float-left:吧p元素进行从左到右排列

了解这些简单的操作之后，就可以自己动手做出一个简单百度页面了，例如：

上面的页面html代码如下：

   <html> <head> 	<title>百度一下，你就知道</title> 	<link href="baidu.ico" rel="shortcut icon" type="ico图标路径"/> 	<style> 	.p_head{ 			width:100%; 			height:150px; 			 			margin-top:0px; 	} 	 	.p_mid{ 			width:100%; 			height:130px; 			 			margin-top:0px; 	} 	.p_body{ 			width:100%; 			height:200px; 			 			margin-top:0px; 	} 	.p_base{ 			width:100%; 			height:60px; 			 			float:left; 			margin-top:0px; 	} 	.p_based{ 			width:100%; 			height:100%; 			 			float:left; 			margin-top:0px; 			 	} 	 	 	.p_head1{ 		width:540px; 		height:24px; 		 		float:right; 		margin-top:25px; 		 	} 	.p_head2{ 			width:50px; 			height:24px; 			 			float:left; 			line-height:24px; 			text-align:center;			 	} 	.p_mid1{ 			width:270px; 			height:130px; 			 			float:left; 			 			margin-left:39%; 	}	 	.p_body1{ 			width:600px; 			height:36px; 			background-color:#999; 			float:left; 			 			margin-left:32%; 	}	 	 	.p_base1{ 			width:60px; 			height:60px; 			margin:0 auto; 			float:left; 			margin-top:5%; 	}   	</style> </head> <body style="margin:0 auto"> 	<p class="p_head" > 			<p class="p_head1"> 					<p class="p_head2" ><font size="1" ><ins>新闻 </ins></font></p>                					<p class="p_head2" ><font size="1" ><ins>hao123</ins> </font></ins></p>  					<p class="p_head2" ><font size="1" ><ins>地图 </ins></font></p>  					<p class="p_head2" ><font size="1" ><ins>资源 </ins></font></p>  					<p class="p_head2" ><font size="1" ><ins>视频 </ins></font></p>  					<p class="p_head2" ><font size="1" ><ins>贴吧 </ins></font></p>  					<p class="p_head2" ><font size="1" ><ins>学术 </ins></font></p>  					<p class="p_head2" ><font size="1" ><ins>登录 </ins></font></p>  					<p class="p_head2" ><font size="1" ><ins>设置 </ins></font></p> 					<p class="p_head2" style="width:70px;background-color:#38f" ><font size="1" color="white" >更多产品</font></p>  			</p> 	</p>   	<p class="p_mid" > 	 		<p class="p_mid1" > 			<a href="https://www.baidu.com/s?wd=%E7%BD%91%E7%BB%9C%E8%A1%A8%E6%83%85%E7%AC%A6%E5%8F%B7%E8%AF%9E%E7%94%9F&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs" target="_blank"> 				<img  height=130 width=270 src="https://www.baidu.com/img/bd_logo1.png?where=super" title="百度一下你就知道"/> 			</a>	   		</p> 	</p>   	<p class="p_body" > 			<p class="p_body1" > 					<form action="https://www.baidu.com/s"  method="get"  > 					<input style="width:500px;height:36px;"type="text"/><input id="gender" name="gender" type="submit"  value="百度一下"style="width:100px;height:36px;"/>	 					</form> 			</p> 	</p> 	 	<p class="p_base" > 				<p class="p_base1" style="margin-left:48%;"> 						<img  height=60 width=60 src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png" title="我是一个二维码"/> 				</p> 	</p> 	 	 </body> </html>

以上就是对HTML如何制作百度首页？代码是什么的全部介绍，如果您想了解更多有关HTML视频教程，请关注PHP中文网。

以上就是HTML如何制作百度首页？代码是什么的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：代码