// 引入jQuery
<script src="../js/jquery-3.2.1.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#menu {
position: fixed;
top: 25%;
left: 40px;
width: 30px;
border: 1px solid;
}
#menu ul li {
position: relative;
width: 30px;
height: 30px;
list-style: none;
text-align: center;
line-height: 30px;
font-size: 12px;
cursor: pointer;
border-bottom: 1px dotted #AAAAAA;
}
#menu ul li.last {
background: #ccc;
color: black;
border-bottom: none;
}
#menu ul li span {
display: none;
width: 30px;
height: 30px;
position: absolute;
top: 0;
left: 0;
color: red;
}
#menu ul li:hover span {
display: block;
background: darkred;
color: white;
}
#menu ul li span.active {
display: block;
background: darkred;
color: white;
}
#menu ul li:hover span.active {
display: block;
background: darkred;
color: white;
}
#header,
#main,
#footer {
margin: auto;
width: 1000px;
text-align: center;
font-size: 40px;
font-weight: bold;
line-height: 500px;
}
#main div {
height: 700px;
font-size: 50px;
color: honeydew;
line-height: 700px;
}
#header {
height: 500px;
js jq爬楼梯效果 鼠标滚动 点击回到顶部 点击左边楼层切换
最新推荐文章于 2022-05-07 11:23:04 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)