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

還聽(tīng)說(shuō)后端程序員這樣描述我們的css，說(shuō)比寫(xiě)后端程序麻煩多了。。。

這是因?yàn)槟氵€沒(méi)有掌握寫(xiě)css的訣竅，下面我就來(lái)講講如何簡(jiǎn)單快速的寫(xiě)出可以兼容的css代碼：

我們很形象的把寫(xiě)css的過(guò)程比喻成給裝修房子的過(guò)程。

首先，我們要請(qǐng)?jiān)O(shè)計(jì)師出一個(gè)設(shè)計(jì)圖，然后請(qǐng)工人去按照設(shè)計(jì)圖裝修房子。

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

例如：

這是設(shè)計(jì)師給我們的設(shè)計(jì)稿，首先我們需要?jiǎng)澐职鎵K：

有了框架以后，我們就好做多了，根據(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;

}

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

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

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

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

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