写一段html代码,用CSS配置排版,创建一个具有超链接的横向菜单
时间: 2023-05-31 17:07:43 浏览: 50
好的,下面是您所需的HTML和CSS代码示例:
HTML代码:
```html
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务项目</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
```
CSS代码:
```css
nav {
background-color: #333;
font-size: 0;
}
nav ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
}
nav li a {
display: inline-block;
font-size: 16px;
font-weight: bold;
color: #fff;
text-decoration: none;
padding: 20px;
transition: background-color 0.3s;
}
nav li a:hover {
background-color: #555;
}
```
这段代码将创建一个包含四个菜单选项的导航栏,每个选项都是超链接。CSS代码定义了导航栏的样式和布局,包括背景色、字体大小、列表样式、内边距、字体样式和鼠标悬停效果。这段代码可以根据需要进行调整和修改。