如果我們想要在網頁中添加一個導航欄,那么可以使用HTML中的
- 標簽。下面是一個簡單的例子:
<ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>
上面的代碼會生成一個基本的導航欄,其中有Home、About、Contact三個鏈接。
如果我們想要美化這個導航欄,可以為它添加CSS樣式。例如,我們可以給
- 標簽添加一個類名稱,然后為這個類名稱定義樣式:
<style> .nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } .nav li { float: left; } .nav li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .nav li a:hover { background-color: #111; } </style> <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>
上面的CSS樣式為導航欄添加了背景顏色、鼠標懸停效果等。這樣的導航欄看起來更加美觀和專業。