聊天頁面模板

時間 2020-03-22

標籤聊天頁面模板简体版

原文原文鏈接

效果圖以下：css

源碼:html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="__STATIC__/chat/css/chat.css">
</head>
<body>

<div class="speak_window">
    <div class="speak_box">
        <div class="answer">
            <div class="heard_img left"><img src="__STATIC__/chat/images/photo.png"></div>
            <div class="answer_text">
                <p>嗨，小帥帥在此！您有什麼想跟我說的，均可以在這裏跟我講哦！</p>
                <i></i>
            </div>
        </div>
    </div>
</div>
<div class="saying">
    <img src="images/saying.gif">
</div>
<div class="wenwen-footer">
    <img src="http://www.jq22.com/img/cs/500x500-9.png" style="width: 30px;">
    <div class="wenwen_text left">
        <div class="write_box">
            <input type="text" class="left" placeholder="請輸入關鍵字">

        </div>

    </div>
    <div class="wenwen_help right">
        <button onclick="up_say()" class="right">發送</button>
    </div>

</div>

</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>

    function up_say() {
        $('.write_list').remove();

        var text = $('.write_box input').val(),
            str = '<div class="question">';
        str += '<div class="heard_img right"><img src="__STATIC__/chat/images/photo.png"/></div>';
        str += '<div class="question_text clear"><p>' + text + '</p><i></i>';
        str += '</div></div>';
        $('.speak_box').append(str);


    }


</script>
</html>
複製代碼

chat.css源碼jquery

body {
    /*background:url(images/yuyin_bg.png) no-repeat; */
    background:#eee;
    background-size:100%;
    font-family:"微軟雅黑";
}
@media all and (min-width:640px) {
    body,html,.wenwen-footer,.speak_window {
        width:640px!important;
        margin:0 auto
    }
    .speak_window,.wenwen-footer {
        left:50%!important;
        margin-left:-320px
    }
}input,button {
     outline:none;
 }
.wenwen-footer {
    width:100%;
    position:fixed;
    bottom:-5px;
    left:0;
    background:#fff;
    padding:10px;
    border-top:solid 1px #ddd;
    box-sizing:border-box;
    display:flex;
    justify-content:space-around;
    align-items:center;
    padding-top:1%;
}
.wenwen_btn,.wenwen_help {
    width:15%;
    text-align:center;
}
.wenwen_btn img,.wenwen_help img {
    height:30px;
}
.wenwen_text {
    height:40px;
    border-bottom:solid 1px #C3BFBF;
    box-sizing:border-box;
    width:66%;
    text-align:center;
    overflow:hidden;
    margin-left:2%;
}
.circle-button {
    padding:0 5px;
}
.wenwen_text .circle-button {
    font-size:14px;
    color:#666;
    line-height:38px;
}
.write_box {
    width:100%;
    height:40px;
    line-height:40px;
}
.write_box input {
    height:40px;
    padding:0 5px;
    line-height:40px;
    width:100%;
    box-sizing:border-box;
    border:0;
    font-family:"微軟雅黑";
    font-size:15px;
}
.wenwen_help button {
    width:95%;
    background:#8CCC49;
    color:#fff;
    border-radius:5px;
    border:0;
    height:30px;
    display:block;
    font-family:"微軟雅黑";
}
#wenwen {
    height:100%;
}
.speak_window {
    overflow-y:scroll;
    height:100%;
    width:100%;
    position:fixed;
    top:0;
    left:0;
}
.speak_box {
    margin-bottom:70px;
    padding:10px;
}
.question,.answer {
    margin-bottom:1rem;
}
.question {
    text-align:right;
}
.question>div {
    display:inline-block;
}
.left {
    float:left;
}
.right {
    float:right;
}
.clear {
    clear:both;
}
.heard_img {
    height:44px;
    width:44px;
    border-radius:3px;
    overflow:hidden;
    background:#ddd;
}
.heard_img img {
    width:100%;
    height:100%
}
.question_text,.answer_text {
    box-sizing:border-box;
    position:relative;
    display:table-cell;
    min-height:45px;
}
.question_text {
    padding-right:12px;
}
.answer_text {
    padding-left:12px;
}
.question_text p {
    border-radius:5px;
    padding:.5rem;
    margin:0;
    font-size:14px;
    line-height:20px;
    box-sizing:border-box;
    vertical-align:middle;
    display:table-cell;
    word-wrap:break-word;
    max-width:65vw;
    min-width:10vw;
    box-shadow:-1px 1px 1px 1px rgba(0,0,0,.1);
}
.answer_text p {
    border-radius:5px;
    padding:.5rem;
    margin:0;
    font-size:14px;
    line-height:20px;
    box-sizing:border-box;
    vertical-align:middle;
    display:table-cell;
    word-wrap:break-word;
    max-width:65vw;
    min-width:10vw;
    box-shadow:1px 1px 1px 1px rgba(0,0,0,.1);
}
.answer_text p {
    background:#fff;
}
.question_text p {
    background:#8CCC49;
    color:#000;
    text-align:left;
}
.question_text i,.answer_text i {
    width:0;
    height:0;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    position:absolute;
    top:14px;
}
.answer_text i {
    border-right:6px solid #fff;
    left:6px;
}
.question_text i {
    border-left:6px solid #8CCC49;
    right:6px;
}
.answer_text p a {
    color:#42929d;
    display:inline-block;
}
audio {
    display:none;
}
.saying {
    position:fixed;
    bottom:30%;
    left:50%;
    width:120px;
    margin-left:-60px;
    display:none;
}
.saying img {
    width:100%;
}
.write_list {
    position:absolute;
    left:0;
    width:100%;
    background:#fff;
    border-top:solid 1px #ddd;
    padding:5px;
    line-height:30px;
}
複製代碼