/* HTML 代码 */ <nav id="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于大家</a></li> <li><a href="#">联系大家</a></li> </ul> </nav> /* CSS 代码 */ #nav { background-color: #f2f2f2; } #nav ul { margin: 0; padding: 0; list-style-type: none; text-align: center; } #nav li { display: inline-block; margin: 0; } #nav li a { display: block; padding: 10px 20px; text-decoration: none; color: #444; } #nav li a:hover { background-color: #ddd; }
首先,在使用之前需要添加一个
其次,使用CSS让列表项排成一行,也就是使用display: inline-block;
,它可以让列表项垂直居中。接下来,在列表项上加上a
标签,以使它们成为链接,然后设置这些标签的样式,如设置字体大小、内边距、颜色等。
最后,对a:hover
进行样式设置,使鼠标悬停时显示背景色,使用户可以更好地感知链接的位置。
以上就是制作 CSS 导航菜单的基本步骤,开发者可以根据自己的需求进行具体的样式设置。通过使用 CSS 导航菜单,网站设计可以更加美观和易用,提高用户体验。