本文主要包含HTML5,手机微信,微信聊天等相关知识,匿名希望在学习及工作中可以帮助到您
给大家带来的是HTML5仿手机微信聊天界面，截图效果如下：
源代码如下：
- >
- <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: 45px;
- cursor: pointer;
- text-align: center;
- position: absolute;
- right: 10px;
- border-radius: 6px;
- }
- .footer span:hover {
- color: #fff;
- background: #999;
- }
- #user_face_icon {
- display: inline-block;
- background: red;
- width: 60px;
- height: 60px;
- border-radius: 30px;
- position: absolute;
- bottom: 6px;
- left: 14px;
- cursor: pointer;
- overflow: hidden;
- }
- img {
- width: 60px;
- height: 60px;
- }
- .content {
- font-size: 20px;
- width: 435px;
- height: 662px;
- overflow: auto;
- padding: 5px;
- }
- .content li {
- margin-top: 10px;
- padding-left: 10px;
- width: 412px;
- display: block;
- clear: both;
- overflow: hidden;
- }
- .content li img {
- float: left;
- }
- .content li span{
- background: #7cfc00;
- padding: 10px;
- border-radius: 10px;
- float: left;
- margin: 6px 10px 0 10px;
- max-width: 310px;
- border: 1px solid #ccc;
- box-shadow: 0 0 3px #ccc;
- }
- .content li img.imgleft {
- float: left;
- }
- .content li img.imgright {
- float: right;
- }
- .content li span.spanleft {