HTML製作簡易百度首頁
前些天為了學習頁面佈局，做了一個簡易的百度首頁。做百度首頁的原因是因為它的佈局比較簡單，需要顧及的地方比較少，但是需要相關的知識點又基本上都能用上，對自己理解頁面佈局以及一些標籤（如float和margin）的用法有很大的幫助。
仿做一個網頁之前需要分析該網頁的佈局，下圖是百度首頁。
從上圖可以看出，百度首頁大概分為三個塊：頭部，中部，和底部。中部又可以分為LOGO和搜尋框，地步可以分為百度二維碼和底部細則。因此，總的來說百度首頁分為五個塊。所以先給網頁分割成五個塊。
1、頭部導航
頭部導航很好做，因為之前將頁面分割成了五個塊，頭部（top）中再寫幾個div，設定margin-left，從而使導航位於右邊，當然，也可以寫float-right。而因為導航是一列，所以在div中寫一個float：left。這樣導航中的幾個div就自動漂浮。當然，如果不想設定margin-left，也可以將float-left改為float-right，這樣導航就自動漂浮到右邊了。之後可以通過margin-right來調整div與右邊的距離。而圖中“更多產品”這一塊，只需要將該div的background-color改為對應的顏色即可。背景色的程式碼可以在百度首頁的原始碼中找到。
效果如下：
2、百度LOGO
百度LOGO單獨作為一個塊，直接網上下載一張百度的LOGO，插入一張圖片，調整圖片的位置就可以。如果如下：
3、搜尋框
搜尋框總共有三個部分，一個是文字框，一個是照相機的小圖示，還有就是“百度一下”的按鈕。這個的程式碼比較簡單，如下：
<form action="https://www.baidu.com/s" method="get" id="submit"> <div><input id="username" name="wd" type="text" style="width:70%;float:left;height:36px; align="center""/></div> <div class="div_place "style="float:left;margin-left:-30px;margin-top:3px;"> <img height="30" width="30" src="images/pic.png"/> </div> <div><button type="submit" style="width:100px;height:42px;float:left;background-color:#38f;margin-left:-1px;"><b>百度一下</b></button><br/></div> </form>
在搜尋框這個大的div中，寫三個小div，分別是文字框，相機圖示和“百度一下”按鈕。文字框用的是input，而“百度一下”直接用的是button。將這三個部分寫在一個div裡面的目的是為了讓這三個的相對位置固定，防止這三個部分在網頁大小變化的時候移位。
至於form的使用，詳情見——。
4、底部
底部主要就是百度的二維碼以及下面的細則。百度二維碼很方便放置，直接在div中插入圖片，隨後調整圖片位置即可，
而最底部的細則 也方便。因為點選百度首頁的部分細則，當前頁面會直接跳轉到另一個頁面。因此，直接在文字上新增超連結就行。每一個細則是一個div，這樣有利於調整他們的相對位置。
至於整個頁面的一些細節方面，比如字型大小和字型顏色，或者div的背景色，這些都可以在百度首頁上檢視。
製作的百度首頁的效果圖如下：
製作這個頁面，最需要注意的地方float的理解和使用，如果有疑問的地方，詳情見——。
如果大家對頁面佈局有什麼更好的方法，歡迎大家留言評論，大家一起學習呀。
下面附上程式原始碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>鬆大王的百度</title>
<style>
.div_top{
width:100%;
height:35px;
background-color:#FFF;
}
.div_menu{
//width:100%;
//height:55px;
float:right;
font-size:14px;
color:#555;
//text-align:center;
line-height:35px;
margin-top:2%;
}
.div_more{
width: 60px;
height: 23px;
color: #fff;
background: #38f;
line-height: 24px;
font-size:13px;
text-align:center;
border-bottom:1px solid #38f;
margin-left:10px;
margin-top:2%; }
.color-menu{
background-color:#FFF;
}
.div_logo{
//height:100px;
width:100%;
text-align:center;
float:left;
margin-top:10%;
background-color:#FFF;
}
.div_text{
//height:30px;
width:45%;
float:left;
// margin-top:7%;
background-color:#FFF;
text-align:center;
margin-left:33%;
margin-right:33%;
}
.div_logo2{
// height:100px;
width:100%;
float:left;
margin-top:7%;
background-color:#FFF;
text-align:center;
}
.div_foot{
width:100%;
height:40px;
margin-top:2%;
// margin-left:10%;
// background-color:#000;
float:left;
color:#999;
//clear:both;
text-decoration:none;
//text-align: center;
line-height: 22px;
font: 12px arial;
}
.div_tail{
width:100%;
// height:30px;
text-align: center;
line-height: 22px;
float:left;
color:#999;
font: 12px arial;
margin-top:1%;
}
.div_place{
// position:absolute;
// left:73.4%;
//top:55.6%;
}
</style>
</head>
<body >
<div class="div_top">
<div class="div_menu colormenu div_more">更多產品</div>
<div class="div_menu color-menu" >設定</div>
<div class="div_menu color-menu"style="margin-right:10px">登入</div>
<div class="div_menu color-menu"style="margin-right:10px" >學術</div>
<div class="div_menu color-menu" style="margin-right:10px">貼吧</div>
<div class="div_menu color-menu" style="margin-right:10px">視訊</div>
<div class="div_menu color-menu" style="margin-right:10px">地圖</div>
<div class="div_menu color-menu" style="margin-right:10px">hao123</div>
<div class="div_menu color-menu" style="margin-right:10px">新聞</div>
</div>
<div class="div_logo">
<img height="200" width="380" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1477436123,3577936229&fm=27&gp=0.jpg"alt="百度LOGO "/>
</div>
<div class="div_text"style="float:left;text-align:center"">
<form action="https://www.baidu.com/s" method="get" id="submit">
<div><input id="username" name="wd" type="text" style="width:70%;float:left;height:36px; align="center""/></div>
<div class="div_place "style="float:left;margin-left:-30px;margin-top:3px;">
<img height="30" width="30" src="images/pic.png"/>
</div>
<div><button type="submit" style="width:100px;height:42px;float:left;background-color:#38f;margin-left:-1px;"><b>百度一下</b></button><br/></div>
</form>
</div>
<div class="div_logo2">
<img height="130" width="130" src="images/logo.png"alt="二維碼"/>
</div>
<div class="div_foot ">
<a href="https://www.baidu.com/cache/sethelp/help.html"style="margin-left:43%;"><font color="#999">把百度設為主頁</font></a>
<a href="http://home.baidu.com/"style=><font color="#999">關於百度</font></a>
<a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-irhome"><font color="#999">About  Baidu</font></a>
<a href="http://e.baidu.com/?refer=888"><font color="#999">百度推廣</font></a><br>
</div>
<div class="div_tail">
©2018 Baidu <a href="https://www.baidu.com/duty/"><font color="#999">使用百度前必讀</font></a>
<a href="http://jianyi.baidu.com/"><font color="#999">意見反饋</font></a>
京ICP證030173號
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001"><font color="#999">京公網安備11000002000001號</font></a>
</div>
</body>
</html>