HTML源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
ul{list-style: none;display: table;}
i.close{position:absolute;display:none;font-style: normal;background-color: gray;padding: 5px;cursor: pointer;
margin-left: 710px;margin-top:-20px; }
li:hover i{display: block;}
ul#list>li{padding: 20px 25px 20px 0;border-top: 1px solid silver;}
img{width: 100%;}
.wrapper{width: 740px;border-left: 1px solid darkgray;margin: 20px auto;padding: 20px 10px;}
.portrait{float:left;width: 50px;height:50px;margin-right: 10px;}
a.name{text-decoration: none;color: deepskyblue;font-size: 20px;}
p.listcontent{line-height: 25px;}
.details{margin-left: 60px;display: table;width: 640px;margin-top: 5px;}
time{color: darkgray;}
.details i{float: right;font-size: 14px;font-style: normal;margin-right: 10px;}
.details a{color: skyblue;text-decoration: underline;}
textarea{width: 630px;height:20px;margin-left: 60px;resize: none;margin-top: 5px;}
</style>
<script src="js/comment.js"></script>
</head>
<body>
<article>
<ul id="list">
<li>
<i>×</i>
<a href="javascript:;"><img src="img/1.jpg"></a>
<p><a href="javascript:;">andy:</a> "不行就分,喜欢就买,多喝
点水,重启试试。"←人生简单粗暴的方法。。。"不行就分,喜欢就买,多"不行就分,喜欢就买,多</p>
<div>
<time>09-28 18:29</time><a href="javascript:;"><i>分享</i></a><a href="javascript:;"><i>赞</i></a>
<a href="javascript:;"><i>回复</i></a>
</div>
<div>25个人觉得赞</div>
<textarea placeholder="说点什么..."></textarea>
</li>
<li>
<i>×</i>
<a href="javascript:;"><img src="img/2.jpg"></a>
<p><a href="javascript:;">cindy:</a> "不行就分,喜欢就买,多喝
点水,重启试试。"←人生简单粗暴的方法。。。"不行就分,喜欢就买,多"不行就分,喜欢就买,多</p>
<div>
<time>09-28 18:29</time><a href="javascript:;"><i>分享</i></a><a href="javascript:;"><i>赞</i></a>
<a href="javascript:;"><i>回复</i></a>
</div>
<div>25个人觉得赞</div>
<textarea placeholder="说点什么..."></textarea>
</li>
<li>
<i>×</i>
<a href="javascript:;"><img src="img/3.jpg"></a>
<p><a href="javascript:;">july:</a> "不行就分,喜欢就买,多喝
点水,重启试试。"←人生简单粗暴的方法。。。"不行就分,喜欢就买,多"不行就分,喜欢就买,多</p>
<div>
<time>09-28 18:29</time><a href="javascript:;"><i>分享</i></a><a href="javascript:;"><i>赞</i></a>
<a href="javascript:;"><i>回复</i></a>
</div>
<div>25个人觉得赞</div>
<textarea placeholder="说点什么..."></textarea>
</li>
</ul>
</article>
</body>
</html>