B站楼梯导航待更新（只使用HTML和CSS）

最新推荐文章于 2024-12-14 13:01:25 发布

bigmeow_lyj

最新推荐文章于 2024-12-14 13:01:25 发布

阅读量616

点赞数

CC 4.0 BY-SA版权

分类专栏：新人练手

本文链接：https://blog.youkuaiyun.com/bigmeow_lyj/article/details/89183703

本文介绍如何仅使用HTML和CSS技术，构建一个类似B站楼梯效果的导航栏。通过实例展示代码实现过程，帮助读者理解并掌握纯前端技术在创建动态导航效果中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>B站楼梯导航</title>
		<style type="text/css">
			body{
				margin: 0;/*清除默认外边距*/
			}
			ul{
				list-style-type: none;/*清除默认列表样式*/
				margin: 0;
				padding: 0;
			}
			.content{
				width:990px ;
				height:400px ;
				border: 2px solid red;
				margin:0 auto;/*外边距自动居中*/
			}
			#lift{
				position: fixed;
				top: 0;
				right: 35px;
				width:50px ;
				/*height: ;导航高度自适应*/
				background: #fff;
				border: 1px solid #bfbfbf;
				border-radius: 5px;/*圆角属性*/
				
			}
			.item{
				text-align: center;
				line-height: 30px;
				cursor: pointer;
				font-size: 12px;
			}
			.item:hover{
				background:deepskyblue;
				color: #fff;/*鼠标滑过,背景变蓝,字体颜色变白*/
			}
		</style>
	</head>
	<body>
		<div class="content">直播</div>
		<div class="content">动画</div>
		<div class="content">番剧</div>
		<div class="content">国创</div&