html简单美化的右边悬浮功能
2年前
超过903天
温馨提示
本文最后更新于2022年07月30日，已超过903天没有更新，若内容或图片失效，请留言反馈。
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>
0 赞
or 打赏
喜欢就打赏一点
