<!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"
B站楼梯导航待更新(只使用HTML和CSS)
最新推荐文章于 2022-09-22 22:02:48 发布
本文介绍如何仅使用HTML和CSS技术,构建一个类似B站楼梯效果的导航栏。通过实例展示代码实现过程,帮助读者理解并掌握纯前端技术在创建动态导航效果中的应用。
摘要由CSDN通过智能技术生成