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

使用工具是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. 谁能率先挖掘出5G金矿？

    现在,消费者已经习惯4G的存在,它好像另外的一个太阳,点亮了夜生活,也丰富了白天的生活:随时随地的直播.视频通话.移动支付.嘀嘀打车等等,这些都因4G网络和智能手机而快速发展,帮助消费者清理碎片时间之 ...

  2. Invert Binary Tree(easy)

    1.直接把递归把左右子树翻转即可 AC代码: /** * Definition for a binary tree node. * struct TreeNode { * int val; * Tre ...

  3. mysql远程导出

    D:\phpStudy\PHPTutorial\MySQL\bin>mysqldump -h192.168.1.1 -u用户名 -p密码 --default-character-set=utf8 ...

  4. 79）PHP，session函数编写的注意事项

    (1)先执行  session_set_save_handler()  在session_start(). (2)那么开启session_start(),有两种方法,一个就是session_start ...

  5. Xshell中使用xftp怎么选择默认编辑器，如nodepad

    工具-选项-高级-编辑器路径

  6. 网页中常见返回HTTP状态码含义

    在日常网页浏览的过程中大家经常会碰到400,403,404,500,502等HTTP状态码,这些状态码对于一般用户来说出现什么都是一样的,反正就是页面打不开了,但是作为网站开发人员或者从事相关工作者认 ...

  7. SpringBoot之HandlerInterceptor拦截器的使用 ——（三）获取requestBody解决java.io.IOException: Stream closed

    原文地址:https://blog.csdn.net/zhibo_lv/article/details/81875705 感谢原作者

  8. 关于后端下载后端返回的blob类型文件的下载

    关于后端返回blob类型的文件下载记录,在请求的时候前端设置响应类型 responseType: 'blob', const blob = new Blob([r], {type: r.type}); ...

  9. springboot学习笔记：1.前言

    眼下,随着微服务敏捷开发的势头日益增长,前几年刚刚萌芽的话题,到了现在已经炽手可热.在java圈子里,springboot作为spring生态圈的顶级项目,更是火的不得了.作为java程序员,不了解和 ...

  10. Ubuntu16.04使用sublime text3编写C语言后，实现编译并自动调用bash终端运行程序

    实现编译并自动调用bash运行程序只需要新建自己的.build文件就OK 依次打开: tools->building system->new building system 后,把下面的内 ...