2. 程式人生 > >用html模擬的微信聊天介面

用html模擬的微信聊天介面

阿新 • • 發佈：2019-02-10 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="aplus-terminal" content="1">
<meta name="apple-mobile-web-app-title" content="">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content
 
="black-translucent">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no, address=no">
<title>title</title>
<style type="text/css">
    /*公共樣式*/
    body,h1,h2,h3,h4,p,ul
 
,ol,li,form,button,input,textarea,th,td {
        margin:0;
        padding:0
    }
    body,button,input,select,textarea {
        font:12px/1.5 Microsoft YaHei UI Light,tahoma,arial,"\5b8b\4f53";
        *line-height:1.5;
        -ms-overflow-style:scrollbar
    }
    h1,h2,h3,h4{
        font-size:100
 
%
    }
    ul,ol {
        list-style:none
    }
    a {
     text-decoration:none
    }
    a:hover {
        text-decoration:underline
    }
    img {
        border:0
    }
    button,input,select,textarea {
        font-size:100%
    }
    table {
        border-collapse:collapse;
        border-spacing:0
    }

    /*rem*/
    html {
           font-size:62.5%;
     }
     body {
           font:16px/1.5 "microsoft yahei", 'tahoma';
     }
     body .mobile-page {
           font-size: 1.6rem;
     }

     /*浮動*/
    .fl{
        float: left;
     }
    .fr{
        float: right;
     }
    .clearfix:after{
        content: '';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    body{
     background-color: #F5F5F5;
    }
    .mobile-page{
     max-width: 600px;
    }
    .mobile-page .admin-img, .mobile-page .user-img{
     width: 45px;
     height: 45px;
    }
    i.triangle-admin,i.triangle-user{
     width: 0;
         height: 0;
         position: absolute;
         top: 10px;
     display: inline-block;
         border-top: 10px solid transparent;
         border-bottom: 10px solid transparent;
    }
    .mobile-page i.triangle-admin{
     left: 4px;
     border-right: 12px solid #fff;
    }
    .mobile-page i.triangle-user{
     right: 4px;
         border-left: 12px solid #9EEA6A;
    }
    .mobile-page .admin-group, .mobile-page .user-group{
     padding: 6px;
     display: flex;
     display: -webkit-flex;
    }
    .mobile-page .admin-group{
     justify-content: flex-start;
     -webkit-justify-content: flex-start;
    }
    .mobile-page .user-group{
     justify-content: flex-end;
     -webkit-justify-content: flex-end;
    }
    .mobile-page .admin-reply, .mobile-page .user-reply{
     display: inline-block;
     padding: 8px;
     border-radius: 4px;
     background-color: #fff;
     margin:0 15px 12px;
    }
    .mobile-page .admin-reply{
     box-shadow: 0px 0px 2px #ddd;
    }
    .mobile-page .user-reply{
     text-align: left;
     background-color: #9EEA6A;
     box-shadow: 0px 0px 2px #bbb;
    }
    .mobile-page .user-msg, .mobile-page .admin-msg{
     width: 75%;
     position: relative;
    }
    .mobile-page .user-msg{
     text-align: right;
    }
</style>
</head>
<body>
    <div class="mobile-page">
     <div class="user-group">
          <div class="user-msg">
                <span class="user-reply">我要搶樓</span>
                <i class="triangle-user"></i>
          </div>
           <img class="user-img" src="http://localhost/public/img/cc.jpg"/>
     </div>
     <div class="admin-group">
           <img class="admin-img" src="http://localhost/public/img/aa.jpg"/>
           <div class="admin-msg">
                <i class="triangle-admin"></i>
                <span class="admin-reply">歡迎來搶樓！歡迎來搶樓！歡迎來搶樓！歡迎來搶樓！歡迎來搶樓！歡迎來搶樓！歡迎來搶樓！</span>
           </div>
     </div>
     <div class="user-group">
          <div class="user-msg">
                <span class="user-reply">我要搶樓我要搶樓我要搶樓。</span>
                <i class="triangle-user"></i>
          </div>
           <img class="user-img" src="img/cc.jpg"/>
     </div>
     <div class="admin-group">
           <img class="admin-img" src="img/aa.jpg"/>
           <div class="admin-msg">
                <i class="triangle-admin"></i>
                <span class="admin-reply">歡迎來搶樓！歡迎來搶樓！歡迎來搶樓！歡迎來搶樓！歡迎來搶樓！歡迎來搶樓！</span>
           </div>
     </div>
    </div>
</body>
</html>

相關推薦

用html模擬的微信聊天介面

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="aplus-ter

用chrome模擬微信瀏覽器訪問需要OAuth2.0網頁授權的頁面

mil col cnblogs bre letter 型號 默認 刷新 build 現在很流行微信網頁小遊戲，用html5制作的小遊戲移過來，可以放到微信瀏覽器中打開，關鍵是可以做成微信分享朋友圈的形式，大大提高遊戲的傳播，增強好友的遊戲互動。 微信瀏覽器中打開網頁遊戲效

高仿微信聊天介面長按彈框樣式

效果圖 背景 在公司做的專案裡面，剛好有需要用到微信聊天介面長按彈框樣式這種 UI 的。 網上找了一下，沒找到。 Android 現成的 ListPopupWindow 又不能滿足需求。 因此在非上班時間擼一個出來，供大家使用。 示例程式碼 關鍵檔案、示例程式

HTML5仿手機微信聊天介面

HTML5仿手機微信聊天介面，截圖效果如下： 原始碼如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML5模擬微信聊天介面&l

Android 模仿QQ,微信聊天介面長按提示框

效果圖，有點糙 最近要在專案中實現一個長按提示 “複製” 的功能，本來想偷懶在網上找個開源的專案用，但是看了好幾個都不是很滿意，所以就打算按照自己的思路來實現一個。 如何使用 翠花，上程式碼 PromptViewHelper pvHelper = new Pro

為什麽用微信聊天而不用QQ

讓其 微信公眾 原因 手機 吸引 個人 就會 發送 不想 有一部分歷史原因：從幾年前就開始用微信聊天了，同時那時也被微信公眾號和裏面的各種文章吸引，所以一般也習慣用微信了；另外QQ是自己最早開始用的，那時剛開始上網，什麽都不懂，加好友時亂加一氣。在網上看到過一句話：不怕神一

用python寫一個微信聊天機器人

python wechat 聊天機器人 # -*- coding: utf-8 -*- """ package.module ~~~~~~~~~~~~~~ 一個微信機器人程序 微信客戶端itchat: http://itchat.readthed

用python配合微信API接口將微信個人號變為聊天機器人

repl ltr 出現問題 微信 request exce ret 鏈接 content 操作系統：Ubuntu16.04 　　首先我們先安裝itchat： 這裏我之前安裝過了，先在又安裝了一邊 使用 python3 -c "import itchat" 檢查是否安裝成功

用Jmeter做微信小程式專案介面測試【案例】

公司新專案組開發一款微信小程式電商平臺，為了更好保證產品質量，因此提出了需要進行介面測試。 從介面本身來講，對其測試與其他專案應該是一樣的。所以不難理解，我們要對小程式的介面測試需要準備的 材料有： 1、完備的介面文件（什麼是完備的介面文件，之前文章有寫到，這裡不再綴敘） 2、測試工

用chrome在電腦上模擬微信內建瀏覽器

先了解安卓微信和Ios微信的UA（User agent：使用者代理） 安卓微信UA： mozilla/5.0 (linux; u; android 4.1.2; zh-cn; mi-one plus build/jzo54k) applewebkit/534.30 (khtml, like geck

還在用微 信聊天嗎？那就試試這個吧換你一個美好人生

A80-09-14 很多人不改變，總說我沒有這個、沒有那個？ 缺這個、缺那個？因為這個、因為那個…… 其實你真正缺乏的就兩個字：決定！ 決定要不要改變現狀而已！一切根源在於自己！ 真實案例分享: 2018年3月份的時候，小林的朋友分享了一位老

你還在用微信聊天,聰明的人早已在用微信賺錢

A92-09-18 很多人不改變，總說我沒有這個、沒有那個？ 缺這個、缺那個？因為這個、因為那個…… 其實你真正缺乏的就兩個字：決定！ 決定要不要改變現狀而已！一切根源在於自己！ 真實案例分享:     2018年3月份的時候，小林的朋友分享了一位老師VX號 G8789021

用python玩微信（聊天機器人，好友資訊統計）

1.用 Python 實現微信好友性別及位置資訊統計 這裡使用的python3+wxpy庫+Anaconda(Spyder)開發。如果你想對wxpy有更深的瞭解請檢視：wxpy: 用 Python 玩微信 # -*- coding: utf-8

itchat+線上聊天機器人介面實現微信聊天機器人

閒來無事(其實還在期末考試)，想著怎麼利用手裡的伺服器搞點事情時，發現了python的itchat庫，想著可以再利用網頁聊天機器人，做一個自動聊天的微信機器人。總體思路很簡單，用itchat登入微信，接受訊息，通過聊天機器人的介面傳送給聊天機器人，在將接受到的訊息通過itch

再也不怕和老外交流了！我用python實現一個微信聊天翻譯助手！

前言 在前面的一篇文章如何用python“優雅的”呼叫有道翻譯中咱們清楚的寫過如何一層一層的解開有道翻譯的面紗，並且筆者說過那只是腦洞的開始。現在筆者又回來了。當你遇到一些外國小哥哥小姐姐很心動、想結識交流，但英語水平或其他水平還在提升階段，這個小工具可以幫你渡過難關！Teach you how to fli

群用戶通過微信小程序可以更好地協作了

bug space 隱藏 針對 簡單 完整 script 寬度 table 　　今天，小程序向開發者開放了群ID的接口能力。簡單地說，就是當你把小程序分享在群聊中，被點擊後開發者可獲取群ID和群名稱，也方便更好地針對群場景提供個性化服務。不同的群有各自的群ID，那麽這個新能

三步輕松打造微信聊天機器人（附源碼）

exce 聊天 pos 平臺開發 weather ebo doctype amr 便在 最近微信公眾平臺開發是熱門，我也跟風做了一個陪聊的公眾號。 其實類似的自動回話程序早就有了，比如前一陣很火的小黃雞（還是小黃鴨來著？）。但盡管是跟風，也要體現一些不同。別

用Python玩微信（非常詳細）

tree dir colors 位置 echarts 拼接 spl 表示 開源項目 代碼放在這裏：wzyonggege/python-wechat-itchat 詞雲那裏可以換成小黃人圖片 -----------------------------------------

安卓微信聊天記錄刪除了怎麽恢復

大家現在面對微信的使用已經是越來越熟練了，不過唯一的問題就是在面對數據丟失的時候，該怎們去進行找回和恢復，想要輕松的找回那就先看看介紹吧，安卓微信聊天記錄刪除了怎麽恢復？其實只是需要一款軟件的幫助就可以了，大家先看下面的介紹吧！ 互盾安卓恢復大師是一款專門針對安卓手機研發的數據恢復軟件，可用

HTML5+weui仿微信聊天功能、長按刪除功能

html5微信聊天 h5微信聊天界面最近由於項目需要， 就運用html5+css3+weui+jquery實現的微信聊天小案例，可發表圖像、紅包、打賞...功能， 還可以長按刪除消息。。。案例截圖如下：HTML及Js片段：<!DOCTYPE html><html lang="zh-cn"&g