《瑞》安人才网:‘纯’CSS{实现带返回}{顶部右侧}悬(浮菜)单

admin 2个月前 (04-16) 科技 19 1

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

&NBsp;

 

 

 

使用工具是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〖标签〗,将图标代码复制进去。

 

 

 

 

 

,

sunbet申官网下载

欢迎进入sunbet申官网下载!Sunbet 申博提供申博开户(sunbet开户)、SunbetAPP下载、Sunbet客户端下载、Sunbet代理合作等业务。

皇冠APP下载声明:该文看法仅代表作者自己,与本平台无关。转载请注明:《瑞》安人才网:‘纯’CSS{实现带返回}{顶部右侧}悬(浮菜)单

网友评论

  • (*)

最新评论

  • 申傅亚洲太阳城 2020-04-16 00:20:26 回复

    SunbetSunbet www.698739.com Sunbet是进入Sunbet的主力站点。Sunbet开放Sunbet会员开户网址、Sunbet代理开户、Sunbet手机版下载、Sunbet电脑客户端下载等业务。www.sunbet.us值得您的信赖!前来围观

    1

文章归档