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

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

原始碼如下：

XML/HTML Code複製內容到剪貼簿

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

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

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