小花帶你一周入門html+css（七）常見布局及定位使用丨【WEB前端大作戰】

今天我們來了解一下css常見布局及定位使用

等高布局、圣杯布局、固定定位、右下角的彈窗廣告、對聯廣告、導航跟隨、返回頂部等

CSS看似比較繁雜，其實只要掌握了CSS中的盒子模型、定位、以及頁面布局，就基本上掌握了大半啦~這時我們就已經能夠對網頁中各個元素進行精準的排版，做出符合我們意愿的網頁啦！

關于CSS的各種屬性，我們還是可以參考學習HTML那樣。可以說CSS的屬性幾乎完全是語義化的。我們需要改變邊框，那就是“border”，那我們需要右側邊框做一些改變，那就是“border-right”。很明顯，接下來按照我們的需求還有“右邊框的寬度——border-right-with”，”右邊框顏色——border-right-color”等等等，諸如此類~

完全就是我們需要什么，只要憑著需求去尋找。~follow me~

當你做 psd 設計的代碼，發現問題，可能找不到答案或沒有人幫你回答，也不要急，這時最好看看別人網頁的布局結構，主要看 html 布局框架，進行借鑒（當然網上還有很多結構代碼很槽糕）。然后了解美工圖如何分析、如何使用 PS 工具切出需要的素材、如何使用這些切出的圖片素材進行布局、布局技巧、兼容性解決與避免等。

總之：就是讓自己布局時候能知道大的布局結構如何布局，建立布局思想與技巧。

首先我們拿到一張網頁美工圖片我們將從上下、上中下、左右、上中（中包括左右）下布局框架來思考。由此我們寫頁面 CSS 和 html 時候就先從上到下從外到內原則寫 CSS 與 html。

下面我們學習一下常見的布局

1.等高布局

2.圣杯布局

3.固定定位

4.右下角的彈窗廣告

關閉

關閉

6.導航跟隨-如classroom網頁導航一直固定在頂部

不管學前端還是學后端，想提高自己的開發能力，最快的途徑還是多練，因為就算看再多的文檔和教程，自己不真正的動手寫代碼的話，不用兩個月時間所學到的知識就忘記了，在真實項目中會遇到各種問題，不要一遇到問題就到處問別人，要培養自己遇到問題獨立的去解決問題的能力。

可以在網上找別人的項目模仿著做，當你獨立的完成一個項目以后，你會發現你已經入門了。

tips學習小技巧:

學習前端需要方法，更需要一顆平常心，不要把前端想的多難，需要吃什么苦。。。既然學習這么痛苦，為什么不快樂一點學呢？anyway~希望大家可以成為一個優秀的前端！資歷有限，錯誤難免，歡迎大力指正。

【WEB前端大作戰】火熱進行中：https://bbs.huaweicloud.com/blogs/255890

CSS HTML web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。