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

使用工具是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. 系统学习Javaweb6----JavaScript2

    感想:感觉自己还是只是学到皮毛,仍需继续努力,明天开始需要学习Android和阅读感想的书写. 学习笔记: 2.3.运算符 JavaScript运算符与java运算符基本一致. 这里我们来寻找不同点进 ...

  2. linux系统权限（基本权限）

    linux的系统权限:r--  100 4-w- 010 2--x  001 1 [root@localhost ~]# ll -d dir drwxrwxrwx root root Nov : di ...

  3. 查看linux系统安装的服务

    如何查看linux系统安装了哪些服务呢,因不同版本的操作系统可能使用的命令不一样或者有些命令在某些操作系统不可用,现列举一些常用查看命令(基于我的linux版本). 我的操作系统版本如下: 1.ser ...

  4. string 转化xml && xml转化为string

    一.使用最原始的javax.xml.parsers,标准的jdk api // 字符串转XML [java] view plaincopyprint? String xmlStr = \". ...

  5. djangp-filter的使用

    目录 Filter定义 Filter定义 定义如下Filter类 class BookFilter(django_filters.FilterSet): name = django_filters.C ...

  6. 前端-css-长期维护

    ###############    CSS简介    ################ # CSS # HTML是骨架 # CSS是样式 # JS是动作 # css和html是分成两个文件编写的,这 ...

  7. python3下scrapy爬虫(第十一卷:scrapy数据存储进mongodb）

    说起python爬虫数据存储就不得不说到mongodb,现在我们来试一下scrapy操作mongodb 首先开启mongodb mongod --dbpath=D:\mongodb\db 开启服务后就 ...

  8. 蓝桥杯-PREV31-小朋友排队

    解法: 这题有点像冒泡排序,但是做这题并不需要冒泡排序. 假设第i个小朋友比第j个小朋友高,而且i < j 为了把队伍排成从小到大,第i个小朋友一定要去第j个小朋友的右边.又因为只能交换位置相邻 ...

  9. Ajax 请求参数过多导致 400 错误 and BCryptPasswordEncoder 加密判断

    2019/06/19 先分享一种密码加密方式: Spring Security 提供了 BCryptPasswordEncoder类, 实现Spring的PasswordEncoder接口使用BCry ...

  10. Mybatis--映射器注解

    因为最初设计时,MyBatis 是一个 XML 驱动的框架.配置信息是基于 XML 的,而且 映射语句也是定义在 XML 中的.而到了 MyBatis 3,有新的可用的选择了.MyBatis 3 构建 ...