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

YacaToy 發布于2019-08-01 16:12 / 3467人閱讀

摘要：經過了百度前端技術學院任務三和四五，在這里總結一下前端布局的一些個人見解，很多前端新手就是沒有理解怎么布局而一直學不好先說一下，我個人理解的前端布局的思想吧。

經過了百度前端技術學院任務三和四五，在這里總結一下前端布局的一些個人見解，很多前端新手就是沒有理解怎么布局而一直學不好

先說一下，我個人理解的前端布局的思想吧。
在前端布局的時候，
先不要設計太多什么margin,padding什么的
首先，你要清楚的是，你要的布局是什么
例如，我這里拿百度前端技術學院的任務(5)
作為例子講解一下吧

附：百度前端技術學院的任務(5)

首先，根據題意，我們很容易得知，這是由一個頭尾和內容的布局，布局采用的是類似淘寶雙飛翼布局做成的CSS實現右側固定寬度，左側寬度自適應（點擊鏈接即可知道具體怎么實現）

不過這不是這一篇的重點，重點是上中下布局。怎么實現呢？這里附上html和css代碼

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

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

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

形成了上中下結構之后，再進行其他地方的編輯，注意，其他地方，一般要用class不要濫用id(雖然兩者用起來都差不多)。接下來我，來示范一下CSS實現右側固定寬度，左側寬度自適應的做法吧。

附代碼

#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;
}

這樣就用絕對布局實現了一個比較簡單的右側固定寬度，左側寬度自適應的做法。

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50371.html

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

摘要：經過了百度前端技術學院任務三和四五，在這里總結一下前端布局的一些個人見解，很多前端新手就是沒有理解怎么布局而一直學不好先說一下，我個人理解的前端布局的思想吧。經過了百度前端技術學院任務三和四五，在這里總結一下前端布局的一些個人見解，很多前端新手就是沒有理解怎么布局而一直學不好先說一下，我個人理解的前端布局的思想吧。在前端布局的時候，先不要設計太多什么margin,paddin...

CoyPan 2019-08-30 15:52 評論0 收藏0
百度前端技術學院2017學習總結

摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴大一倍，這樣才有移動與變化的空間。不足及改進總結來看，自己做得不夠，雖然也花了時間，不過能看出有敷衍的成分在。一、前言百度的前端技術學院IFE，2016年就聽說了，當時自己也報名，還組成隊伍了，不過自己一個任務也沒完成就結束了，遺憾... 關注了IFE，知道2017年2月有新的一期培訓，于是一直在等著報名，然后開始做里面發布的任務（...

pkwenda 2019-08-29 12:35 評論0 收藏0
百度前端技術學院2017學習總結

摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴大一倍，這樣才有移動與變化的空間。不足及改進總結來看，自己做得不夠，雖然也花了時間，不過能看出有敷衍的成分在。一、前言百度的前端技術學院IFE，2016年就聽說了，當時自己也報名，還組成隊伍了，不過自己一個任務也沒完成就結束了，遺憾... 關注了IFE，知道2017年2月有新的一期培訓，于是一直在等著報名，然后開始做里面發布的任務（...

ky0ncheng 2019-08-20 16:28 評論0 收藏0
百度前端技術學院2017學習總結

摘要：向已被訪問的鏈接添加樣式。讓背景圖片大小水平方向擴大一倍，這樣才有移動與變化的空間。不足及改進總結來看，自己做得不夠，雖然也花了時間，不過能看出有敷衍的成分在。一、前言百度的前端技術學院IFE，2016年就聽說了，當時自己也報名，還組成隊伍了，不過自己一個任務也沒完成就結束了，遺憾... 關注了IFE，知道2017年2月有新的一期培訓，于是一直在等著報名，然后開始做里面發布的任務（...

Jingbin_ 2019-08-01 16:49 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0