1.當(dāng)我第一次看到這個小節(jié)的標(biāo)題時,我不是很理解什么是浮動背景,更不用說固定內(nèi)容了。幸好作者給出了幾個網(wǎng)站,我好像明白了!(如果不正確,請指出)
大家可以先看看這些網(wǎng)站的效果,再來閱讀下文
大家可以嘗試改變?yōu)g覽器窗口寬度(滾輪縮放一下),大概就能看到效果了。
用W3School的頁面對比一下,可以更明顯的感覺到(W3School的背景并不是浮動的)
2.這個效果我們常用于頁尾,也建議用于頁尾
小練習(xí)
html
<footer>
<div class="wrapper">
<!-- Footer content here -->
</div>
</footer>
css
footer{
background: #333;
padding: 1em calc(50% - 450px);
}
.wrapper{
background: #ccc;
height: 200px;
}
我們并沒有設(shè)置內(nèi)容wrapper寬度,而是以padding形式來設(shè)置的
這里的寬度為 450*2 = 900px