純CSS實現帶返回頂部右側懸浮菜單
- 2020 年 3 月 7 日
- 筆記
這是我做個人網頁的時候加上的帶返回頂部右側懸浮菜單效果，如下圖，
使用工具是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標籤，將圖標程式碼複製進去。
