學(xué)完了html和css怎么做靜態(tài)網(wǎng)頁啊，沒有頭緒，初學(xué)者都是這樣的么，感覺手拿

時間：2022-09-02 11:09:01 | 來源：網(wǎng)站運營

時間：2022-09-02 11:09:01 來源：網(wǎng)站運營

有圖，預(yù)警。

-----------------------------------------------------------------------------------------------------------------------------------------------大概明白題主是什么意思。

題主自己學(xué)了一遍HTML+CSS，覺得還是蠻簡單的，但實現(xiàn)起來卻不是想像的那樣。

太正常了。這是所有需要實踐同理論相結(jié)合的學(xué)科在初學(xué)時所要面臨的大問題。你要理解這種困難是有辦法克服的，并且在你今后的學(xué)習(xí)過程會遇到更多的這樣的困難。可以預(yù)見到你會在用js寫動態(tài)或交互的時候發(fā)出感嘆：“我覺得我JS數(shù)據(jù)類型，對象，函數(shù)，甚至正則閉包都會了呀，卻依然寫不出想要的效果呢？”

你的實踐還太少了。

-----------------------------------------------------------------------------------------------------------------------------------------------接下來正式回答題主的問題。

做一個靜態(tài)網(wǎng)頁大概的思路應(yīng)該是網(wǎng)站類型>>布局>>結(jié)構(gòu)>>細(xì)節(jié)修飾。

1.我們在做一個網(wǎng)站頁面之前，首先考慮的是我們要做一個什么樣的網(wǎng)站。

騰訊首頁是這樣的：

這是一個綜合網(wǎng)站大概應(yīng)該有的樣子：搜索框、導(dǎo)航、文章類別模塊、文章標(biāo)題，以及一部分廣告。

如果題主要做一個博客：

一個博客主頁應(yīng)該有的：導(dǎo)航、文章縮略、文章搜索、文章導(dǎo)航以及圖中沒有顯示的可能會有的評論區(qū)。

所以要做一個優(yōu)美的靜態(tài)頁面，第一步應(yīng)當(dāng)是考慮網(wǎng)站的類型，以及網(wǎng)站里面有什么東西。

2.布局（排版）

我們來看一下騰訊首頁：

在圖中我用紅線畫出了網(wǎng)站大概的模塊化布局，這對我們接下來實現(xiàn)網(wǎng)站非常重要。

這是模仿網(wǎng)頁的步驟，題主要想做一個自己設(shè)計的網(wǎng)頁，那么自己就應(yīng)該先把布局圖畫出來，標(biāo)記好每一塊是什么。

當(dāng)然了切圖肯定是有圖可切的。通常我們都會有UI給的設(shè)計矢量圖以及尺寸，UI給的圖通常不會這么丑。（或許是我自己畫的丑。。。）

自己設(shè)計網(wǎng)頁的話，要想網(wǎng)頁漂亮一點，還是要有一點設(shè)計師的feel的。

3.結(jié)構(gòu)

接下來就是進(jìn)入重點了，我們要用代碼把UI設(shè)計圖/自己畫的設(shè)計圖/模仿的網(wǎng)站截圖實現(xiàn)出來，在前面我們已經(jīng)打好了布局關(guān)，接下來就可以直接上我們的html架構(gòu)代碼了。

按照布局，我們把網(wǎng)頁寫成一個一個div，再根據(jù)相關(guān)的內(nèi)容，具體地在div里添加相關(guān)的內(nèi)容。

比如文章標(biāo)題列表，寫出列表的相關(guān)標(biāo)簽。

寫出表單的相關(guān)標(biāo)簽來實現(xiàn)搜索框。

把這些東西都用html實現(xiàn)出來，我們網(wǎng)頁的基本架構(gòu)就出來了。

（隨便找了個很久以前寫的html基本頁，艾瑪真是太丑了。。。）

4.細(xì)節(jié)修飾

CSS要上場了，這應(yīng)該是我們在做網(wǎng)頁的時候最難的一步，遇到的問題也最多。

所以我的建議是從易到難，分塊化實現(xiàn)。

題主可以先把這一塊完成：

然后是

接著

和

你會發(fā)現(xiàn)很多地方你做的不好，你要靈活地動用google，百度去查你要找的答案，去問你身邊的大神他們怎么實現(xiàn)你想要的效果。

等你把這一個個模塊全部實現(xiàn)之后，還有任務(wù)是用CSS實現(xiàn)布局，inline-block，盒模型，定位要調(diào)用起來，把一個個你辛苦實現(xiàn)出來的模塊，組成設(shè)計圖/網(wǎng)站截圖里的樣子。

5.修改，反思

到這里我們的靜態(tài)網(wǎng)頁已經(jīng)基本成型了。有一些小的地方需要修修補(bǔ)補(bǔ)，html，css文件中的代碼需要規(guī)范化。但是作為初學(xué)者，尋找自己代碼中的問題是一個很大的難題，例如瀏覽器兼容性等方面的體驗，初學(xué)者可能完全不會發(fā)現(xiàn)。如果你有一位良師/有經(jīng)驗的神隊友肯為你指點迷津，幫你指出代碼中不規(guī)范的地方，那是最好不過了。

每一次寫完這樣的頁面，都要去反思自己寫頁面的過程，爭取每一次都會有一定的進(jìn)步。

-----------------------------------------------------------------------------------------------------------------------------------------------題主竟然有耐心看到了這里，我想給題主提點建議：

#1

2天（1天10個小時）模仿了個百度和騰訊靜態(tài)的，還各種問題，排版什么的我感覺也明白了，寫網(wǎng)頁就是寫不好

3天成為網(wǎng)頁大師？

你的實踐經(jīng)歷只有”1天10個小時“，寫不出來，有地方不會是很正常的，但是我并沒有看到你在面對不會的地方時去向大神，google，百度，各種博客求助，你在哀嘆自己是不是方法不對甚至是笨，你在本站求問大家”是不是也是這樣“來尋求安慰感，這是學(xué)習(xí)的態(tài)度？

作為初學(xué)者，打基礎(chǔ)應(yīng)當(dāng)牢固，精益求精。我們應(yīng)該在不斷的錘煉中去理解所學(xué)理論的真正含義，在實踐中踩過一個一個的坑，甚至每次都在同樣的坑跌下去，疼到自己談坑色變，才能在走過同樣的坑時，用最佳的最安全的路線走過去。

想用htmlcss實現(xiàn)靜態(tài)頁面，只切了一個騰訊一個百度，遇到了些問題，就開始覺得有些沮喪，那以后還有更多的坑等著你踩呢，咋辦呀？

我學(xué)htmlcss花了一個月，這一個月里都在切頁面，平均每天一張，變換著樣式去嘗試各種不同的效果?，F(xiàn)在偶爾看到了一些漂亮的頁面設(shè)計，也拿來切一切。

請平下你那顆”3天精通html+css“的浮躁的心，老老實實地學(xué)，老老實實地練，不怕不會，不懂就問。學(xué)得慢不可怕，學(xué)得精才是王道。

#2

建議題主還是要把w3cschool里相關(guān)的內(nèi)容全部過一遍，認(rèn)認(rèn)真真，逐字逐字地看，保證自己弄懂了為止。在慕課網(wǎng)或者其他渠道也有一些相關(guān)的教學(xué)視頻，可以參考借鑒。htmlcss的學(xué)習(xí)路線并不艱難，JS的學(xué)習(xí)路線才是萬般荊棘?；A(chǔ)打好了，面對之后的挑戰(zhàn)才能從容不迫。

同為前端初學(xué)者，共勉。