成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

百度前端任務(wù)(3)(4)(5)——巧談前端基礎(chǔ)html,css布局

CoyPan / 1456人閱讀

摘要：經(jīng)過(guò)了百度前端技術(shù)學(xué)院任務(wù)三和四五，在這里總結(jié)一下前端布局的一些個(gè)人見(jiàn)解，很多前端新手就是沒(méi)有理解怎么布局而一直學(xué)不好先說(shuō)一下，我個(gè)人理解的前端布局的思想吧。

經(jīng)過(guò)了百度前端技術(shù)學(xué)院任務(wù)三和四五，在這里總結(jié)一下前端布局的一些個(gè)人見(jiàn)解，很多前端新手就是沒(méi)有理解怎么布局而一直學(xué)不好
先說(shuō)一下，我個(gè)人理解的前端布局的思想吧。
在前端布局的時(shí)候，
先不要設(shè)計(jì)太多什么margin,padding什么的
首先，你要清楚的是，你要的布局是什么
例如，我這里拿百度前端技術(shù)學(xué)院的任務(wù)(5)
作為例子講解一下吧

附：百度前端技術(shù)學(xué)院的任務(wù)(5)

首先，根據(jù)題意，我們很容易得知，這是由一個(gè)頭尾和內(nèi)容的布局，布局采用的是類似淘寶雙飛翼布局做成的CSS實(shí)現(xiàn)右側(cè)固定寬度，左側(cè)寬度自適應(yīng)（點(diǎn)擊鏈接即可知道具體怎么實(shí)現(xiàn)）

不過(guò)這不是這一篇的重點(diǎn)，重點(diǎn)是上中下布局。怎么實(shí)現(xiàn)呢？這里附上html和css代碼









#top{
    height: 50px;
    background: black;
}

#content{
    height: 550px;
    background: gray;
}

#footer{
    height: 50px;
    background: blueviolet;
}

形成了上中下結(jié)構(gòu)之后，再進(jìn)行其他地方的編輯，注意，其他地方，一般要用class不要濫用id(雖然兩者用起來(lái)都差不多)。接下來(lái)我，來(lái)示范一下CSS實(shí)現(xiàn)右側(cè)固定寬度，左側(cè)寬度自適應(yīng)的做法吧。

附代碼


    

    


#content{
    height: 550px;
    width: 100%;
    background: gray;
}

.left{
    height: 500px;
    width: 100%;
    margin-left: -200px;
    float: left;
    background: yellow;
}

.right{
    position: absolute;
    top: 0;
    right: 0;
    height: 200px;
    width: 200px;
    background: red;
}

這樣就用絕對(duì)布局實(shí)現(xiàn)了一個(gè)比較簡(jiǎn)單的右側(cè)固定寬度，左側(cè)寬度自適應(yīng)的做法。

然后再在各個(gè)板塊上加上各自的margin,padding屬性就比較很好看了。

但是，可能有很多新手還不是很清楚margin,padding和width屬性到底具體指什么，這里我用一張圖說(shuō)明一下吧。

具體如果還不知道怎么做，可以留言，我會(huì)細(xì)心幫你解答。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116410.html

相關(guān)文章

  • 百度前端任務(wù)(3)(4)(5)——巧談前端基礎(chǔ)html,css布局

    摘要：經(jīng)過(guò)了百度前端技術(shù)學(xué)院任務(wù)三和四五，在這里總結(jié)一下前端布局的一些個(gè)人見(jiàn)解，很多前端新手就是沒(méi)有理解怎么布局而一直學(xué)不好先說(shuō)一下，我個(gè)人理解的前端布局的思想吧。 經(jīng)過(guò)了百度前端技術(shù)學(xué)院任務(wù)三和四五，在這里總結(jié)一下前端布局的一些個(gè)人見(jiàn)解，很多前端新手就是沒(méi)有理解怎么布局而一直學(xué)不好 先說(shuō)一下，我個(gè)人理解的前端布局的思想吧。 在前端布局的時(shí)候， 先不要設(shè)計(jì)太多什么margin,paddin...

    YacaToy 評(píng)論0 收藏0

  • 百度前端技術(shù)學(xué)院2017學(xué)習(xí)總結(jié)

    摘要：向已被訪問(wèn)的鏈接添加樣式。讓背景圖片大小水平方向擴(kuò)大一倍，這樣才有移動(dòng)與變化的空間。不足及改進(jìn)總結(jié)來(lái)看，自己做得不夠，雖然也花了時(shí)間，不過(guò)能看出有敷衍的成分在。 一、前言 百度的前端技術(shù)學(xué)院IFE，2016年就聽(tīng)說(shuō)了，當(dāng)時(shí)自己也報(bào)名，還組成隊(duì)伍了，不過(guò)自己一個(gè)任務(wù)也沒(méi)完成就結(jié)束了，遺憾... 關(guān)注了IFE，知道2017年2月有新的一期培訓(xùn)，于是一直在等著報(bào)名，然后開(kāi)始做里面發(fā)布的任務(wù)（...

    pkwenda 評(píng)論0 收藏0

  • 百度前端技術(shù)學(xué)院2017學(xué)習(xí)總結(jié)

    摘要：向已被訪問(wèn)的鏈接添加樣式。讓背景圖片大小水平方向擴(kuò)大一倍，這樣才有移動(dòng)與變化的空間。不足及改進(jìn)總結(jié)來(lái)看，自己做得不夠，雖然也花了時(shí)間，不過(guò)能看出有敷衍的成分在。 一、前言 百度的前端技術(shù)學(xué)院IFE，2016年就聽(tīng)說(shuō)了，當(dāng)時(shí)自己也報(bào)名，還組成隊(duì)伍了，不過(guò)自己一個(gè)任務(wù)也沒(méi)完成就結(jié)束了，遺憾... 關(guān)注了IFE，知道2017年2月有新的一期培訓(xùn)，于是一直在等著報(bào)名，然后開(kāi)始做里面發(fā)布的任務(wù)（...

    ky0ncheng 評(píng)論0 收藏0

  • 百度前端技術(shù)學(xué)院2017學(xué)習(xí)總結(jié)

    摘要：向已被訪問(wèn)的鏈接添加樣式。讓背景圖片大小水平方向擴(kuò)大一倍，這樣才有移動(dòng)與變化的空間。不足及改進(jìn)總結(jié)來(lái)看，自己做得不夠，雖然也花了時(shí)間，不過(guò)能看出有敷衍的成分在。 一、前言 百度的前端技術(shù)學(xué)院IFE，2016年就聽(tīng)說(shuō)了，當(dāng)時(shí)自己也報(bào)名，還組成隊(duì)伍了，不過(guò)自己一個(gè)任務(wù)也沒(méi)完成就結(jié)束了，遺憾... 關(guān)注了IFE，知道2017年2月有新的一期培訓(xùn)，于是一直在等著報(bào)名，然后開(kāi)始做里面發(fā)布的任務(wù)（...

    Jingbin_ 評(píng)論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒(méi)想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

    princekin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<