制作水平菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Menu Example</title>
<style>
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.menu ul li {
float: left;
}
.menu ul li a {
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.menu ul li a:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
这个示例中，我们创建了一个名为.menu的<div>容器，其中包含一个无序列表<ul>。列表中的每个<li>元素都包含一个链接<a>。
CSS部分定义了菜单的样式：
.menu ul：设置了列表的样式类型为无（list-style-type: none;），去除了默认的边距和填充（margin: 0; padding: 0;），并设置了溢出隐藏（overflow: hidden;）。
.menu ul li：将<li>元素设置为浮动在左侧（float: left;）。
.menu ul li a：设置了链接的样式，包括显示为块级元素（display: block;），颜色、对齐方式、填充和文本装饰。
.menu ul li a:hover：定义了鼠标悬停在链接上时的背景颜色。
这个示例展示了如何使用HTML和CSS创建一个简单的水平菜单。你可以根据自己的需求修改样式和内容。
| 
发表于 2024-10-4 12:14:46
