傲世皇朝新闻 news
全国服务热线:0898-08980898
联系我们 contact us
- 地址:
- 海南省海口市
- 邮箱:
- admin@youweb.com
- 电话:
- 0898-08980898
- 传真:
- 1234-0000-5678
抖音电脑网页版正式上线添加时间:2024-01-08
以下是一个简单的抖音网页版侧边导航栏的HTML和CSS代码示例:
HTML代码:
```html
<div class="sidebar">
<a href=https://blog.csdn.net/weixin_39787242/article/details/"#" class="active">首页</a>
<a href=https://blog.csdn.net/weixin_39787242/article/details/"#">关注</a>
<a href=https://blog.csdn.net/weixin_39787242/article/details/"#">发现</a>
<a href=https://blog.csdn.net/weixin_39787242/article/details/"#">附近</a>
<a href=https://blog.csdn.net/weixin_39787242/article/details/"#">消息</a>
<a href=https://blog.csdn.net/weixin_39787242/article/details/"#">我</a>
</div>
```
CSS代码:
```css
.sidebar {
position: fixed;
top: 50px;
bottom: 0;
left: 0;
width: 80px;
background-color: #fff;
border-right: 1px solid #ddd;
}
.sidebar a {
display: block;
padding: 12px 16px;
color: #999;
text-decoration: none;
font-size: 14px;
text-align: center;
transition: background-color 0.3s;
}
.sidebar a:hover {
background-color: #f5f5f5;
}
.sidebar a.active {
background-color: #ee1c23;
color: #fff;
}
```
这段代码创建了一个固定在页面左侧的侧边导航栏,包含了抖音的几个主要页面链接。当鼠标悬停在链接上时,链接的背景色会变为灰色;当链接是当前页面时,链接的背景色为红色,文字为白色。你可以根据自己的需要进行修改和调整。