用HTML写出悬浮与网页右侧的导航栏,宽度为10%,高度为100%,导航栏从上到下包含头像、圆形通知按钮、邮箱链接、和退出按钮
时间: 2024-05-01 18:19:50 浏览: 14
以下是HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>悬浮导航栏</title>
<style>
/* 设置悬浮导航栏样式 */
#nav {
position: fixed;
top: 0;
right: 0;
width: 10%;
height: 100%;
background-color: #f2f2f2;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 20px 0;
}
/* 设置圆形通知按钮样式 */
.notification {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background-color: #ff4d4d;
border-radius: 50%;
color: #fff;
font-size: 20px;
margin-bottom: 20px;
}
/* 设置退出按钮样式 */
.logout {
padding: 10px;
background-color: #000;
color: #fff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="nav">
<!-- 头像 -->
<img src="头像链接" alt="头像" width="80" height="80">
<!-- 圆形通知按钮 -->
<div class="notification">3</div>
<!-- 邮箱链接 -->
<a href="邮箱链接">邮箱</a>
<!-- 退出按钮 -->
<button class="logout">退出</button>
</div>
</body>
</html>
```
其中,通过设置 `position: fixed;` 和 `top: 0; right: 0;` 让导航栏固定在页面右侧,并且始终悬浮在页面上方。使用 `display: flex;` 和 `flex-direction: column;` 让导航栏中的元素纵向排列,并且使用 `justify-content: space-between;` 让元素之间均匀分布。使用 `box-shadow` 属性添加阴影效果,通过 `z-index` 属性设置导航栏的 z 轴层级,使其始终在其他元素之上。最后,使用 `padding` 属性为导航栏添加内边距,增加空隙,使其更美观。