CSS中的
上述代碼是
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
nav ul li {
margin-left: 1rem;
}
nav ul li:first-child {
margin-left: 0;
}
nav ul li a {
display: block;
padding: 1rem;
color: #333;
text-decoration: none;
transition: all 0.3s ease-in-out;
}
nav ul li a:hover {
color: #fff;
background-color: #333;
}上述代碼中，我們使用了flex布局來居中導航欄。每個鏈接都有一定的左邊距，第一個鏈接沒有左邊距。鏈接的樣式也進行了設計，當鼠標懸停在鏈接上時，鏈接的顏色和背景色會改變。