CSS一级菜单顶部是网站导航栏中的一种常见设计,通过CSS编写代码实现。如下是实现一个简单一级菜单顶部的示例代码:<nav> <ul> &
CSS一级菜单顶部是网站导航栏中的一种常见设计,通过CSS编写代码实现。如下是实现一个简单一级菜单顶部的示例代码:
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <style> nav ul { list-style: none; margin: 0; padding: 0; background-color: #333; } nav li { display: inline-block; margin-right: 20px; } nav a { display: block; color: #fff; text-decoration: none; padding: 10px; } nav a:hover { background-color: #555; } </style>
以上代码使用了HTML标签nav、ul、li和a,以及CSS样式设置了菜单的样式。其中,nav ul设置了列表样式为空,margin、padding和背景颜色等属性;nav li使用display:inline-block设置列表项在同一行显示,并设置了右侧间距;nav a设置链接样式,并设置了内边距;nav a:hover用于设置链接处于鼠标悬停状态时的背景颜色。通过这些设置,实现了一个简单的一级菜单顶部。
粉丝
0
关注
0
收藏
0