写一个明日方舟的项目导航栏
时间: 2024-09-10 08:28:44 浏览: 35
在创建一个明日方舟主题的游戏项目导航栏时,你需要考虑设计简洁易懂,与游戏世界观相符。下面是一个基本的HTML和CSS示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>明日方舟项目导航</title>
<style>
.navbar {
display: flex;
justify-content: space-between;
background-color: #36393f; /* 主色调 */
padding: 10px;
font-family: Arial, sans-serif;
}
.nav-links {
list-style-type: none;
}
.nav-links li {
margin-right: 20px;
}
.nav-links a {
color: white;
text-decoration: none;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: #e74c3c; /* 鼠标悬停颜色 */
}
.logo {
width: auto;
height: 50px;
margin-left: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#" class="logo" title="明日方舟Logo">明日方舟</a>
<ul class="nav-links">
<li><a href="#首页">首页</a></li>
<li><a href="#角色介绍">角色介绍</a></li>
<li><a href="#活动专区">活动专区</a></li>
<li><a href="#攻略指南">攻略指南</a></li>
<li><a href="#论坛交流">论坛交流</a></li>
</ul>
</div>
</body>
</html>
```
在这个例子中,我们有导航栏标题“明日方舟”,以及五个链接分别指向首页、角色介绍、活动专区、攻略指南和论坛交流。可以根据实际需要调整链接内容和样式。