CSS实现微信聊天界面
昨天刚想起来老师布置了一个作业,让我们仿写微信聊天界面,于是乎连夜补作业,给大家分享一下,不足之处请指教!
首先运行效果图如下:
手机边框是导入一个图,其他的布局模块都是用CSS来实现的页面效果
逻辑分析:
将盒子(手机界面)看作三个大部分
- 顶部框框,显示时间、电量、标题…
- 顶部又可以分为两块,第一块是首行的WeChat和时间,电量
- 第二块是中间的标题,和苹果的一个返回关闭按钮
- 第二行关闭按钮又可以分为两块:左边的三个点,右边的一个圆圈
- 中间聊天部分(我们可以用ul,列表来实现)
- 底部一个输入框,一个发送按钮
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ipad姐妹聊天室</title>
<style>
*{
margin: 0;
padding: 0;
}
/* 大背景 */
.bg{
width: 512px;
height: 765px;
margin: 0 auto;
background-image: url(images/手机背景2.jpg);
}
/* 顶部 */
.top{
width: 449px;
height: 70px;
float: left;
margin-left: 43px;
margin-top: 104px;
background-color: #fff;
}
.first{
font-size: 18px;
}
.first_xh{
float: left;
}
.first_time{
margin-left: 26%;
float: left;
}
.first_dl{
text-align: right;
}
.biaoti{
font-weight: 2px;
font-size: 24px;
font-weight: normal;
float: left;
margin-left: 37%;
margin-top: 3px;
}
.kuang{
float: none;
width: 70px;
height: 30px;
border-color: #666;
border-style: solid ;
border-width: 1px;
background-color: f5f5f5;
border-radius: 20px;
text-align<