HTML5模拟微信聊天界面
在本文中，我们将详细描述如何使用HTML5和CSS3创建一个仿手机微信聊天界面的页面。我们将从基本布局开始，逐步添加各种元素，直到完成整个页面。
基础布局首先，我们需要定义页面的基本布局。我们使用一个容器div来包含整个页面。
```html
```
头部导航栏下一步，我们需要创建头部导航栏。我们使用一个nav元素来包含整个导航栏。
```html
```
我们使用CSS来样式化导航栏。
```css.header {
background: fff;
padding:10px;
border-bottom:1px solid ddd;
}
.header ul {
list-style: none;
margin:0;
padding:0;
}
.header li {
float: left;
margin-right:20px;
}
.header a {
color: 333;
text-decoration: none;
}
.header a.active {
color: 337ab7;
}
```
聊天界面现在，我们需要创建聊天界面。我们使用一个div元素来包含整个聊天界面。
```html
```
我们使用CSS来样式化聊天界面。
```css.chat {
padding:20px;
}
.chat ul {
list-style: none;
margin:0;
padding:0;
}
.chat li {
background: fff;
border-bottom:1px solid ddd;
padding:10px;
margin-bottom:10px;
}
```
聊天输入框最后，我们需要创建聊天输入框。我们使用一个input元素来包含整个输入框。
```html
```
我们使用CSS来样式化输入框和发送按钮。
```css.input {
width:80%;
height:30px;
padding:10px;
font-size:16px;
border: none;
border-radius:5px;
}
.send {
width:20%;
height:30px;
background: 337ab7;
color: fff;
border: none;
border-radius:5px;
cursor: pointer;
}
```
整体样式最后，我们需要整合所有的样式。
```cssbody {
font-family: '微软雅黑';
}
container {
width:450px;
height:780px;
background: eee;
margin:80px auto0;
position: relative;
box-shadow:0010px rgba(0,0,0,0.1);
}
.header {
background: fff;
padding:10px;
border-bottom:1px solid ddd;
}
.header ul {
list-style: none;
margin:0;
padding:0;
}
.header li {
float: left;
margin-right:20px;
}
.header a {
color: 333;
text-decoration: none;
}
.header a.active {
color: 337ab7;
}
.chat {
padding:20px;
}
.chat ul {
list-style: none;
margin:0;
padding:0;
}
.chat li {
background: fff;
border-bottom:1px solid ddd;
padding:10px;
margin-bottom:10px;
}
.input {
width:80%;
height:30px;
padding:10px;
font-size:16px;
border: none;
border-radius:5px;
}
.send {
width:20%;
height:30px;
background: 337ab7;
color: fff;
border: none;
border-radius:5px;
cursor: pointer;
}
```
最终效果最终效果如下所示：
