要求是仿网易云的评论模块
个人理解：最外层是一个article，里面包含上，中，下三部分，上为一个section，其中包含了标题（估计是h3级）和评论<div>，中为一个div，包含了一个图片链接（<a><img></a>）以及一个表单，下为一个列表（ul），里面横向排列了头像（<a><img></a>），名字（<a>），内容<div>，时间<div>
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>评论</title>
<style type="text/css">
body,h3,ul,a{
font-family: '微软雅黑';
margin:0;
padding:0;
list-style: none;
text-decoration: none;
}
h3{
font-weight:normal;
}
.container{
width: 640px;
height: 100%;
position: relative;
margin: 0 auto;
margin-top: 100px;
}
.container-header{
height: 40px;
line-height: 40px;
border-bottom: 2px solid #c20c0c;
}
.container-title{
float: left;
height: 40px;
line-height: 40px;
font-size: 20px;
color: #444444;
}
.container-subtitle{
float: left;
color: #666666;
height: 40px;
line-height: 44px;
font-size: 14px;
margin-left: 20px;
}
.container-comment{
width: 100%;
margin-top: 30px;
margin-bottom: 10px;
}
.comment-img{
width: 50px;
}
.comment-href{
float: left;
width: 50px;
margin-right: 14px;
}
.comment-main{
float: left;
width: 576px;
}
.comment-text{
resize: none;
width: 563px;
height: 63px;
border: 1px solid #cdcdcd;
padding: 5px 5px 5px 6px;
border-radius: 2px;
font-size: 12px;
color: #999999;
}
.comment-bottom{
width: 576px;
height: 40px;
}
.comment-number{
border: none;
float: left;
background: none;
color: #999999;
height: 100%;
font-size: 14px;
}
.comment-submit{
background: #2e7ecb;
border-radius: 4px;
color: #ffffff;
font-size: 10px;
float: right;
border: none;
height: 26px;
margin: 6px 0 6px 0;
padding-left: 14px;
padding-right: 14px;
}
.container-ul{
list-style: none;
}
.container-ul li{
min-height: 60px;
padding-top: 20px;
padding-bottom: 10px;
border-top: 1px solid #ccc;
}
.ul-image-a{
float: left;
margin-right: 14px;
}
.ul-image{
width: 50px;
}
.ul-name{
max-width: 60px;
float: left;
color: #2b84c9;
}
.ul-main{
max-width: 400px;
height: 30px;
float: left;
}
.ul-time{
float: right;
max-width: 110px;
text-align: right;
color: #999999;
}
</style>
</head>
<body>
<article class="container">
<section class="container-header">
<h3 class="container-title">评论</h3>
<div class="container-subtitle">共2条评论</div>
</section>
<div class="container-comment">
<a href="#" class="comment-href" target="_self"><img src="images/avatar1.png" class="comment-img"></a>
<form method="post" enctype="application/x-www-form-urlencoded" action="#" class="comment-main">
<textarea class="comment-text">评论</textarea>
<div class="comment-bottom">
<input type="text" readonly="readonly" class="comment-number" value="130/140">
<input type="submit" class="comment-submit" value="评论">
</div>
</form>
<div style="clear: both"></div>
</div>
<ul class="container-ul">
<li>
<a href="#" class="ul-image-a" target="_self"><img src="images/avatar2.png" class="ul-image"></a>
<a href="#" class="ul-name" target="_self">葵葵：</a>
<div class="ul-main">很好听啊~</div>
<div class="ul-time">28秒前</div>
</li>
<li>
<a href="#" class="ul-image-a" target="_self"><img src="images/avatar3.png" class="ul-image"></a>
<a href="#" class="ul-name" target="_self">雅歌：</a>
<div class="ul-main">很适合睡觉的时候试试看哈~</div>
<div class="ul-time">6月17日</div>
</li>
<li>
<a href="#" class="ul-image-a" target="_self"><img src="images/avatar4.png" class="ul-image"></a>
<a href="#" class="ul-name" target="_self">海港：</a>
<div class="ul-main">很适合睡觉的时候听</div>
<div class="ul-time">2012-05-29</div>
</li>
</ul>
</article>
</body>
</html>