右侧悬浮菜单悬浮窗 css+html css自动判断PC显示手机端隐藏
感觉还不错,只是部署到博客不太搭配(颜色太鲜艳了),用css加了个设备判断,电脑端显示、手机端隐藏。1221px 界点
来源:https://www.zmki.cn/5002.html
预览:
html代码:
<!--右侧浮动 开始-->
<div class="wapnone">
<div class="elevator_item mobile-hide" id="elevator_item">
<a class="hd-time-limited mobile-hide" href="http://dg99.cn" target="_blank" rel="nofollow"></a>
<a target="_blank" class="feedback graHover mobile-hide" style="background-color: #1e6be3;color:#fff;" href="http://img.zmki.cn" rel="nofollow">在线图床</a><a target="_blank" class="feedback graHover mobile-hide" style="background-color: #ffd900;color:#383838;" href="http://www.dg99.cn" target="_blank" rel="nofollow">业务平台</a>
<a target="_blank" class="feedback graHover mobile-hide" style="background-color: #fa3c63;color:#fff;" href="https://www.zmki.cn" rel="nofollow">积分获取</a><a target="_blank" class="feedback graHover mobile-hide" style="background-color: #1e6be3;color:#fff;" href="https://www.zmki.cn" rel="nofollow">积分素材</a><div class="feedback medium mobile-hide">官方客服
<div class="lf-box mobile-hide"><ul class="sp-list mobile-hide"><li><span>官方客服:20838641</span><a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=20838641" target="_self" class="btn-addGroup graHover" rel="nofollow">一键联系</a></li><li class="spl-li clearfix mobile-hide"><div class="fl mobile-hide"><span>微信公众号</span><img src="https://a-oss.zmki.cn/2019/03/05/5c7de96bd4328.png" alt=""></div><div class="fr mobile-hide"><span>微信公众号</span><img src="https://a-oss.zmki.cn/2019/03/05/5c7de96bd4328.png" alt=""></div></li></ul></div></div>
</div>
<!--右侧浮动 结束-->
css样式:
<!--右侧悬浮菜单 開始-->
<style>
/*footer*/
.elevator_item .hd-time-limited {
display: block;
position: fixed;
right: 10.6px;
bottom: 450px;
width: 40px;
height: 140px;
background: url(https://www.6fwq.com/wp-content/uploads/2019/01/time-limited.png) no-repeat center;
animation: vip-199-180510 2.4s infinite;
margin-top: 10px;
}
@keyframes vip-199-180510 {
0% {
bottom: 442px;
}
50% {
bottom: 450px;
}
100% {
bottom: 442px;
}
}
.aj-popbox .hd-time-limited .close-btn {
width: 38px;
height: 38px;
right: 28px;
top: 30px;
line-height: 38px;
text-align: center
}
.aj-popbox .hd-time-limited .close-btn i {
font-size: 24px;
color: #fff
}
.aj-popbox .hd-time-limited .timer {
margin: 296px auto 0;
width: 234px;
font-size: 30px;
color: #000;
line-height: 48px;
padding-left: 10px;
letter-spacing: 13px;
font-weight: bold
}
.aj-popbox .hd-time-limited .go-hd:hover {
transform: scale(.95) translateY(2px)
}
.elevator_item {
position: fixed;
right: 12px;
bottom: 195px;
z-index: 11
}
.elevator_item .feedback {
width: 36px;
height: 40px;
background-color: #fff;
color: #fa3c64;
font-size: 12px;
padding: 5px 6px;
display: block;
border-radius: 5px;
text-align: center;
margin-top: 10px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
cursor: pointer
}
.elevator_item .advice,
.elevator_item .add,
.elevator_item .return {
color: #383838;
line-height: 30px
}
.elevator_item .advice i {
font-size: 28px
}
.elevator_item .add i,
.elevator_item .return i {
font-size: 20px
}
.elevator_item .medium {
position: relative;
background-color: #fa3c64;
color: #fff
}
.elevator_item .medium .lf-box {
display: none;
position: absolute;
right: 41px;
top: -90px;
width: 370px;
height: 280px;
padding-right: 10px
}
.elevator_item .medium .sp-list {
width: 360px;
height: 280px;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .35)
}
.elevator_item .medium .sp-list li:first-child {
height: 70px;
border-bottom: 1px solid #e5e5e5;
padding: 20px 50px
}
.elevator_item .medium li:first-child span {
font-size: 14px;
color: #383838;float: left;
line-height: 30px
}
.elevator_item .medium .btn-addGroup {
width: 90px;
height: 30px;
border-radius: 5px;
background: #fa3c64;
color: #fff;
line-height: 30px;
text-align: center;
float: left;
margin-left: 14px
}
.elevator_item .medium .spl-li {
padding: 22px 34px 0
}
.elevator_item .medium .spl-li span {
display: block;
font-size: 14px;
color: #383838;
margin-bottom: 8px
}
.elevator_item .medium .spl-li img {
width: 130px
}
.elevator_item .add {
position: relative
}
.elevator_item .add .lf-box {
display: none;
position: absolute;
right: 31px;
top: -32px;
width: 178px;
height: 104px;
padding-right: 10px
}
.elevator_item .add .sp-list {
width: 168px;
height: 104px;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 1px 2px rgba(100, 25, 25, 0.35)
}
.elevator_item .add .sp-list li {
line-height: 52px;
font-size: 14px;
color: #383838;
text-align: left
}
.elevator_item .add .sp-list li a {
display: block;
height: 52px;
width: 100%
}
.elevator_item .add .sp-list li:hover a {
color: #fa3c64
}
.elevator_item .add .sp-list li:hover i {
color: #fa3c64
}
.elevator_item .add .sp-list li:first-child {
border-bottom: 1px solid #e5e5e5
}
.elevator_item .add .sp-list i {
color: #d8d8d8;
font-size: 28px;
margin-left: 16px;
margin-right: 14px;
vertical-align: middle
}
.elevator_item .add:hover>i,
.elevator_item .return:hover>i {
color: #fa3c64
}
.elevator_item .feedback:hover .lf-box {
display: block
}
.fl {
float: left
}
.fr {
float: right
}
.graHover {
position: relative;
overflow: hidden
}
.graHover:before {
display: none;
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, .2)
}
.graHover:hover:before {
display: block
}
.clearfix {
*zoom: 1
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0
}
@media screen and (max-width: 1221px) { .wapnone{display:none; }
</style>
<!--右侧悬浮菜单 結束-->
文章由官网发布,如若转载,请注明出处:https://www.dpaoz.com/142
0 评论
6.5k
发表评论
热门文章
自媒体博客Spimes主题17w 阅读
Spimes主题专为博客、自媒体、资讯类的网站设计....
vCard主题个人简历主题12w 阅读
一款个人简历主题,可以简单搭建一下,具体也比较简单....
Spzac个人资讯下载类主题8.7w 阅读
用于作品展示、资源下载,行业垂直性网站、个人博客,....
Splity博客双栏主题7.6w 阅读
仿制主题,Typecho博客主题,昼夜双版设计,可....
热评文章
自媒体博客Spimes主题355 评论
Splity博客双栏主题184 评论
Spzac个人资讯下载类主题84 评论
Splinx博客图片主题36 评论
Spzhi知识付费社区主题34 评论
vCard主题个人简历主题28 评论
Pure轻简主题27 评论
三栏清新博客S_blog主题26 评论
最新评论
Debbyhu888
4月8日
https://www.itsallaboutblogsonline.com
In order to get the best results out of these links, you need to obtain relevant links from related websites and articles as well links from websites that are already perceived to have high authority. Here is our list of strategies to increase the amount of quality links coming into your site so that you don’t get penalized by Google during the next algorithm update.
mingking
5月5日
多少积分可以下载。