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

使用工具是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. screen小脚本

    # 创建screen,执行命令,最小化screen #!/usr/bin/env bash screen_name1=$"bdapi" # 检查screen是否存在,等于0.表示s ...

  2. Java操作redis客户端Jedis使用

    1.1   jedis介绍 Redis不仅是使用命令来操作,现在基本上主流的语言都有客户端支持,比如java.C.C#.C++.php.Node.js.Go等. 在官方网站里列一些Java的客户端,有 ...

  3. inode和block

    1:磁盘分区并被格式化为ext4 后,文件系统会生成一定数量的 inode 和block 2:   inode 称为索引节点,他的作用是存放文件的属性信息以及作为文件的索引. 3:ext3和ext4文 ...

  4. markdown常见用法

      命令  生成目录  [TOC]  插入标题  # 一级标题## 二级标题### 三级标题#### 四级标题##### 五级标题###### 六季标题  插入shell 开头:```shell 结尾 ...

  5. Jenkins+jmeter设置定时执行任务

    1.准备好你的jmeter脚本 2.测试命令行下脚本执行 1)cd进入脚本目录 2)dir命令查看该目录下的脚本文件 3)jmeter -n -t test.jmx -l result.jtl  命令 ...

  6. SpringMVC中Interceptor和Filter区别

    Interceptor 主要作用:拦截用户请求,进行处理,比如判断用户登录情况,权限验证,主要针对Action请求进行处理.是通过HandlerInterceptor 实现的. 配置如下: <m ...

  7. JS实现select去除option的使用注意事项

    网上讲JS动态添加option和删除option的文章很多,在此推荐一篇: http://www.jb51.net/article/35205.htm 我使用的是如下方法: function remo ...

  8. VRRP笔记三:配置keepalived为实现haproxy高可用的双主模型配置文件示例：

    说明:其基本实现思想为创建两个虚拟路由器,并以两个节点互为主从. ! Configuration File for keepalived global_defs { notification_emai ...

  9. POJ 3678 2-SAT

    题意:有n个顶点里面可以放数字1或0,给m个限制,每个限制给出两个顶点编号和两编号内数字运算后的结果 思路:很直接的2-SAT,每个点分为1和0两种情况,按限制要求建边,跑tarjan然后判断点是否在 ...

  10. 途牛与十八好汉撕X又言和 到底想干啥？

    到底想干啥?" title="途牛与十八好汉撕X又言和 到底想干啥?"> 天下大势,合久必分,分久必合.很多看起来热闹哄哄的"劳燕分飞"事件,最 ...