溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編就為大家帶來一篇使用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制作百度首頁的代碼就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果喜歡這篇文章，不如把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
