HTML如何制作百度首页？代码是什么-html教程-PHP中文网

首页

web前端

html教程

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

云罗郡主

Oct 20, 2018 pm 02:17 PM

html代码

本篇文章给大家带来的内容是关于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如何制作百度首页？代码是什么的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：csdn。如有侵权，请联系admin@php.cn删除

为什么HTML属性对Web开发很重要？May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外观和功能

HTML，CSS和JavaScript：示例和实际应用May 09, 2025 am 12:01 AM

HTML、CSS和JavaScript在网页开发中的作用分别是：1.HTML用于构建网页结构；2.CSS用于美化网页外观；3.JavaScript用于实现动态交互。通过标签、样式和脚本，这三者共同构筑了现代网页的核心功能。

如何在标签上设置lang属性？为什么这很重要？May 08, 2025 am 12:03 AM

设置标签的lang属性是优化网页可访问性和SEO的关键步骤。1)在标签中设置lang属性，如。2)在多语言内容中，为不同语言部分设置lang属性，如。3)使用符合ISO639-1标准的语言代码，如"en"、"fr"、"zh"等。正确设置lang属性可以提高网页的可访问性和搜索引擎排名。

HTML属性的目的是什么？May 07, 2025 am 12:01 AM

htmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外观和互动，使网站互动，响应式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，类，类型，类型，和dissabledtransfransformformformformformformformformformformformformformformforment

您如何在HTML中创建列表？May 06, 2025 am 12:01 AM

toCreateAlistinHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulleTedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，customeizableWithTheTtheTthetTheTeTeptTributeFordTributeForderForderForderFerentNumberingSnumberingStyls。

HTML行动：网站结构的示例May 05, 2025 am 12:03 AM

HTML用于构建结构清晰的网站。1)使用标签如、、定义网站结构。2)示例展示了博客和电商网站的结构。3)避免常见错误如标签嵌套不正确。4)优化性能通过减少HTTP请求和使用语义化标签。

您如何将图像插入HTML页面？May 04, 2025 am 12:02 AM

toinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）