導(dǎo)航條是網(wǎng)站中常見的元素之一,能夠?yàn)榫W(wǎng)站增添可讀性和美觀性。為了讓導(dǎo)航條更加漂亮,我們可以使用 CSS 對(duì)其進(jìn)行樣式化。
下面是一個(gè)百度百科樣式化的導(dǎo)航條的 CSS 代碼示例:
```css
#nav {
position: relative;
width: 200px;
height: 80px;
#nav > div {
display: table;
width: 100%;
border-collapse: collapse;
#nav > div:nth-child(1) {
width: 100%;
float: left;
#nav > div:nth-child(2) {
width: 80%;
float: right;
#nav > div:nth-child(3) {
width: 20%;
float: center;
#nav > div:nth-child(4) {
width: 10%;
float: bottom;
#nav > div p {
font-size: 18px;
margin: 0;
padding: 0;
#nav a {
display: block;
text-align: center;
margin-bottom: 10px;
color: #333;
text-decoration: none;
#nav a:hover {
color: #fff;
background-color: #007bff;