- 相關(guān)推薦
網(wǎng)站制作頁腳如何自適應(yīng)布局
網(wǎng)頁設(shè)計(jì)是指使用標(biāo)識語言(markup language)，通過一系列設(shè)計(jì)、建模、和執(zhí)行的過程將電子格式的信息通過互聯(lián)網(wǎng)傳輸，最終以圖形用戶界面(GUI)的形式被用戶所瀏覽。下面小編給大家分享的是學(xué)習(xí)網(wǎng)站制作頁腳如何自適應(yīng)布局，在這里詳細(xì)的介紹了學(xué)習(xí)網(wǎng)站制作頁腳如何自適應(yīng)布局 ，希望對大家有所幫助.
1、為了讓 footer 能夠剛好在最下方，網(wǎng)站制作時可以給footer加一個等于自身高度的上方的負(fù)邊距強(qiáng)制把它向上推一個自身的高度，即 margin-top: -50px; 。但是這樣的話當(dāng)內(nèi)容超過一屏我們會看到內(nèi)容會蓋在 footer 的上方，顯然這是失敗的。所以我們還要給 content-box 和 sidebar 加一個父級元素，設(shè)定它的下方內(nèi)補(bǔ)丁等于 footer 的高度，強(qiáng)制把 content-box 和 sidebar 向上推一個 footer 的高度。同時，因?yàn)?content-box 和 sidebar 是浮動元素，所以我們還要讓它 閉合浮動元素 。
2、加上頁頭頁腳和內(nèi)容部分，為了讓 footer 在最下方，我們當(dāng)然要把 footer“請出”wrapper 之外。當(dāng)然，這樣高度就超過一屏了，別急，后面有解決辦法。
#header { background: Green; height: 40px; } #sidebar { float: left; width: 200px; background: Gray; } #content-box { float: right; width: 570px; background: Olive; } #footer { height: 50px; background: Background; width:770px; margin: auto; }
3、為了讓瀏覽器識別高度100%在網(wǎng)站制作時需要先給html和body加上一個高度值，同時清除所有元素的margin和padding。順便提一下，經(jīng)過我的測試，html 和 body 的 height: 100%; 等于整個瀏覽器窗口的總高度，無論內(nèi)容是否超過一屏。而它們下一級子元素 height: 100%; 則等于第一屏的高度。如何，是不是有點(diǎn)不好理解?
* { margin: 0; padding: 0; } html, body { height: 100%; }2、因?yàn)樯厦嫣岬降膯栴}，所以為了讓布局自適應(yīng)高度，我們要加上 min-height: 100%;，雖然IE不支持這個屬性但是IE的 height: 100%; 有同樣的作用：
#wrapper { min-height: 100%; } * html #wrapper { height: 100%; } 這樣，一個最簡單的最小高度滿一屏的自適應(yīng)布局就做好了。
【網(wǎng)站制作頁腳如何自適應(yīng)布局】相關(guān)文章：
如何設(shè)計(jì)制作自適應(yīng)網(wǎng)頁10-24
如何制作自適應(yīng)網(wǎng)頁設(shè)計(jì)10-15
如何設(shè)計(jì)制作自適應(yīng)網(wǎng)頁11-05
響應(yīng)式網(wǎng)站布局設(shè)計(jì)09-13