固定定位

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定定位-陈敏芳</title>
<style type="text/css">
*{
margin: 0;/*外边距*/
padding: 0;/*内边距*/
}
.wrap{
border: 1px #999999 solid;
margin: 0 auto;
width: 75%;
text-align: center;
font-size: 30px;
font-family: "微软雅黑";
font-weight: bolder;
color: #F90;
}
ul{
list-style: none;
}
.elevator{
width: 50px;
position: fixed;
left: 3%;
top: 200px;
}
.elevator li a{
display: block;/*块级化超链接*/
width: 50px;
height: 50px;
line-height: 50px;
color: #625351;
font-size: 20px;
font-family: Arial;
text-align: center;
}
.elevator li a:hover{
background: #c81623;
color: #FFF;
}/*设置鼠标悬停后的样式效果*/
</style>
</head>
<body>
<div class="wrap">
<h1>请滚动本页面</h1>
<p style="margin-top: 500px;">Scroll down</p>
<p style="margin-top: 500px;">Scroll down</p>
<p style="margin-top: 500px;">Scroll down</p>
</div>
<div class="elevator">
<ul>
<li><a href="#">1F</a></li>
<li><a href="#">2F</a></li>
<li><a href="#">3F</a></li>
<li><a href="#">4F</a></li>
<li><a href="#">5F</a></li>
<li><a href="#">6F</a></li>
</ul>
</div>
</body>
</html>

输出效果：

 

posted @ 2022-04-15 23:38  CC9898  阅读(129)  评论(0)    收藏  举报