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

使用工具是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. E - Apple Tree(树状数组+DFS序）

    There is an apple tree outside of kaka's house. Every autumn, a lot of apples will grow in the tree. ...

  2. 染色dp（确定一行就可行）

    题:https://codeforces.com/contest/1027/problem/E 题意:给定n*n的方格,可以染黑白,要求相邻俩行”完全“不同或完全相同,对于列也是一样.然后限制不能拥有 ...

  3. LeetCode No.115,116,117

    No.115 NumDistinct 不同的子序列 题目 给定一个字符串 S 和一个字符串 T,计算在 S 的子序列中 T 出现的个数. 一个字符串的一个子序列是指,通过删除一些(也可以不删除)字符且 ...

  4. 编译安装 logstash-output-jdbc

    环境 mac https://github.com/theangryangel/logstash-output-jdbc logstash-plugin install logstash-output ...

  5. 吴裕雄--天生自然python学习笔记：python用OpenCV 读取和显示图形

    Open CV 是一个开源.跨平台的计算机视觉库,它可 以在商业和研究领域中免费使用,目前已广泛应用于人机 互动.人脸识别.动作识别.运动跟踪等领域. 要识别特定的图像,最重要的是要有识别对象的特征 ...

  6. springboot学习笔记：4.logback日志配置

    springboot中日志组件推荐使用logback: 由于springboot内置了logback,所以可以直接在application.properties中配置:如果要功能丰富些,则配置下log ...

  7. OpenSSL之X509系列

    OpenSSL之X509系列之1---引言和X509概述 [引言]    X509是系列的函数在我们开发与PKI相关的应用的时候我们都会用到,但是OpenSSL中对X509的描述并不是很多,鉴于些,我 ...

  8. t-检验

    https://wenku.baidu.com/view/3954f9d9a58da0116c17497b.html介绍的挺好的,可以查看~ 应用方面:用于推断差异发生的概率,与f检验,卡方检验并列 ...

  9. 编辑距离算法-DP问题

    Levenshtein Distance The Levenshtein distance is a string metric for measuring the difference betwee ...

  10. Apollo核心概念之“Namespace”

    转载于https://github.com/ctripcorp/apollo,by Ctrip, Inc. Apollo核心概念之“Namespace” 1. 什么是Namespace? Namesp ...