HTML网站导航九宫格代码
以下是一个简单的HTML和CSS示例，用于创建一个九宫格样式的导航菜单。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>九宫格导航</title>
<style>
.nav-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 300px;
margin: auto;
}
.nav-item {
background-color: #f2f2f2;
border: 1px solid #ddd;
text-align: center;
padding: 10px;
font-family: Arial, sans-serif;
}
.nav-item:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<div class="nav-container">
<a href="#" class="nav-item">首页</a>
<a href="#" class="nav-item">关于我们</a>
<a href="#" class="nav-item">产品服务</a>
<a href="#" class="nav-item">解决方案</a>
<a href="#" class="nav-item">新闻动态</a>
<a href="#" class="nav-item">联系方式</a>
<a href="#" class="nav-item">合作伙伴</a>
<a href="#" class="nav-item">登录</a>
<a href="#" class="nav-item">注册</a>
</div>
</body>
</html>这段代码使用了CSS Grid布局来创建九宫格效果，其中.nav-container是一个使用了grid-template-columns: repeat(3, 1fr);的网格容器，这意味着它将被分成三列，每列占用相同的空间。.nav-item是九宫格中的每一个格子，并且使用了hover伪类来改变鼠标悬停时的背景色。
这个示例提供了一个简单的方法来创建一个九宫格导航，可以根据实际需求进行样式调整和功能添加。
评论已关闭