边栏下载客服区设计

最新推荐文章于 2024-12-16 23:15:35 发布

chinajobs

最新推荐文章于 2024-12-16 23:15:35 发布

阅读量474

点赞数

分类专栏： javascript 文章标签：边栏

javascript 专栏收录该内容

49 篇文章

订阅专栏

本文介绍了一种网页侧边栏的设计方案，包括客户端和手机端下载按钮的交互样式及悬浮客户服务模块的设计。该方案使用固定定位实现侧边栏布局，并通过CSS实现了丰富的视觉效果和动态交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*download*/
.left_box {
position: fixed;
top: 450px;
left: 0px;
z-index: 999;
}
.left_box li {
margin-top: 0px;
}
.left_box a {
width: 100px;
padding-left: 5px;
padding-top: 2px;
height: 41px;
background: #a879ff url(../images/down.png) 85px 13px no-repeat;
display: block;
transition: all 0.2s;
}

.left_box a:hover {
background-position: 105px 13px;
padding-right: 18px;
}
.left_box p {
font-family:'微软雅黑';
font-size: 13px;
color: #FFF;
}
.left_box p.left_box_p {
font-family:'微软雅黑';
font-size: 11px;
}
.left_box a.left_box_mobile {
background: #3b3b5d url(../images/down.png) 85px 13px no-repeat;
}
.left_box a.left_box_mobile:hover {
background-position: 105px 13px;
}

/*customer*/
.service {
background: #e9e9e9 none repeat scroll 0 0;
border: 1px solid #a46ef5;
border-radius: 5px;
position: fixed;
right: -1px;
top: 180px;
width: 35px;
height:212px;
z-index: 999;
}
.service ul li {
height: 30px;
line-height: 30px;
position: relative;
width: 35px;
}
.service ul li div {
background: transparent none repeat scroll 0 0;
height: 30px;
line-height: 30px;
overflow: hidden;
position: absolute;
right: -120px;
width: 155px;
}
.service ul li div span {
float: left;
height: 100%;
width: 35px;
}
.service ul li div a {
color: #0082f1;
float: left;
font-size: 14px;
height: 100%;
}
.to_top {
background: rgba(0, 0, 0, 0) url("../images/to_top.png") no-repeat scroll center center;
cursor: pointer;
height: 31px;
width: 35px;
}
.side_splitter {
background: rgba(0, 0, 0, 0) url("../images/side_splitter.png") no-repeat scroll center center;
height: 1px;
width: 35px;
}
.barcode {
border: 1px solid red;
height: 100px;
position: absolute;
width: 100px;
z-index: 1;
}
.barcode1 {
border: 1px solid red;
height: 100px;
position: relative;
width: 100px;
z-index: 1;
}
.barcode2 {
border: 1px solid green;
height: 100%;
position: absolute;
width: 100%;
z-index: 1000;
}
.barcode3 {
height: 36px;
left: 0;
position: relative;
width: 188px;
}
.barcode4 {
height: 36px;
position: absolute;
width: 100%;
}
.service_kefu {
background: rgba(0, 0, 0, 0) url("../images/kefu_h.png") no-repeat scroll center center;
}
.service_kefu.hover {
background: rgba(0, 0, 0, 0) url("../images/kefu_h.png") no-repeat scroll center center;
}
.service_qq {
background: rgba(0, 0, 0, 0) url("../images/qq_h.png") no-repeat scroll center center;
}
.service_qq.hover {
background: rgba(0, 0, 0, 0) url("../images/qq_h.png") no-repeat scroll center center;
}
.service_email {
background: rgba(0, 0, 0, 0) url("../images/email_h.png") no-repeat scroll center center;
}
.service_email.hover {
background: rgba(0, 0, 0, 0) url("../images/email_h.png") no-repeat scroll center center;
}
.service_help {
background: rgba(0, 0, 0, 0) url("../images/help_h.png") no-repeat scroll center center;
}
.service_help.hover {
background: rgba(0, 0, 0, 0) url("../images/help_h.png") no-repeat scroll center center;
}
.service_phone {
background: rgba(0, 0, 0, 0) url("../images/phone_h.png") no-repeat scroll center center;
}
.service_phone.hover {
background: rgba(0, 0, 0, 0) url("../images/phone_h.png") no-repeat scroll center center;
}
.service_chat {
background: rgba(0, 0, 0, 0) url("../images/chat_h.png") no-repeat scroll center center;
float: left;
height: 29px;
width: 35px;
}
.service_chat.hover {
background: rgba(0, 0, 0, 0) url("../images/chat_h.png") no-repeat scroll center center;

}

<%@ page language="java" pageEncoding="UTF-8"%>


<div class="left_box">
<ul>
<li>
<a href="javascript:download();"><p>客户端下载</p>
<p class="left_box_p">DOWNLOAD</p>
</a>
</li>
<li>
<a class="left_box_mobile" href="javascript:download();">
<p>手机端下载</p>
<p class="left_box_p">DOWNLOAD</p>
</a>
</li>
</ul>
</div>
<div class="service">
<div class="to_top" id="to_top"></div>
<div class="side_splitter"></div>
<ul>
<li>
<div
style="border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-top-style: none; border-left-style: none; border-bottom-style: none; right: -120px; opacity: 1; background: transparent;">
<span class="service_kefu"> </span> <a
href="javascript:CallService();">联系在线客服</a>
</div></li>
<li>
<div id="BizQQWPA"
style="border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-top-style: none; border-left-style: none; border-bottom-style: none; right: -120px; opacity: 1; background: transparent;">
<span class="service_qq"> </span> <a href="javascript:void(0);"></a>
</div></li>
<li>
<div
style="border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-top-style: none; border-left-style: none; border-bottom-style: none; right: -120px; opacity: 1; background: transparent;">
<span class="service_email"> </span> <a href="mailto:cs@edfbet.com"></a>
</div></li>
<li>
<div
style="border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-top-style: none; border-left-style: none; border-bottom-style: none; right: -120px; opacity: 1; background: transparent;">
<span class="service_phone"> </span> <a href="javascript:void(0);">400-793-6668</a>
</div></li>
<li>
<div
style="border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-top-style: none; border-left-style: none; border-bottom-style: none; right: -120px; opacity: 1; background: transparent;">
<span class="service_help"> </span> <a
href="javascript:location.href='helpinfo.html';">进入帮助中心</a>
</div></li>
</ul>
<div class="barcode3">
<div class="barcode4"
style="border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-top-style: none; border-left-style: none; border-bottom-style: none; left: 0px; opacity: 1; background: transparent;">
<span class="service_chat"> </span> <img
style="width: 150px;height: 150px;" src="images/weixin.jpg">
</div>
</div>
</div>