當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端——HTML百度首页制作

發布時間：2023/12/14 HTML 25 豆豆

生活随笔收集整理的這篇文章主要介紹了前端——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、搜索框

搜索框總共有三個部分，一個是文本框，一個是照相機的小圖標，還有就是“百度一下”的按鈕。這個的代碼比較簡單，如下：

在搜索框這個大的div中，寫三個小div，分別是文本框，相機圖標和“百度一下”按鈕。文本框用的是input，而“百度一下”直接用的是button。將這三個部分寫在一個div里面的目的是為了讓這三個的相對位置固定，防止這三個部分在網頁大小變化的時候移位。

至于form的使用，詳情見https://blog.csdn.net/Searchin_R/article/details/82819592。

4、底部

底部主要就是百度的二維碼以及下面的細則。百度二維碼很方便放置，直接在div中插入圖片，隨后調整圖片位置即可，

而最底部的細則也方便。因為點擊百度首頁的部分細則，當前頁面會直接跳轉到另一個頁面。因此，直接在文本上添加超鏈接就行。每一個細則是一個div，這樣有利于調整他們的相對位置。

至于整個頁面的一些細節方面，比如字體大小和字體顏色，或者div的背景色，這些都可以在百度首頁上查看。

制作的百度首頁的效果圖如下：

?制作這個頁面，最需要注意的地方float的理解和使用，如果有疑問的地方，詳情見https://blog.csdn.net/Searchin_R/article/details/82818788。

如果大家對頁面布局有什么更好的方法，歡迎大家留言評論，大家一起學習呀。

下面附上程序源碼：

<!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&nbsp&nbspBaidu</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>

總結

以上是生活随笔為你收集整理的前端——HTML百度首页制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

html
首页

上一篇：你究竟有多了解开源？InfoQ《中国开源
下一篇：啊实打实大大声点