您的位置：首页 > Web前端 > CSS

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

2019-04-10 15:08 155 查看 
<!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>
<div class="content">音乐</div>
<div class="content">舞蹈</div>
<div class="content">游戏</div>
<div class="content">科技</div>
<div class="content">生活</div>
<div class="content">鬼畜</div>
<div class="content">时尚</div>
<div class="content">广告</div>
<div class="content">娱乐</div>
<div class="content">专栏</div>
<div class="content">电影</div>
<div class="content">TV剧</div>
<div class="content">影视</div>
<div class="content">纪录片</div>

<div id="lift">
<ul>
<li class="item">直播</li>
<li class="item">动画</li>
<li class="item">番剧</li>
<li class="item">国创</li>
<li class="item">音乐</li>
<li class="item">舞蹈</li>
<li class="item">游戏</li>
<li class="item">科技</li>
<li class="item">生活</li>
<li class="item">鬼畜</li>
<li class="item">时尚</li>
<li class="item">广告</li>
<li class="item">娱乐</li>
<li class="item">专栏</li>
<li class="item">电影</li>
<li class="item">TV剧</li>
<li class="item">影视</li>
<li class="item">纪录片</li>
</ul>
</div>
</body>
</html>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航