h5网页聊天客服窗口-html代码-BFW代码库

h5网页聊天客服窗口
代码语言：html
所属分类：
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!dtype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>与客服1聊天中</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style>
@charset "utf-8";
            /*公共样式*/
            html {
                font-family: "Helvetica Neue",Helvetica,STHeiTi,sans-serif;
                -webkit-text-size-adjust: 100%;
                -moz-text-size-adjust: 100%;
                -ms-text-size-adjust: 100%;
            }
            body {
                background-image: url('http://repo.bfw.wiki/bfwrepo/image/5e0c6d9519736.png');
                background-size: cover;
                -webkit-overflow-scrolling: touch;
                margin: 0;
            }
            ul {
                margin: 0;
                padding: 0;
                list-style: none;
                outline: none;
            }
            dl,dd {
                margin: 0;
            }
            a {
                display: inline-block;
                margin: 0;
                padding: 0;
                text-decoration: none;
                background: transparent;
                outline: none;
                color: #000;
            }
            a:link,a:visited,a:hover,a:active {
                text-decoration: none;
                color: currentColor;
            }
            a,dt,dd {
                -webkit-touch-callout: none;
                -webkit-tap-highlight-color: transparent;
            }
            img {
                border: 0;
            }
            p {
                margin: 0;
            }
            input,button,select,textarea {
                margin: 0;
                padding: 0;
                border: 0;
                outline: 0;
                background-color: transparent;
            }
            button:hover {
                cursor: pointer;
            }
            /*css reset*/
            body {
                position: relative;
            }

            .chat-wrapper {
                font-size: 14px;
                color: #fff;
            }
            /*右侧按钮*/
            .chat-support-btn {
                position: fixed;
                display: inline-block;
                top: 50%;
                right: 0;
                margin-top: -70px;
                width: 40px;
                height: 40px;
                cursor: pointer;

            }
            .chat-support-btn img {
                position: absolute;
                border-radius: 50%;
            }
            /* 对话框*/
            .chat-main {
                position: fixed;
                display: none;
                right: 10px;
                bottom: 10px;
                width: 650px;
                height: 800px;
                border-radius: 4px;
                box-shadow: 0 0 5px rgba(0, 0, 0, .4);
            }

            /*对话框头部*/
            .chat-header {
                position: relative;
                padding: 10px;
                height: 80px;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
                box-shadow: 0 0 5px rgba(0, 0, 0, .2);
                background-color: #2596cc;
            }
            .chat-header a:hover {
                cursor: pointer;
            }
            /*个人信息框*/
            .header-info-div {
                display: none;
                width: 290px;
                height: 150px;
                margin: -600px 0 0 -300px;
                border-radius: 4px;
                background-image: url("http://repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90");
            }
            .header-info-h2 {
                display: inline-block;
                margin: 15px 0 0 25px;
            }
            .header-info-span {
                position: absolute;
                top: 45px;
                left: -276px;
            .........完整代码请登录后点击上方下载按钮下载查看
网友评论0

相似代码