html案例：模拟一个很简单的聊天框
实现的代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="Description" content="this this">
<title>简单的聊天框demo</title>
<style type="text/css" rel="stylesheet">
* {
margin: 0;
padding: 0;
color: #fff;
font-size: 14px;
}
ul {
border: 1px solid red;
width: 400px;
height: 600px;
margin: 0 auto;
list-style: none;
line-height: 28px;
}
.lf {
float: left;
background: blue;
text-align: left;
width: 100%;
}
.lr {
float: right;
background: pink;
text-align: right;
width: 100%;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<ul>
<li class="lf clear">a:在吗？</li>
<li class="lr clear">b:在的，直接说什么事</li>
<li class="lf clear">a:那个昨天老师布置的作业，你写完了没有？</li>
<li class="lr clear">b:啊......</li>
<li class="lf clear">a:没写？</li>
<li class="lr clear">b:那天布置作业的很简单，一布置下来就搞定了</li>
<li class="lf clear">a:这么牛吗？</li>
<li class="lr clear">b:我发你看看，有不懂得直接问</li>
<li class="lf clear">a:可以</li>
<li class="lr clear">b:html模拟登陆.zip</li>
<li class="lf clear">a:OK</li>
<li class="lr clear">b:我先忙去了</li>
<li class="lf clear">a:你忙吧，我看看下</li>
<li class="lr clear">b:有什么事扣电话</li>
<li class="lf clear">a:好的</li>
</ul>
</body>
</html>
效果图：
