首頁 > web前端 > H5教程 > 主體

HTML5仿手機微信聊天介面_html5教學技巧

WBOY
發布: 2016-05-16 15:51:58
原創
3032 人瀏覽過

帶給大家的是HTML5仿手機微信聊天介面,截圖效果如下:

原始碼如下:

XML/HTML Code複製內容到剪貼簿
  1. html>  
  2. html>  
  3. head>  
  4.     meta charset charset charset
  5. >
  6.        title>HTML5模擬微信> 🎜>title>  
  7.     style>  
  8.   
  9.   /**重設標籤預設樣式*/   
  10.         * {   
  11.             margin: 0;   
  12.             padding: 0;   
  13.             list-style: none;   
  14.             font-family: '微軟雅黑'   
  15.         }   
  16.         #container {   
  17.             width: 450px;   
  18.             height: 780px;   
  19.             background: #eee;   
  20.             margin: 80px auto 0;   
  21.             position: relative;   
  22.             box-shadow: 20px 20px 55px #777;   
  23.         }   
  24.         .header {   
  25.             background: #000;   
  26.             height: 40px;   
  27.             color: #fff;   
  28.             line-height: 34px;   
  29.             font-size: 20px;   
  30.             padding: 0 10px;            }  
  31.         .footer {   
  32.              寬度:430px;  
  33.              高度:50 像素;   
  34.             背景:#666;  
  35.             位置:絕對;  
  36.             底部:0;  
  37.             內的邊界:10px;   
  38.         }   
  39.         .頁腳輸入 {   
  40.              寬度:275px;  
  41.              高度:45 像素;   
  42.             大綱:無;   
  43.              字體尺寸:20px;  
  44.             已縮排:10px;  
  45.             位置:絕對;  
  46.             邊框半徑:6px;   
  47.              右側:80px;  
  48.         }   
  49.         .頁腳跨距{   
  50.             顯示:內聯區塊;   
  51.              寬度:62px;  
  52.              高度:48px;  
  53.             背景: #ccc;  
  54.             字體為細部:900;  
  55.             高:45px;   
  56.             遊標:指針;   
  57.             已對齊:中位;   
  58.             位置:絕對;  
  59.              右側:10px;  
  60.             邊框半徑:6px;   
  61.         }   
  62.         .footer span:hover {   
  63.              顏色:為下色;  
  64.             背景: #999;  
  65.         }  
  66.         #user_face_icon {   
  67.             顯示:內聯區塊;   
  68.             背景: 紅色;  
  69.             寬度:60 像素;   
  70.              高度:60 像素;   
  71.             邊框半徑:30px;   
  72.             位置:絕對;  
  73.              下:6px;  
  74.              左:14px;  
  75.             遊標:指針;   
  76.             溢位:隱藏;   
  77.         }   
  78.         img {   
  79.              寬度:60px;  
  80.              高度:60 像素;   
  81.         }   
  82.         .content {   
  83.              字體尺寸:20px;  
  84.              寬度:435px;  
  85.              高度:662px;  
  86.              溢出: 自動;  
  87.             內的邊界:5px;   
  88.         }   
  89.         .content li {   
  90.             上時邊緣:10px;   
  91.             左內邊距:10px;   
  92.              寬度:412px;  
  93.             顯示: 塊體;   
  94.             明確:兩者;   
  95.             溢位:隱藏;   
  96.         }   
  97.         .content li img {   
  98.              浮動:向左;  
  99.         }  
  100.         .內容跨距{   
  101.              背景: #7cfc00;   
  102.             內的邊界:10px;   
  103.             邊框半徑:10px;   
  104.              浮動:向左;  
  105.             邊距: 6px 10px 0 10px;  
  106.              最大寬度:310px;  
  107.             邊框: 1px solid #ccc;  
  108.             box-shadow: 0 0 3px #ccc;   
  109.         }   
  110.         .content li img.imgleft {    
  111.              浮動:向左;    
  112.         }   
  113.         .content li img.imgright {    
  114.              浮動:右側;    
  115.         }   
  116.         .content li span.spanleft {    
  117.              浮動:向左;  
  118.             背景:#fff;   
  119.         }   
  120.         .content li span.spanright {    
  121.              浮動:右側;  
  122.              背景: #7cfc00;   
  123.         }  
  124.     style>  
  125. >
  126.        
  127. script
  128. >     
  129.         window.onload = 
  130. function
  131.  = function = function            var arrIcon
  132.  = ['http://www.xtt /wp-content/uploads/2016/03/123.png'];                var num
  133.  =              var iNow = -1  >             var 
  134. icon
  135.  = docface> = docface>收到g');   
  136.             var 
  137. btn = gf>docm 🎜>             var text = 
  138.             var content = documn; >             var 
  139. img = content             var span = 
  140. content
  141.                icon[0].onclick = 
  142.                 if(
  143. num==0){  num==0){  num==0){  
  144. ==0){                       this.src
  145.                     num                 }else if(num==1){   
  146.                     this.src                     num
  147.                 }                            }                btn.onclick
  148.  = 
  149.                 if(
  150. text.value
  151.  ==''){  
  152.                     alert('中使用空白訊息 ');                    }else {                        content.innerHTML  = '
  153. img src=
  154. "' arrIcon[num] '">
  155. >
  156. ' text.value 'span>span>span>spanli>';                        iNow ;                        if(num==0){🎜>num==0){                         img[iNow].className  = 'imgright'   img[iNow].className  = 'imgright'   img[iNow]。                關於                     }else {   
  157.                         img[iNow].className  = 'imgleft,   img[iNow].className  = 'imgleft'   img[iNow].className  = 'imgleft'o  
  158.                關於                     }  
  159.                     text.value''> 🎜>      // 內容過多時,將捲軸放置至最底端   
  160.      
  161. content
  162. content.scrollTop
  163. =content.scrollHeight;    =content.scrollHeight;                     }   
  164.             }   
  165.         }  
  166.     script>  
  167.   
  168. head
  169. >  
  170. body
  171. >       div id=
  172. "container"
  173. >           div class=
  174. "header"
  175. >               span>業餘草:模擬微信聊天介面span>span>
  176. >>             span
  177. >14:21span>span
  178. >span>span>span>span>
  179. span
  180. > > 🎜>         
  181. div>           
  182. ul class="content">      
  183.      ul>           
  184. div class="footer">               div div 🎜>
  185. >                   
  186. imgimg用>"http:/ /www.xttblog.com/icons/favicon.ico" alt="">               div> <input id="テキスト" タイプ="テキスト" プレースホルダー=「何か言って…」>
  187. <スパン id="btn" >送信スパン>
  188. div>
  189. div>
  190. ボディ>
  191. html>

以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。

原文:http://www.xttblog.com/?p=265

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板