本文主要包含HTML5,手机微信,微信聊天等相关知识,业余草 希望在学习及工作中可以帮助到您
给大家带来的是HTML5仿手机微信聊天界面，截图效果如下：
源代码如下：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <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 {
- width: 430px;
- height: 50px;
- background: #666;
- position: absolute;
- bottom: 0;
- padding: 10px;
- }
- .footer input {
- width: 275px;
- height: 45px;
- outline: none;
- font-size: 20px;
- text-indent: 10px;
- position: absolute;
- border-radius: 6px;
- right: 80px;
- }
- .footer span {
- display: inline-block;
- width: 62px;
- height: 48px;
- background: #ccc;
- font-weight: 900;
- line-height:&n