CSS是一種被廣泛應用于前端開發工作中的語言,它可以用于美化HTML網頁的布局與樣式。其中,二級導航是網站中比較常見的一種特殊布局。接下來,我們來看看如何使用CSS來制作一個簡單的二級導航。
.nav { display: flex; justify-content: space-between; align-items: center; background-color: #f7f7f7; padding: 10px; } .nav ul { display: flex; list-style: none; margin: 0; } .nav ul li { margin-right: 20px; } .nav ul li a { color: #333; text-decoration: none; } .nav ul li:hover a { color: #f00; } .sub-nav { display: none; position: absolute; top: 100%; left: 0; background-color: #f7f7f7; } .sub-nav ul { list-style: none; margin: 0; padding: 10px; } .sub-nav ul li { margin-right: 0; } .sub-nav ul li a:hover { color: #f00; } .nav ul li:hover .sub-nav { display: block; }
以上代碼中,我們通過設置.nav元素為display:flex來使其內部的元素橫向排列,通過設置.nav ul的樣式使其內部的li元素橫向排列。接下來,我們通過設置.sub-nav的position為absolute并設置top為100%來使其在父元素下方。最后,我們給.nav ul li:hover .sub-nav這個選擇器添加display:block的樣式,讓鼠標懸停在一級導航上時,相應的二級導航會出現。
上一篇網頁設計第九章css
下一篇網頁設計的css樣式