web前端工程師是否是都討厭寫CSS，都是什麼心態

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

還據說後端程序員這樣描述咱們的css，說比寫後端程序麻煩多了。。。

這是由於你尚未掌握寫css的訣竅，下面我就來說講如何簡單快速的寫出能夠兼容的css代碼：

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

首先，咱們要請設計師出一個設計圖，而後請工人去按照設計圖裝修房子。

回到咱們的佈局中，首先咱們會拿到一張UI設計師給咱們的視覺設計稿：

例如：

這是設計師給咱們的設計稿，首先咱們須要劃分版塊：

有了框架之後，咱們就好作多了，根據劃分的板塊，設置寬高，背景色

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

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

導航 <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;

}

產品部分：

<div class=」product」></div>

.product{

width:1000px;

height:420px;

background:gray;

}

底部：

<div class=」footer」></div>

.footer{

width:1000px;

height:80px;

background:yellow;

}

經過劃分板塊，咱們就把一個複雜的頁面簡單化了，而後這樣去寫css就會發現沒有那麼複雜了，並且板塊被劃分好後，整個頁面也顯得很是清晰了

這個時候，咱們就能夠在這牢固的框架中去填充具體的內容了。

或者咱們能夠把寫css樣式的過程看作是給一個新娘化妝，總共分幾步，先化眉毛，再化眼影，眼線，最後塗口紅和腮紅

當咱們把框架搭出來後，再去填充內容就很簡單了，這就比如像超市裏面的貨物分類同樣，當咱們分區後，再去尋找本身想要的東西，那就很是方便了。

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