这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果, 如下图,
使用工具是 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 标签, 将图标代码复制进去.
来源: https://www.cnblogs.com/YC-Yanchu/p/12439145.html