最近有很多剛剛步入前端行業(yè)的人說，一提到要寫css樣式就頭疼，還要兼容各種瀏覽器，更是不知所措了。。。

還聽說后端程序員這樣描述我們的css，說比寫后端程序麻煩多了。。。

這是因為你還沒有掌握寫css的訣竅，下面我就來講講如何簡單快速的寫出可以兼容的css代碼：

我們很形象的把寫css的過程比喻成給裝修房子的過程。

首先，我們要請設(shè)計師出一個設(shè)計圖，然后請工人去按照設(shè)計圖裝修房子。

回到我們的布局中，首先我們會拿到一張UI設(shè)計師給我們的視覺設(shè)計稿：

例如：

這是設(shè)計師給我們的設(shè)計稿，首先我們需要劃分版塊：

有了框架以后，我們就好做多了，根據(jù)劃分的板塊，設(shè)置寬高，背景色

頭部 <div class=”header”></div>

.header{width:1000px;height:100px; background:red;}

導(dǎo)航  <div class=”nav”></div>

.nav{width:1000px;height:60px; background:black;}

Banner部分   <div class=”banner”></div>

.banner{width:1000px;height:60px;background:orange;}

新聞部分 

<div class=”news”>

             <div class=”news_one”></div>

             <div class=”news_two”></div>

             <div class=”news_three”></div>

</div>

.news{

        width:1000px;

        height:260px;

        background:blue;

}

.news_one{

      width:500px;

      height:260px;

      float:left;

}

.news_two{

      width:500px;

      height:260px;

      float:left;

}

.news_three{

      width:500px;

      height:260px;

      float:left;

}

產(chǎn)品部分：

<div class=”product”></div>

.product{

        width:1000px;

        height:420px;

       background:gray;

}

底部：

<div class=”footer”></div>

.footer{

      width:1000px;

      height:80px;

     background:yellow;

}

通過劃分板塊，我們就把一個復(fù)雜的頁面簡單化了，然后這樣去寫css就會發(fā)現(xiàn)沒有那么復(fù)雜了，而且板塊被劃分好后，整個頁面也顯得非常清晰了

這個時候，我們就可以在這牢固的框架中去填充具體的內(nèi)容了。

或者我們可以把寫css樣式的過程看做是給一個新娘化妝，總共分幾步，先化眉毛，再化眼影，眼線，最后涂口紅和腮紅

當(dāng)我們把框架搭出來后，再去填充內(nèi)容就很簡單了，這就好比像超市里面的貨物分類一樣，當(dāng)我們分區(qū)后，再去尋找自己想要的東西，那就非常方便了。

好了，今天我們就先聊到這里，希望小編的方法能讓你的css樣式變得更加清晰有條理。