<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>侧边栏导航条</title>
<style>
body{
margin: 0px;
background-color: lightgray
}
nav{
background-color: white;
text-align: center;
/* 设置nav导航条当浏览器滚动时，固定不动 */
/* position 设置定位方式 所有的标签都有默认的定位方式 static */
/* static 静态位置 不能通过top left bottom right调整自身位置 */
/* fixed 元素会脱离文档流 定位起始位置参考 整个文档流中的第一个元素的起始位置*/
/* 可以通过 top left bottom right 四个方向调整位置*/
position: fixed;
top: 50px;
left: calc((100% - 1020px)/2);
/* 设置在z轴的索引位置 为了防止其他定位的元素遮盖该元素 可以把值设置大一点*/
z-index: 1000;
}
ul{
/* padding 设置内边距 */
/* padding: 10px; */
padding-left: 0;
}
ul > li{
/* 设置列表项前缀样式 */
list-style: none;
width: 100px;
/* margin: 10px 0px; */
padding: 6px 0px;
margin: 2px 0px;
font-size: 13px;
color: rgb(112, 112, 112);
/* 设置鼠标样式 pointer可点击*/
cursor: pointer;
}
/* 当鼠标经过标签时，触发的效果 */
ul > li:hover{
background-color: rgb(244, 68, 68)
}
.active{
background-color: rgb(244, 68, 68);
}
main{
width: 800px;
margin: 0px auto;
background-color: #FFA500
}
</style>
</head>
<body>
<nav>
<!-- 列表 ul 无序列表 ol有序列表-->
<ul>
<li class="active">推荐</li>
<li>关注</li>
<li>专题</li>
<li>程序人生</li>
<li>前端</li>
<li>架构</li>
<li>区块链</li>
<li>编程语言</li>
<li>数据库</li>
<li>游戏开发</li>
<li>移动开发</li>
<li>运维</li>
<li>人工智能</li>
<li>安全</li>
<li>云计算/大数据</li>
<li>物联网</li>
<li>研发管理</li>
<li>计算机基础</li>
<li>音视频开发</li>
<li>其他</li>
</ul>
</nav>
<!-- (p{我是内容}+br+br)*100 -->
<main>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
<p>我是内容</p>
<br>
<br>
</main>
</body>
侧边栏导航条
最新推荐文章于 2025-06-05 11:04:44 发布
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
