这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果，如下图，

使用工具是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标签，将图标代码复制进去。

纯CSS实现带返回顶部右侧悬浮菜单的更多相关文章

  1. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  2. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  3. 纯css实现网上商城左侧垂直商品分类菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 纯CSS实现带小角的对话框式下拉菜单

    最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang= ...

  5. 前端 css+js实现返回顶部功能

    描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...

  6. 纯css实现鼠标感应弹出二级菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 纯css制作带三角border篇(兼容所有浏览器)

    今天帅哥给你们介绍下,如何用 border 来制作三角. html 代码如下: 复制代码 代码如下: <div class="arrow-up"></div> ...

  8. 纯css制作带三角(兼容所有浏览器)

    如何用 border 来制作三角. html 代码如下: 代码如下: <div class="arrow-up"></div> <div class= ...

  9. 纯js实现页面返回顶部的动画

    啥也不说了,直接上代码 var scrollTop = document.body.scrollTop; document.body.style.marginTop = -scrollTop + 'p ...

随机推荐

  1. 24）PHP，数据库的基本知识

    (1)数据库操作的基本流程: • 建立连接(认证身份) • 客户端向服务器端发送sql命令 • 服务器端执行命令,并返回执行的结果 • 客户端接收结果(并显示) • 断开连接 (2)php中操作数据库 ...

  2. mui webview 预加载

    所谓的预加载技术就是在用户尚未触发页面跳转时,提前创建目标页面,这样当用户跳转时,就可以立即进行页面切换,节省创建新页面的时间,提升app使用体验.mui提供两种方式实现页面预加载. 方式一:通过mu ...

  3. python-django电商项目-需求分析架构设计数据库设计_20191115

    python-django电商项目需求分析 1.用户模块 1)注册页 注册时校验用户名是否已被注册. 完成用户信息的注册. 给用户的注册邮箱发送邮件,用户点击邮件中的激活链接完成用户账户的激活. 2) ...

  4. activity 和 fragment 传递信息

    acitvity 传递信息到fragment 初始化fragment 时可以传递arguments  该参数类型时Bundle activity 会持有fragment引用  通过通过参数的set方法 ...

  5. 手撸XGBoost流程（未完成）

    网上的一篇文章,讲的挺清楚的. XGBoost原理分析及实践 XGBoost的原理 xgboost原理--刘建平博客 要注意的地方: 1.预测值y(pred)和损失函数L(y,y(hat))中的y(h ...

  6. 树剖想法题——BZOJ3626

    本来是打算作为树剖练习的最后一题的,结果一直WA. 本来以为是自己写的太丑. 最后发现5w的数据 我开了10w的数组 然而有一个数组要×2 哦,好棒棒. #include<cstring> ...

  7. Python面向对象三大特征

    继承 面向对象中的继承就是继承的类直接拥有被继承类的属性而不需要在自己的类体中重新再写一遍,其中被继承的类叫做父类.基类,继承的类叫做派生类.子类.在python3中如果不指定继承哪个类,默认就会继承 ...

  8. [LC] 240. Search a 2D Matrix II

    Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...

  9. 多版本firefox共存

    https://blog.csdn.net/gavinxlf/article/details/53173034 https://blog.csdn.net/weixin_33979745/articl ...

  10. SpringSecurity 如何提示错误

    1.可以通过authentication-failure-url="/login.html?error=1" 前端接收参数,根据参数提示 错误 2.前端vue this.myNam ...