明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

HTML如何制作百度首頁？代碼是什么

發(fā)表時間：2023-08-29 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本篇文章給大家?guī)淼膬?nèi)容是關(guān)于HTML如何制作百度首頁？代碼是什么，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。制作百度首頁時候，除了要用到p進行分塊，還需要對快的位置進行控制，一般有對p進行規(guī)范大小width，height分別對應(yīng)寬度高度margin：有對p進行定位有margi...
本篇文章給大家?guī)淼膬?nèi)容是關(guān)于HTML如何制作百度首頁？代碼是什么，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

制作百度首頁時候，除了要用到p進行分塊，還需要對快的位置進行控制，一般有

對p進行規(guī)范大小width，height分別對應(yīng)寬度高度

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圖標(biāo)路徑"/>
	<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>學(xué)術(shù) </ins></font></p> 
					<p class="p_head2" ><font size="1" ><ins>登錄 </ins></font></p> 
					<p class="p_head2" ><font size="1" ><ins>設(shè)置 </ins></font></p>
					<p class="p_head2" style="width:70px;background-color:#38f" ><font size="1" color="white" >更多產(chǎn)品</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如何制作百度首頁？代碼是什么的全部介紹，如果您想了解更多有關(guān)HTML視頻教程，請關(guān)注PHP中文網(wǎng)。

以上就是HTML如何制作百度首頁？代碼是什么的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。