學完了html和css怎麼做靜態網頁啊，沒有頭緒，初學者都是這樣的么，感覺手拿筷子，不知道怎麼用？
自己自學完CSS和HTML，又去學了些天JS、感覺不難，突然想做個靜態網頁，不用js那種，發現特別亂，一點頭緒都沒有，感覺就像前面一雙筷子，不知道怎麼用，2天（1天10個小時）模仿了個百度和騰訊靜態的，還各種問題，排版什麼的我感覺也明白了，寫網頁就是寫不好，初學者都這樣么，還是我比較笨，還是方法不對，求指點，哎
有圖，預警。-----------------------------------------------------------------------------------------------------------------------------------------------大概明白題主是什麼意思。題主自己學了一遍HTML+CSS，覺得還是蠻簡單的，但實現起來卻不是想像的那樣。太正常了。這是所有需要實踐同理論相結合的學科在初學時所要面臨的大問題。你要理解這種困難是有辦法克服的，並且在你今後的學習過程會遇到更多的這樣的困難。可以預見到你會在用js寫動態或交互的時候發出感嘆：「我覺得我JS數據類型，對象，函數，甚至正則閉包都會了呀，卻依然寫不出想要的效果呢？」
你的實踐還太少了。
-----------------------------------------------------------------------------------------------------------------------------------------------接下來正式回答題主的問題。做一個靜態網頁大概的思路應該是網站類型&>&>布局&>&>結構&>&>細節修飾。1.我們在做一個網站頁面之前，首先考慮的是我們要做一個什麼樣的網站。騰訊首頁是這樣的：
5.修改，反思
到這裡我們的靜態網頁已經基本成型了。有一些小的地方需要修修補補，html，css文件中的代碼需要規範化。但是作為初學者，尋找自己代碼中的問題是一個很大的難題，例如瀏覽器兼容性等方面的體驗，初學者可能完全不會發現。如果你有一位良師/有經驗的神隊友肯為你指點迷津，幫你指出代碼中不規範的地方，那是最好不過了。每一次寫完這樣的頁面，都要去反思自己寫頁面的過程，爭取每一次都會有一定的進步。-----------------------------------------------------------------------------------------------------------------------------------------------題主竟然有耐心看到了這裡，我想給題主提點建議：#12天（1天10個小時）模仿了個百度和騰訊靜態的，還各種問題，排版什麼的我感覺也明白了，寫網頁就是寫不好
3天成為網頁大師？
你的實踐經歷只有」1天10個小時「，寫不出來，有地方不會是很正常的，但是我並沒有看到你在面對不會的地方時去向大神，google，百度，各種博客求助，你在哀嘆自己是不是方法不對甚至是笨，你在知乎求問大家」是不是也是這樣「來尋求安慰感，這是學習的態度？作為初學者，打基礎應當牢固，精益求精。我們應該在不斷的錘鍊中去理解所學理論的真正含義，在實踐中踩過一個一個的坑，甚至每次都在同樣的坑跌下去，疼到自己談坑色變，才能在走過同樣的坑時，用最佳的最安全的路線走過去。想用htmlcss實現靜態頁面，只切了一個騰訊一個百度，遇到了些問題，就開始覺得有些沮喪，那以後還有更多的坑等著你踩呢，咋辦呀？我學htmlcss花了一個月，這一個月里都在切頁面，平均每天一張，變換著樣式去嘗試各種不同的效果。現在偶爾看到了一些漂亮的頁面設計，也拿來切一切。請平下你那顆」3天精通html+css「的浮躁的心，老老實實地學，老老實實地練，不怕不會，不懂就問。學得慢不可怕，學得精才是王道。
#2建議題主還是要把w3cschool里相關的內容全部過一遍，認認真真，逐字逐字地看，保證自己弄懂了為止。在慕課網或者其他渠道也有一些相關的教學視頻，可以參考借鑒。htmlcss的學習路線並不艱難，JS的學習路線才是萬般荊棘。基礎打好了，面對之後的挑戰才能從容不迫。同為前端初學者，共勉。首先不知道同學你自學了多久的CSS和HTML，也不知道學到了什麼地步和參考了那些教程，所以很難給你一個合適的建議如果覺得HTML的標籤都能記住了，CSS都能運用了，那才嘗試去學JS會比較好，由於你現在的要求只是靜態頁面，那就嘗試融合文本、圖像、甚至動畫、聲音來展現這些資源，其中試試把學到的標籤和CSS樣式都用上其次就是開始模仿，瀏覽器眼見所得的東西都可以右鍵查看元素窺探究竟，看看一些網站的排版是怎麼組合標籤的，怎麼用css點綴的，一些js效果就暫時忽略吧，這階段是不適合展開的，如果模仿這一步覺得難，也可以把別人網站保存下來，由於保存都是靜態的文件，這就變成了一份很好的學習文件，試試改動裡面的各種元素，然後再自己打開看看效果，相信你也會學到很多東西最後就回歸到鞏固與複習這個階段，把沒有懂的記下來，可以去w3cschool裡面重溫這些知識點，重新運行一下各種實例，或許你又會收穫自己遺漏的知識點，等自己掌握了這些知識可以去看看一些框架和源碼（手機就不打這麼多字了）實踐吧孩子，看完這些不如多動手敲敲鍵盤，或許比看完我這些文字收穫更多呢~祝成功~
html+css就完全能搞定靜態頁面了（你想做的肯定是沒有動效的那種），這個可能需要試一下：
先不要考慮樣式，嘗試用html來描述頁面，比如頁面可能有 頭部，正文，頁腳等，把這個寫好了，在寫樣式，先寫文檔流的，然後可以嘗試兩列布局，三列布局，等
我的徒弟用html和css做的靜態頁面web前端開發 - 知乎專欄
無他，唯手熟爾。
建議先去系統學學html和css的用法。一上來就做，第一代碼不規範，第二實現方法可能全都有坑。比如說現在最基礎的，行內元素塊級元素明白嗎，盒子模型沒，雙飛翼布局，浮動。等等。。建議你去看看百度前端學院的題，正好這段時間開著。。
你的問題並沒有把自己的困難準確地描述出來，或者自己也不是很清楚，我只好籠統地回答一下。就學習布局而言，剛開始就切圖自己閉門造車是進步不大的，既然你在模仿百度淘寶的頁面，那麼請按F12好好看一看別人的html結構層級、命名規範和CSS的代碼實現，比如用怎樣的類來控制什麼樣的樣式，各種布局是用什麼樣的css組合來實現。這些超級高手的代碼你只用開發者工具就能看得清清楚楚，為何要自己閉門造車呢？要知道所有語言代碼都一樣，要簡單地實現不難，要寫出可讀性可擴展性層級清楚的代碼可是一門大學問，你慢慢地模仿就會發現他們跟你想像中的方式差別很大，當然也更加合理。等慢慢模仿過他們的布局，就可以進階更高級的內容，比如說瀏覽器hack，比如說用什麼樣式來實現清除浮動，元素居中。這些也不用自己去到處找，你不僅可以從開發者工具看其他人的代碼，還能去看一下一些成熟的CSS框架比如bootstrap源碼，你看bootstrap源碼的前面部分就能看到大神是用什麼方式解決各種兼容問題，還有對樣式做出的各種基本處理。而js寫簡單交互，基本只要你js熟練，一般是沒什麼問題，可以自己寫寫輪播，寫寫翻轉，實在沒思路可以去看看現有的插件的源碼，或者搜索一下聽聽別人的思路
我在慕課網錄製的視頻專門針對你這個問題的： http://www.imooc.com/comment/668
寫寫我的經驗，同自學過來的，靜態網頁的布局我是參考了慕課網前端工程師計劃里的企業網站實戰課程，你可以跟著裡面的視頻把代碼都手動敲一遍，然後要大致理解盒子模型，浮動，內邊距，外邊距等布局上的一些常見概念 ，心裡大概有底了就去網上找自己喜歡的網頁模板下載下來，用ps把它切出你需要的圖片素材，然後用學到的布局方法把設計圖實現成網頁，不明白的知識點再回去重複看視頻和查詢相關的資料，前面開始可能會難一點，但是要堅持，多切幾張PSD，慢慢的就可以上手了
同0基礎新人，上星期組隊參加了百度的前端技術學院，完成了前6個任務，自己也有一些體會。在我這個新手看來，重點在這幾部分內容。1、理解css的盒子模型，包括margin、padding、width、height、border的準確定義。理解負邊距的應用場景和其用法。2、理解浮動，明白清除浮動的原因和應用場景3、掌握display: block /inline/inline-block4、掌握position#來自一個新手一周學習的心得
把基礎打好，模仿京東或者淘寶，先不要按F12，先把這些網站全站保存為圖片，效果圖就有了，按照你的思路把圖片轉為HTML，先不要考慮兼容性和動態交互，你前期任務就是一模一樣的把圖片內容展示出來，看自己的真實水平到了什麼程度，然後再去審查代碼，看看別人的代碼，是否和你的思路一樣，如果不一樣，為什麼別人要這麼做，這麼做有什麼好處。然後再去看別人的命名，然後再去測兼容性，不要以為IE6淘汰了就不要測，你最好還是測測，增加自己對兼容性的熟練度，兼容沒問題了，在去添加JS的效果。
網上的教程講的都不是很系統歸納 就只是介紹基礎知識單獨應用環境，基礎概念
從不介紹這個標籤在實際場景是怎麼應用的，他們都做什麼用，有什麼缺點，也不舉例說明這個比如xx某個網頁的某個模塊的實現就是用的xx標籤（全文沒有配圖，如果有興趣了解的請留言 我再對應例圖）
就好像學數學 老師教了公式 但是做應用題都得自己來！
---------我也是個野路子，我來說下我的經驗1）首先熟悉一個網站頁面的構成 分為3個頁面就是 首頁 列表頁 詳細頁（最終頁，內容頁）這是一個內容網站的3個基本頁面，任何一個內容網站在你手裡都可以是歸納成這樣，2）在拿到一個網站頁面的時候分析這個頁面的構成
就好像前面說的那樣庖丁解牛分解成各個模塊首頁分解分解頂部導航區，中間內容區，底部通用版權部分一般情況下線做頂部導航和底部版權部分，因為這2個是所有網站的通用公共模塊！直觀下來 一個頁面就是 3個橫向的模塊了頂部和底部都還算簡單，再分解就是 基本就是p標籤 a標籤塊。參考前面的大能的庖丁分解3）首頁內容區庖丁解牛
內容中間區域分解也是一個個模塊組成的 一般分為 自動調用模塊和手動固定內容區塊自動化調用是你寫好html之後，內容產生是後台php生成調用內容手動固定塊就是 手動在html頁面寫好和更改時間內容上面扯遠了 回過來內容區一般分為滿橫幅模塊：960px或者 1000+px的那種2:1主內容模塊+側邊模塊1:1:1三分小模塊組合拼接(沒有配圖，如果有興趣)從上到下可以分
熱點新聞 模塊， 這個一般是調用10-15條當天更新的新聞標題，時間，鏈接這些參數。部分的還會加入頭條，二條新聞。這個地方主要構成用ul+li實現，時間模塊用span實現，一般大小是三分之一內容寬度輪換圖模塊（熱點圖模塊，幻燈頭圖） 這個是js控制 顯示和隱藏的滾動圖片輪播，實際還是ul+li實現的，一般是整橫幅寬度或者三分之二寬度調用列表模塊
一般調用10-15條各個欄目的最新消息，調用標題和鏈接時間，這個都是三分之一寬度，一排放2個或者3個模塊側邊調用欄，
一些資料，新聞會被日常更新頂下去，為了方便用戶查找一些持久或者重要的內容，就用固定a鏈接描文本框在一個模塊裡面，做固定入口，這裡就是簡單的a標籤亂排，縮略圖列表 部分圖片新聞，視頻新聞會做一個小縮略圖調用，方便用戶直觀了解和吸引點擊，這個其實也是列表新聞的一種，只是多加了個圖片標籤的調用，其他是 標題，鏈接，時間調用，這個就是圖片 標題 時間調用，展現不同而已其他模塊
比如廣告模塊，搜索模塊然後把上面這些模塊都想像成是一個div 一個div這樣包容起來
寫用div等純代碼把模塊寫出來 不用考慮布局和位置
後面再補充寫樣式
樣式注意：
瀏覽器默認的各種ul li a標籤等等都有自己的內邊距 外邊距等樣式表的第一件事就是初始化各種基礎標籤的樣式 將他們的內外邊距都重置為零 等具體可以直接複製別人寫好的 reset.css文本就可以了然後就去寫你的樣式了！
----------------------------------@楊盧陽同學說的不錯 那個幾點都很重要 多練 不要看了 覺得理解了就可以了 重點去實踐他提到的那個幾點1、理解css的盒子模型，包括margin、padding、width、height、border的準確定義。理解負邊距的應用場景和其用法。2、理解浮動，明白清除浮動的原因和應用場景3、掌握display: block /inline/inline-block4、掌握position作者：楊盧陽
鏈接：學完了html和css怎麼做靜態網頁啊，沒有頭緒，初學者都是這樣的么，感覺手拿筷子，不知道怎麼用？ - 楊盧陽的回答
來源：知乎
著作權歸作者所有，轉載請聯繫作者獲得授權。
----------------------------------
剛入門，別兼容到ie6，先把ie9+/firefox/chrome/safari等等兼容好。別把時間浪費在ie6上！
有什麼好學的，直接拿著設計稿上陣，寫到哪學到哪，哪裡不會查哪裡！一張設計稿下來，你吸收到的東西一輩子都不會忘記
自學前端，經歷了跟題主一樣階段，最初是在w3school上學習基礎知識，各種標籤、樣式記了一大堆，當我打開編輯器，想做一個自己想像中的靜態頁面的時候，依然沒有頭緒。
現在的我已經開始體會到前端開發的樂趣，不會因為「沒有頭緒」而感到挫敗，因此跟題主分享一下我的學習心得。
1.找一個順手的IDE，不要相信什麼「記事本也能寫html」的話，趁手的IDE有html模版，有語言高亮，自動補全等功能，對於新手來說是相當友好了。
我用的sublime3，這個軟體免費（雖然按ctrl＋s的時候，偶爾會彈出付費提示，但是頻率不高，直接忽略就好了），內存佔用小，安裝包只有14.2MB，下載安裝非常方便。用sublime寫html，有模板，而且自帶語法高亮、自動補全這些插件，上手so easy。
當你只用花幾分鐘下載安裝好sublime，打開創建一個html模版，直接看到這樣一個畫面的時候，是不是覺得很愉悅呢！&
2.通過在網頁上點擊右鍵查看源文件來模仿一個網頁，並不是一個好主意。
自從我發現滑鼠右鍵點擊網頁就可以審查元素看到網頁代碼的時候，我天真的以為模仿一個頁面只需要把網頁下載下來保存成html文件，或者右鍵查看源文件就OK了，然而，當我找到一個看似簡單的頁面查看源文件時，徹底懵逼了，為什麼一個搜索頁面，主要元素就一個標題+搜索框，源文件卻如此複雜。
搜狗這個頁面的源文件，竟然有374行代碼，僅憑簡單的前端基礎，這些代碼中有很多看都看不懂，更別提模仿了。所以初學者想從做靜態頁面來熟悉前端知識，點擊右鍵查看源文件是搞不定的。
3我的訣竅：視頻課程練習+網站模板素材
真正幫助我做出靜態頁面的學習路徑，是視頻教學+素材網站。
我在慕課網找了一個免費的視頻教學課程，叫「從psd到html」，課程提供了做網頁的psd文件，可是我的電腦了並沒有安裝Photoshop，psd文件是打不開的，而且據我所知，現在很多公司的UI設計圖用的都是sketch生成的html文件交給前端工程師，沒有必要在電腦上裝一個Photoshop。
於是我想自己找些網頁的圖片素材，跟著教程把這個靜態頁面做出來，找素材的過程中，我發現網上很容易找到一些精美網頁模板，下載了幾個下來，發現是非常好的學習素材。
於是我一邊跟著視頻課程做網頁，一邊研究這些模板網頁的布局、樣式。試著用各種方式實現同一種效果，做完一個網頁，把position+float布局，以及flex布局的基礎知識都學會了。
布局搞定，塊級元素的盒裝模型在實踐中也有了更深的理解，網頁的骨架就會做了，再細節，比如用css畫個三角形，畫個陰影啊什麼，慢慢學習就好，到這個階段，就不會覺得「沒有頭緒」了。
我可以負責的告訴你初學者都這樣想要精通除了多練沒有什麼其它方法了
你真的學完了么？這種問題怎麼回答？學完了自然就可以做了，還有什麼怎麼做嗎？你能告訴我你是怎麼學完的嗎？難道你學到時候只是純理論嗎？
沒有別的，找自己喜歡的網頁做練習。都是練出來的最好一個模塊 一個模塊的做。將模塊分開保存記錄。栗子：知乎網頁：上面的導航 你可以單獨寫，然後間隔文件夾，做記錄保存。然後下面的你看著網頁劃分，分開做。最後你嘗試將他們組合在一塊。pc端的網頁需要注意ie。
大神帶你免費學html啦
去看看禪意花園吧
推薦閱讀：
※第一次看HTML教程是怎樣一種體驗？
※普通文檔流的數字串遇到浮動塊為什麼不自動換行而是直接流到浮動塊底部的一行？
※非計算機想從事前端開發，如何找到實習？
※鏈接為什麼都用雙引號？
※用 CSS 實現元素垂直居中，有哪些好的方案？