HTML實戰篇：html仿百度首頁

篇文章主要給大家介紹一下如何使用html+css來制作百度首頁頁面。

1）制作頁面所用的知識點

我們首先來分析一下百度首頁的頁面效果圖

百度首頁由頭部的一個文字導航，中間的一個按鈕和一個輸入框以及下邊的文字簡介和導航組成。

我們這里主要用到的知識點就是列表標簽（ul）的使用、浮動（float）的使用以及輸入框（input）的樣式控制。

1、列表標簽ul（頭部和底部的文字鏈接導航都有相同的顏色大小以及間距，我們可以使用ul和li來表示每個對應的文字導航）；

2、浮動元素float（每個li元素我們需要使用float:left;讓其左對齊，中間的兩個input我們需要使用float:left;來讓其左對齊，這里涉及到了我們之前講解的如何清除浮動的影響）；

3、輸入框input（通過控制輸入框的寬高、邊框以及填充來使input變成我們想要的效果）

2）具體的實現代碼

整體的百度實現代碼如下所示：

好了，本篇文章就給大家說到這里，大家自己動手寫一下百度首頁看能不能寫出一樣的頁面效果出來，有需要源碼的可以直接私信我即可。

每日金句：沉重的擔子是由那些有著堅強的肩膀的人來挑的。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。

經過兩天的學習,小編終于可以仿出10年前的百度首頁了,想著馬上就要走向人生的巔峰,迎娶白富美,成為CEO ,心里感覺好激動啊!下面是今天的代碼.

<!DOCTYPE html>

<html>

<head>

<style>

* {

margin: 0;

padding: 0;

}

.header {

text-align: right;

padding-top: 25px;

}

.header a {

color: black;

font-size: 14px;

font-weight: bold;

margin-left: 10px;

margin-right: 10px;

}

.header a:hover {

color: blue;

}

.menu {

list-style:none;

display:none;

background-color: #f4f4f4;

/*定位*/

position: absolute;

top: 0;

right: 0;

width: 80px;

height: 500px;

}

/*鼠標置于更多產品上時顯示*/

.more:hover+.menu {

display: block;

}

.more {

background-color: #38f;

color: white;

font-size: 14px;

padding: 5px;

}

.content {

margin-top: 60px;

}

.search {

/*給定寬度結合左右margin auto實現水平居中*/

width: 650px;

margin: 0 auto;

/*讓塊內部的行內元素和文本水平居中*/

text-align: center;

}

#input {

width: 460px;

height: 30px;

border: 1px solid gray;

outline: none;

}

/*聚焦時*/

#input:focus {

border: 1px solid #38f;

}

#go {

color:white;

padding: 7px 18px;

font-size: 14px;

background-color: #38f;

text-decoration: none;

vertical-align: middle;

}

</style>

</head>

<body>

<div>

<ul>

</ul>

</div>

<div>

<div>

</div>

</body>

</html>

生成后的百度圖片

運行生成的百度圖片

百度真正首頁

二維碼圖片以及下方的鏈接文字正在制作中,希望能做好!自勉!!!

　云涯君之前教了大家如何快速搭建網站后（如果還不會搭建網站的朋友可看云涯君之前寫的一篇文章《利用phpStudy和DedeCms快速搭建網站》），很多朋友反映本地網站搭建好后網站模板都是千篇一律的一個樣子，不好看，網站風格不是自己喜歡的，也不是自己想要的。問怎么樣更換網站模板或修改成自己想要的網站風格？

　　今天云涯君就教大家一個簡單的方法去如何更換網站模板，這個方法不需要你懂代碼就可以完成，直接下載第三方模板程序包安裝即可，所以不會代碼的朋友完全不必擔心怎么操作。接下來就跟著云涯君一起來操作吧！

　　一、網站模板下載

　　1、百度搜索“織夢貓”進入官網

百度搜索“織夢貓”

“織夢貓”官網首頁

　　2、選擇適合自己的或者自己喜歡的模板進行下載，選擇模板時要注意：

　　①網站模板分為免費和收費的，根據自身需要去選擇（由于是做演示示范，小編在此選擇免費的模板）。

　　②網站模板分為UTF-8和GBK兩種版本，必須選擇與你網站相應的編碼進行下載，否則安裝后會出現亂碼。（小編的網站采用的是UTF-8格式編碼，故此選擇UTF-8版本的網站模板進行下載安裝）

網站首頁里選擇免費模板進行下載

模板下載

　　二、模板安裝

　　1、解壓下載好的模板安裝包，打開安裝包將web文件夾內的所有文件和文件夾上傳并覆蓋到網站根目錄。

打開解壓后的模板安裝包文件夾

web文件夾內的文件

將web文件夾內的文件復制粘貼到根目錄WWW文件夾里

　　2、登錄網站后臺并還原數據庫

　　①進入dede后臺，找到‘系統’---‘數據庫備份/還原’

找到‘系統’---‘數據庫備份/還原’

　　②在屏幕右上角點擊‘數據還原’

數據還原

　　③點擊屏幕下方的‘開始還原數據’按鈕

開始還原數據

　　3、成功還原數據后，確定網站風格（無論是否修改，都點擊一下確定）：

　　①點擊‘系統’---系統基本參數

　　②將‘站點根網址’改為您的網址，如http://www.xxx.com/（本地安裝請保持http://localhost/）

　　③點擊‘確定’按鈕

網站風格確定

　　4、更新整站緩存：

　　點擊‘生成’---‘更新系統緩存’

更新系統緩存

　　5、更新網站：

　　點擊‘生成’---‘一鍵更新網站’---‘更新所有’---‘開始更新’

　　點擊‘生成’---‘更新主頁html’

網站更新

更新主頁

　　至此網站模板安裝成功，可以點擊預覽主頁進行查看安裝后的效果。

更換模板后的網站首頁

　　以上就是更換網站模板的方法與步驟，簡單而又不粗暴，不需要修改任何代碼就可完成網站模板的更換，不過此方法只針對用dedecms安裝的網站適用；模板安裝成功后，可以根據需要對網站內容、欄目、圖片等信息進行修改，修改成自己的東西。大家在更換模板過程中如遇到問題可進行留言，云涯君一一為大家解答。

在線咨詢

上一篇：HTML5標準三維建筑表現技術，不需要安裝任何專用插件
下一篇：JavaScript代碼怎樣引入到HTML中？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML實戰篇：html仿百度首頁

1）制作頁面所用的知識點

2）具體的實現代碼

一、網站模板下載

二、模板安裝

您的項目需求

　　一、網站模板下載

　　二、模板安裝