\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E.nav{width:1000px。"\u003Cdiv\u003E\u003Cp\u003E好程序員web前端分享怎樣學好css，最近有很多剛剛步入前端行業的人說，一提到要寫css樣式就頭疼，還要兼容各種瀏覽器，更是不知所措了。。。\u003C\u002Fp\u003E\u003Cp\u003E還聽說後端程序員這樣描述我們的css，說比寫後端程序麻煩多了。。。\u003C\u002Fp\u003E\u003Cp\u003E這是因爲你還沒有掌握寫css的訣竅，下面我就來講講如何簡單快速的寫出可以兼容的css代碼：\u003C\u002Fp\u003E\u003Cp\u003E我們很形象的把寫css的過程比喻成給裝修房子的過程。\u003C\u002Fp\u003E\u003Cp\u003E首先，我們要請設計師出一個設計圖，然後請工人去按照設計圖裝修房子。\u003C\u002Fp\u003E\u003Cp\u003E回到我們的佈局中，首先我們會拿到一張UI設計師給我們的視覺設計稿：\u003C\u002Fp\u003E\u003Cp\u003E例如：\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F6f8cbe92ba2947cfaaa9ad3663a8c9fb\" img_width=\"743\" img_height=\"1115\" alt=\"好程序員web前端分享怎樣學好css\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E這是設計師給我們的設計稿，首先我們需要劃分版塊：\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F197c5b3f1c584f80ad8fbf0f0d71475a\" img_width=\"767\" img_height=\"1150\" alt=\"好程序員web前端分享怎樣學好css\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E有了框架以後，我們就好做多了，根據劃分的板塊，設置寬高，背景色\u003C\u002Fp\u003E\u003Cp\u003E頭部 <div class=”header”><\u002Fdiv>\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E.header{width:1000px;height:100px; background:red;}\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F63e5ba6843214b1e9e2e92aae37467e4\" img_width=\"668\" img_height=\"68\" alt=\"好程序員web前端分享怎樣學好css\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E導航 <div class=”nav”><\u002Fdiv>\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E.nav{width:1000px;height:60px; background:black;}\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F6d6ec43a83d94836b724b21afbf6d647\" img_width=\"673\" img_height=\"36\" alt=\"好程序員web前端分享怎樣學好css\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003EBanner部分 <div class=”banner”><\u002Fdiv>\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E.banner{width:1000px;height:60px;background:orange;}\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp9.pstatp.com\u002Flarge\u002Fpgc-image\u002F99e76f6973ae463c906ec5d2f7f3caa1\" img_width=\"671\" img_height=\"314\" alt=\"好程序員web前端分享怎樣學好css\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E新聞部分 \u003C\u002Fp\u003E\u003Cp\u003E<div class=”news”>\u003C\u002Fp\u003E\u003Cp\u003E <div class=”news_one”><\u002Fdiv>\u003C\u002Fp\u003E\u003Cp\u003E <div class=”news_two”><\u002Fdiv>\u003C\u002Fp\u003E\u003Cp\u003E <div class=”news_three”><\u002Fdiv>\u003C\u002Fp\u003E\u003Cp\u003E<\u002Fdiv>\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E.news{\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E width:1000px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E height:260px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E background:blue;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E}\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E.news_one{\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E width:500px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E height:260px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E float:left;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E}\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E.news_two{\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E width:500px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E height:260px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E float:left;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E}\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E.news_three{\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E width:500px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E height:260px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E float:left;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E}\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002Fff662de24fd349cd9d6d41744d641ce3\" img_width=\"673\" img_height=\"166\" alt=\"好程序員web前端分享怎樣學好css\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E產品部分：\u003C\u002Fp\u003E\u003Cp\u003E<div class=”product”><\u002Fdiv>\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E.product{\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E width:1000px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E height:420px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E background:gray;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E}\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F726e9874753b4f01a27632e48fbabe85\" img_width=\"672\" img_height=\"168\" alt=\"好程序員web前端分享怎樣學好css\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E底部：\u003C\u002Fp\u003E\u003Cp\u003E<div class=”footer”><\u002Fdiv>\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E.footer{\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E width:1000px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E height:80px;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E background:yellow;\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E}\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F68d9e2851cf14a08bd1ef8c63168ac22\" img_width=\"669\" img_height=\"59\" alt=\"好程序員web前端分享怎樣學好css\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E通過劃分板塊，我們就把一個複雜的頁面簡單化了，然後這樣去寫css就會發現沒有那麼複雜了，而且板塊被劃分好後，整個頁面也顯得非常清晰了\u003C\u002Fp\u003E\u003Cp\u003E這個時候，我們就可以在這牢固的框架中去填充具體的內容了。\u003C\u002Fp\u003E\u003Cp\u003E或者我們可以把寫css樣式的過程看做是給一個新娘化妝，總共分幾步，先化眉毛，再化眼影，眼線，最後塗口紅和腮紅\u003C\u002Fp\u003E\u003Cp\u003E當我們把框架搭出來後，再去填充內容就很簡單了，這就好比像超市裏面的貨物分類一樣，當我們分區後，再去尋找自己想要的東西，那就非常方便了。\u003C\u002Fp\u003E\u003Cp\u003E好了，今天我們就先聊到這裏，希望小編的方法能讓你的css樣式變得更加清晰有條理。\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E"'.slice(6, -6), groupId: '6714187189892153870