HTML實戰(zhàn)篇：html仿百度首頁

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

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

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

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

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

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

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

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

2）具體的實現(xiàn)代碼

整體的百度實現(xiàn)代碼如下所示：

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

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

篇文章主要給大家介紹一下使用html+css來模仿制作小米官方網(wǎng)站右側(cè)的浮動框。我們來看下邊的這個浮動框，位于小米官網(wǎng)的右側(cè)并且隨著頁面的滾動，一直浮動在右側(cè)不變；

我們通過上邊的圖片可以看出圖片有5個單獨的塊元素組成，每個塊元素鼠標(biāo)經(jīng)過都有一個單獨的顏色變?yōu)辄S色的效果，然后第一個塊元素鼠標(biāo)經(jīng)過還會在左側(cè)彈出更多內(nèi)容。接下來我們簡單說一下制作所用到的核心知識。

1）制作頁面所需知識點

1、列表標(biāo)簽（dl dd dt）的使用，使用dl和dd來完成前邊5個相同模塊的制作

2、鼠標(biāo)經(jīng)過（hover）的使用，第一個元素鼠標(biāo)經(jīng)過左側(cè)顯示，這個跟我們之前將的導(dǎo)航菜單類似，還有鼠標(biāo)經(jīng)過文字以及圖片改變顏色，這里可以使用hover之后改變背景圖片來實現(xiàn)；

3、浮動（fixed）的使用，該內(nèi)容一直浮動在網(wǎng)頁右側(cè)，跟隨頁面一起滾動，我們可以使用position:fixed來實現(xiàn)；

2）代碼實操演練

大體了解了我們所要使用的知識點之后，我們就可以開始根據(jù)圖片上的內(nèi)容來制作我們所需要的頁面了，具體的實現(xiàn)代碼就如下方所示：（首先寫一個div盒子，看到列表形式，直接使用dl和dd，然后每個元素內(nèi)部有文字和圖片，使用h4標(biāo)簽和span標(biāo)簽來存放圖片和文字內(nèi)容，就這么搞定了哈哈），來看代碼吧。

html代碼挺簡單的，我們啪啪敲完之后呢，剩下的就是書寫css代碼，來完成圖片所示的布局樣式的制作了。那么我們的css代碼就如下圖所示：（最外層box直接來個fixed和right、bottom配合，讓其浮動在右側(cè)，然后寫寫dl和dd的寬高，控制控制span的背景，隨便寫寫hover事件，ok完成了）。不多說了，看代碼吧。

好了，本篇文章就給大家說到這里，大家自己動手寫一下看能不能寫出一樣的頁面效果出來，也可以找一些類似的頁面自己練習(xí)一下，有需要源碼的可以直接私信【網(wǎng)站源碼】即可。

每日金句：只有知道別人心里在想什么，你才能得到你想要的。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識。

事互聯(lián)網(wǎng)行業(yè)的工作者，大多都有自己一個難實現(xiàn)的夢想養(yǎng)一個或者多個網(wǎng)站，幾年之后這個站能給我?guī)肀容^大的利潤、或者賣個比較高價錢之類的想法)，雖然這“夢想”個實現(xiàn)的可能性不會太高，不過還是使很多互聯(lián)網(wǎng)工作者想擁有自己的網(wǎng)站。。。

因為都是工作者由于自身的能力有限制以及經(jīng)濟的負(fù)擔(dān)，去建一個站或者買一個站實在不合適。。所以大部分人第一就會想到仿站，把別人的網(wǎng)站放過來自己使用。。。

在萬般的熏染下使筆者(陳少庭)也有了比較強的擁有自己網(wǎng)站的欲望。在自己的未來的發(fā)展網(wǎng)站是必不可少的，仿站也是一種必備的手段。一個網(wǎng)站給怎么去仿制? 如何把一個站仿好呢? 請回答詳細點。。。。謝謝！

仿站從理論上非常簡單，一句話，就是把目標(biāo)網(wǎng)站的數(shù)據(jù)替換成模板數(shù)據(jù)。我稍微詳細一點回答。

①首先要觀察目標(biāo)網(wǎng)站的頁面，一般大體分為首頁、欄目頁、內(nèi)容頁以及其他的頁面（搜索頁面、標(biāo)簽頁面等）。下面以首頁為例，原理都一樣。

②保存首頁數(shù)據(jù)，一般在瀏覽器“文件-另存為”保存類型選擇“網(wǎng)頁、全部”，當(dāng)然一些網(wǎng)站數(shù)據(jù)是沒辦法直接保存的，比如背景圖片，這個你找到圖片路徑保存下來即可。

③替換數(shù)據(jù)（以織夢為例）。把網(wǎng)站的每一塊都要替換，比如網(wǎng)頁源碼中的一塊是

替換成織夢的標(biāo)簽就是<div><ul>

{dede:arclist row=3 titlelen=60 }<li>

<a href="[field:arcurl/]">[field:title/]</a></li>

{/dede:arclist}</ul></div>

每個程序的標(biāo)簽各不相同，所以你要熟悉使用程序的模板標(biāo)簽等。

④把每個需要替換的地方都用模板標(biāo)簽替換，框架（div+css）不變，當(dāng)然也可以根據(jù)需要調(diào)整。

這樣基本就完成了，需要注意的是，

最好在本地搭建程序環(huán)境（這樣就不需要上傳下載到主機，在本地調(diào)試好再上傳）；

熟悉程序的標(biāo)簽（必須的），可以下載程序的使用手冊；

不懂的地方多百度、谷歌；

熟能生巧，一開始肯定慢，而且易煩躁，熟悉了就好了。

在線咨詢

上一篇：HTML5煙花特效，敲了兩小時代碼，漂亮嗎？
下一篇：戲說HTML5

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。