首页 > > 网页制作 > css >

纯CSS实现带返回顶部右侧悬浮菜单

2020-03-07 16:01:40来源：博客园阅读 ()

纯CSS实现带返回顶部右侧悬浮菜单

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

使用工具是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="我的作业">&#xe668;</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="联系我">&#xeb05;</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="返回顶部">&#xe600;</a></span>
            </li>
            <li>
                <span class="iconfont"><a href="second_index.html" title="返回首页">&#xe63e;</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标签，将图标代码复制进去。

原文链接:https://www.cnblogs.com/YC-Yanchu/p/12439145.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：行内和块状元素水平居中与单行或多行文本垂直居中及隐性改变dis

下一篇：HTML连载73-动画连写、图片连续变化

DIV居中的经典方法 2020-06-13
CSS中的float和margin的混合使用 2020-06-11
Html/css 列表项区分列表首尾 2020-06-11
css与javascript重难点，学前端，基础不好一切白费！ 2020-06-11
ie8下透明度处理 2020-06-11

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签