帶給大家的是HTML5仿手機微信聊天介面,截圖效果如下: 原始碼如下: XML/HTML Code複製內容到剪貼簿 html> html> head> meta charset charset charset > title>HTML5模擬微信> 🎜>title> style> /**重設標籤預設樣式*/ * { 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; padding: 0 10px; } .footer { 寬度:430px; 高度:50 像素; 背景:#666; 位置:絕對; 底部:0; 內的邊界:10px; } .頁腳輸入 { 寬度:275px; 高度:45 像素; 大綱:無; 字體尺寸:20px; 已縮排:10px; 位置:絕對; 邊框半徑:6px; 右側:80px; } .頁腳跨距{ 顯示:內聯區塊; 寬度:62px; 高度:48px; 背景: #ccc; 字體為細部:900; 高:45px; 遊標:指針; 已對齊:中位; 位置:絕對; 右側:10px; 邊框半徑:6px; } .footer span:hover { 顏色:為下色; 背景: #999; } #user_face_icon { 顯示:內聯區塊; 背景: 紅色; 寬度:60 像素; 高度:60 像素; 邊框半徑:30px; 位置:絕對; 下:6px; 左:14px; 遊標:指針; 溢位:隱藏; } img { 寬度:60px; 高度:60 像素; } .content { 字體尺寸:20px; 寬度:435px; 高度:662px; 溢出: 自動; 內的邊界:5px; } .content li { 上時邊緣:10px; 左內邊距:10px; 寬度:412px; 顯示: 塊體; 明確:兩者; 溢位:隱藏; } .content li img { 浮動:向左; } .內容跨距{ 背景: #7cfc00; 內的邊界:10px; 邊框半徑:10px; 浮動:向左; 邊距: 6px 10px 0 10px; 最大寬度:310px; 邊框: 1px solid #ccc; box-shadow: 0 0 3px #ccc; } .content li img.imgleft { 浮動:向左; } .content li img.imgright { 浮動:右側; } .content li span.spanleft { 浮動:向左; 背景:#fff; } .content li span.spanright { 浮動:右側; 背景: #7cfc00; } style> > script > window.onload = function = function = function var arrIcon = ['http://www.xtt /wp-content/uploads/2016/03/123.png']; var num = var iNow = -1 > var icon = docface> = docface>收到g'); var btn = gf>docm 🎜> var text = var content = documn; > var img = content var span = content icon[0].onclick = if( num==0){ num==0){ num==0){ ==0){ this.src num }else if(num==1){ this.src num } } btn.onclick = if(text.value ==''){ alert('中使用空白訊息 '); }else { content.innerHTML = ' img src= "' arrIcon[num] '"> > ' text.value 'span>span>span>spanli>'; iNow ; if(num==0){🎜>num==0){ img[iNow].className = 'imgright' img[iNow].className = 'imgright' img[iNow]。 關於 }else { img[iNow].className = 'imgleft, img[iNow].className = 'imgleft' img[iNow].className = 'imgleft'o 關於 } text.value''> 🎜> // 內容過多時,將捲軸放置至最底端 contentcontent.scrollTop =content.scrollHeight; =content.scrollHeight; } } } script> head > body > div id= "container" > div class= "header" > span>業餘草:模擬微信聊天介面span>span> >> span >14:21span>span >span>span>span>span> span > > 🎜> div> ul class="content"> ul> div class="footer"> div div 🎜>> imgimg用>"http:/ /www.xttblog.com/icons/favicon.ico" alt=""> div> <input id="テキスト" タイプ="テキスト" プレースホルダー=「何か言って…」> <スパン id="btn" >送信スパン> div> div> ボディ> html> 以上がこの記事の全内容です。皆さんの学習に役立つことを願っています。 原文:http://www.xttblog.com/?p=265