纯CSS实现带返回顶部右侧悬浮菜单
YC言初 人气:0这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果，如下图，
使用工具是Hbuilder。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1662617_jrv9w59at58.css"/>
<style type="text/css">
/*返回顶部*/
.return-top{
font-family:"微软雅黑" ;
height: 350px;
width: 100px;
padding: 10px 0 0 30px;
right: 0;
bottom: 30%;
margin: auto;
position: fixed;
background: #FFFFFF;
box-shadow: 0 4px 12px 0 rgba(7,17,27,.1);
}
.return-top>ul>li{
list-style-type: none;
padding-bottom: 30px;
}
.return-top .one{
width: 100px;
position: absolute;
left: -50px;
text-align: center;
}
.clearfix::after{
content: "";
display: block;
clear: both;
}
.return-top>ul>li>span>a{
font-size: 50px;
text-decoration: none;
}
.return-top .one li{
list-style-type: none;
}
.return-top .one>li{
width: 150px;
}
.return-top .one>li a{
text-decoration: none;
color: #000;
}
.return-top .one>li .two{
display: none;
width: 250px;
height: 300px;
position: absolute;
right: 95px;
top: -25px;
}
.return-top .one>li .two .homework{
line-height: 2em;
text-align: left;
box-sizing: border-box;
font-size: 23px;
background: #fff;
height: 150px;
box-shadow: 0 4px 12px 0 rgba(7,17,27,.1);
}
.return-top .one>li .two .homework li a:hover{
color: gainsboro;
}
.return-top .one>li:hover .two{
display: block;
}
.two .con{
width: 180px;
height: 360px;
background: #fff;
box-shadow: 0 4px 12px 0 rgba(7,17,27,.1);
margin-left: 30px;
}
.two img{
width: 120px;
height: 120px;
margin-left: -40px;
}
.two .con>span a{
text-align: center;
margin-left: -60px;
color: #000000;
font-size: 16px;
font-family:"微软雅黑" ;
}
/*返回结束*/
</style>
</head>
<body>
<!--悬浮返回顶部-->
<div class="return-top">
<ul class="one clearfix" >
<li>
<span class="iconfont">
<a href="homework.html"title="我的作业"></a>
</span>
<div class="two">
<ul class="homework">
<li><a href="homework.html"title="我的作业">我的作业</a></li>
<li><a href="second_index.html"title="返回首页">返回首页</a></li>
</ul>
</div>
</li>
<li>
<span class="iconfont">
<a href="" title="联系我"></a>
<div class="two">
<ul class="con">
<li><a href=""title="言初森语"><img src="../images/WEIMA.jpg"/></a></li>
<p><a href="">微信公众号</a></p>
<li><a href=""title="微信"><img src="../images/weixin.jpg"/></a></li>
<p><a href="">联系我</a></p>
</ul>
</div>
</span>
</li>
<li>
<span class="iconfont"><a href="#all" title="返回顶部"></a></span>
</li>
<li>
<span class="iconfont"><a href="second_index.html" title="返回首页"></a></span>
</li>
</ul>
</div>
<!--悬浮返回顶部结束-->
</body>
</html>
主要用到的知识点：
1.定位（position属性）
常用的三个可能值：
（1）position:relative; 相对定位。生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
（2）position:absolute; 绝对定位。生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
（3）position:fixed; 固定定位。生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
另外两个可能值：
（4）position:static; 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
（5）position:inherit; 规定应该从父元素继承 position 属性的值。
2.使用图标的方法
（1）直接引入外站css链接，也就是在线引用，然后定义<span class="iconfont">&....</span>里面写相应的图标代码，图标代码有三种，我们一般使用前面两种（下图第一个框出来的部分）。
<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1662617_jrv9w59at58.css"/>
（2）下载图标文件，文件夹一般会有5,6个文件，我们只要选取其中带这几种后缀名的文件，例如下图，然后就可以内部离线引用它的样式了，一样要定义span标签，将图标代码复制进去。
（3）第三种方法就是自己新建一个css文件或者直接在html的style样式里面直接复制它的所有css代码放进去，一样要定义span标签，将图标代码复制进去。
加载全部内容