帶給大家的是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
