                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /人人網(wǎng)評論功能

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>回復(fù)</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>回復(fù)</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>回復(fù)</i></a>
?????????????? </div>
?????????????? <div>25個人覺得贊</div>
?????????????? <textarea placeholder="說點什么..."></textarea>
?????????? </li>
?????????
?????????
?????? </ul>
?? </article>

</body>
</html>