最近有很多剛剛步入前端行業(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樣式變得更加清晰有條理。 |
|