右侧边横平导航栏html代码
时间: 2023-12-04 17:40:56 浏览: 68
简单的jQuery点击按钮弹出侧边导航栏代码
以下是一个简单的右侧边横平导航栏的HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>右侧边横平导航栏</title>
<style>
/* 设置导航栏样式 */
.navbar {
position: fixed; /* 固定在页面右侧 */
top: 50%; /* 垂直居中 */
transform: translateY(-50%); /* 垂直居中 */
right: 0; /* 靠右对齐 */
background-color: #333; /* 背景颜色 */
padding: 20px; /* 内边距 */
border-radius: 10px; /* 圆角 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 阴影 */
}
/* 设置导航栏链接样式 */
.navbar a {
display: block; /* 块级元素 */
color: #fff; /* 文字颜色 */
text-decoration: none; /* 去掉下划线 */
margin-bottom: 10px; /* 底部外边距 */
padding: 10px; /* 内边距 */
border-radius: 5px; /* 圆角 */
transition: background-color 0.3s ease; /* 过渡效果 */
}
/* 设置导航栏链接悬停样式 */
.navbar a:hover {
background-color: #555; /* 背景颜色 */
}
</style>
</head>
<body>
<div class="navbar">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
<a href="#">链接4</a>
<a href="#">链接5</a>
</div>
</body>
</html>
```
阅读全文