您的位置 首页 html教程

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

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

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

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

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

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

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

20181020125908318.png

上面的页面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如何制作百度首页?代码是什么的详细内容,更多请关注php中文网其它相关文章!

文章来源:火云技术网

文章标题:HTML如何制作百度首页?代码是什么

文章地址:https://www.pyhw.net/34030_html%e5%a6%82%e4%bd%95%e5%88%b6%e4%bd%9c%e7%99%be%e5%ba%a6%e9%a6%96%e9%a1%b5%ef%bc%9f%e4%bb%a3%e7%a0%81%e6%98%af%e4%bb%80%e4%b9%88.html

关于作者: 火云技术网

热门文章

发表评论

您的电子邮箱地址不会被公开。

网站地图