html简单美化的右边悬浮功能
2年前
超过783天
温馨提示
本文最后更新于2022年07月30日，已超过783天没有更新，若内容或图片失效，请留言反馈。
css代码
/*右侧悬浮客服*/
.sideBar-youce {
position: fixed;
right: -182px;
background-color: #fff;
border: #eea236 solid 1px;
transition: right 0.5s;
border: solid 1px #6262625e;
bottom: 10%;
font-size: 13px;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
.sideBar-youce:hover {
right:0;
}
.sideBar-youce>div {
position:relative;
}
.sideBar-youce .tips {
position: absolute;
height: 100px;
background-color: #FFFFFF87;
width: 35px;
left: -35px;
top: 50px;
text-align: center;
box-sizing: border-box;
padding: 10px 10px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
color: #919191;
font-size: 12px;
}
.sideBar-youce .list {
padding:0;
list-style:none;
width:180px;
margin:0;
}
.sideBar-youce .list>li {
padding:16px;
border-top:#eea236 dashed 1px;
}
.sideBar-youce .list>li img{
width:100%;
}
.sideBar-youce .list>li:hover {
background-color:#f0ad4e;
color:#ffffff;
}
.sideBar-youce .list>li:first-child {
border-top:none;
}
/*右侧悬浮客服结束*/
html代码
<div class="sideBar-youce">
<div>
<div class="tips">服务中心</div>
<ul class="list">
<li>Q Q:1340326824</li>
<li>邮箱:vipshiyi@qq.com</li>
<li>非诚勿扰</li>
</ul>
</div>
</div>
本作品采用知识共享许可协议知识共享署名-非商业性使用-禁止演绎 3.0 中国大陆许可协议进行许可授权。即要求您在需要转载、引用本文全文或者部分时，请按照协议要求署名，并在保证不进行任何修改、续写等演绎形式，并不用于商业性项目的情况下使用。如果本文有侵犯到您的权益，请直接向我们留言反馈。
0 赞
or 打赏
喜欢就打赏一点
.png "往往免费的还不如收费的")
.png "走失两天的狗子终于找到它的家了")
.png "顶着三十几度的天气去钓鱼了")
.png "\"微博客\"一款自己开发自己用的垃圾源码（慢慢更新中）")
