CSS3底部導航欄是一種常用的網(wǎng)頁設計元素,可以讓網(wǎng)站的頁面結構更加清晰、易讀。
<nav class="footer-nav"> <ul> <li><a href="#">首頁</a></li> <li><a href="#">分類</a></li> <li><a href="#">最新</a></li> <li><a href="#">關于我們</a></li> </ul> </nav>
以上是一個簡單的底部導航欄的HTML結構,其中
.footer-nav { position: fixed; bottom: 0; z-index: 999; width: 100%; background-color: #333; } .footer-nav ul { display: flex; justify-content: space-around; list-style: none; padding: 0; margin: 0; } .footer-nav ul li a { display: block; color: #fff; padding: 1rem; text-decoration: none; } .footer-nav ul li a:hover { background-color: #555; }
以上是CSS樣式規(guī)則的代碼,其中使用了flex布局來實現(xiàn)等距分布的效果,同時設置了底部固定和高層級(z-index)的屬性。