純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 >&....</span>里面寫相應的圖示代碼，圖示代碼有三種，我們一般使用前面兩種（下圖第一個框出來的部分），

<link rel="stylesheet" type="text/css" href="https://www.cnblogs.com//at.alicdn.com/t/font_1662617_jrv9w59at58.css"/>

（2）下載圖示檔案，檔案夾一般會有5,6個檔案，我們只要選取其中帶這幾種后綴名的檔案，例如下圖，然后就可以內部離線參考它的樣式了，一樣要定義span標簽，將圖示代碼復制進去，

（3）第三種方法就是自己新建一個css檔案或者直接在html的style樣式里面直接復制它的所有css代碼放進去，一樣要定義span標簽，將圖示代碼復制進去，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/63822.html

標籤：Html/Css

上一篇：HTTP狀態碼

下一篇：HTML連載73-影片連寫、圖片連續變化