2020国产成人精品视频,性做久久久久久久久,亚洲国产成人久久综合一区,亚洲影院天堂中文av色

分享

web前端:怎樣學(xué)好css

 好程序員IT 2019-07-16

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

    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約