在網(wǎng)頁制作中,經(jīng)常使用
footer { display: none; }
如上代碼是導(dǎo)致<footer>
標(biāo)簽的顯示屬性設(shè)置為none,這樣就無法在網(wǎng)頁上看到<footer>
。如果出現(xiàn)這種情況,我們應(yīng)該檢查樣式表中的display
屬性,然后將其更正為display: block;
或者display: flex;
,這樣就可以正常顯示了。
另外,有時(shí)候我們會(huì)在<body>
標(biāo)簽中設(shè)置底部欄,但是這樣會(huì)造成頁面結(jié)構(gòu)混亂。正確的做法是將<footer>
標(biāo)簽放置在<body>
標(biāo)簽的末尾,然后在樣式表中設(shè)置其樣式。
body { padding-bottom: 50px; } footer { position: absolute; bottom: 0; width: 100%; height: 50px; background-color: #ccc; }
上述代碼中,我們通過設(shè)置position: absolute;
和bottom: 0;
來讓<footer>
標(biāo)簽固定在頁面底部,并設(shè)置了它的寬度和高度以及背景顏色。這是一種常見的底部欄樣式。
綜上所述,在網(wǎng)頁制作過程中,<footer>
不顯示的原因有很多,但大多數(shù)情況下是由于樣式屬性設(shè)置錯(cuò)誤所導(dǎo)致的。我們只需要反復(fù)檢查樣式表,確保每一個(gè)屬性都得到正確的設(shè)置,就能解決這些問題。