帮我编写一个快递网站首页的侧边悬浮导航栏,内容包括寄送快递,查询快递,联系我们
时间: 2024-03-02 11:50:53 浏览: 124
好的,以下是一个简单的侧边悬浮导航栏的代码,可以放在网站的首页中。
```html
<div class="side-nav">
<ul>
<li><a href="#send">寄送快递</a></li>
<li><a href="#query">查询快递</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</div>
```
您可以将该代码放在网页的 `<body>` 标签中,然后使用 CSS 样式进行美化。
```css
.side-nav {
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
z-index: 9999;
background-color: #fff;
border-radius: 5px;
padding: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.side-nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.side-nav li {
margin-bottom: 10px;
}
.side-nav a {
display: block;
padding: 5px 10px;
border-radius: 3px;
text-decoration: none;
color: #333;
font-size: 16px;
font-weight: bold;
}
.side-nav a:hover {
background-color: #eee;
}
```
在该 CSS 样式中,我设置了导航栏的位置为固定,并且在页面的左侧。同时,我使用了一些简单的样式来美化导航栏,包括背景颜色、边框、圆角等等。您可以根据自己的需求进行调整。
阅读全文