HTML横排菜单代码怎么打
时间: 2024-09-19 16:00:17 浏览: 37
jQuery自适应横排下拉菜单导航代码
HTML中的横排菜单通常通过`<ul>`和`<li>`元素创建无序列表来实现,它们分别表示"无序列表"和"列表项"。下面是一个简单的水平导航菜单的例子:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
ul {
list-style-type: none; /* 移除默认的点 */
margin: 0;
padding: 0;
overflow: hidden; /* 防止下拉 */
background-color: #f1f1f1;
}
li {
float: left; /* 让列表项并排显示 */
}
li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</body>
</html>
```
在这个例子中,`<a>`标签用于链接每个列表项。当鼠标悬停在链接上时,背景颜色会发生变化。
阅读全文