1 <!DOCTYPE HTML>
2 <html lang="zh-CN">
3 <head>
4 <meta charset="UTF-8">
5 <title>带头像三级评论回复html+css代码</title>
6 <style type="text/css">
7 * {
8 margin: 0;
9 padding: 0;
10 }
11
12 .feed {
13 font-family: "微软雅黑";
14 width: 720px;
15 margin: 8px 0;
16 }
17
18 .avatar {
19 width: 50px;
20 float: left;
21 margin: 0 8px 0 0;
22 box-shadow: 0 0 3px #e0e0e0;
23 border-radius: 5px;
24 border: 1px solid #e0e0e0;
25 }
26
27 .feed .avatar img {
28 width: 50px;
29 height: 50px;
30 }
31
32 .feed .box1 {
33 width: 640px;
34 float: left;
35 background: #f6f6f6;
36 border: 1px solid #e0e0e0;
37 border-radius: 5px;
38 }
39
40 .feed .box1 .current {
41 font-size: 14px;
42 margin: 8px;
43 }
44
45 .feed .box1 .info {
46 margin: 0 8px;
47 }
48
49 .feed .box1 .info span {
50 float: right;
51 }
52
53 .feed .box1 .line {
54 padding: 8px 0 0 0;
55 border-bottom: 1px solid #e0e0e0;
56 }
57
58 .feed .box1 .box2 {
59 margin: 8px;
60 padding: 0 0 8px 0;
61 border-bottom: 1px dashed #ccc;
62 }
63
64 .feed .box1 .box2_comments {
65 width: 560px;
66 overflow: hidden;
67 float: left;
68 }
69
70 .feed .box1 .say {
71 margin: 0 0 8px;
72 }
73
74 .clear {
75 clear: both;
76 }
77
78 .feed .box1 .box2_comments .box3 {
79 margin: 8px 0;
80 }
81
82 .feed .box1 .box2_comments .box3_comments {
83 float: left;
84 width: 500px;
85 }
86
87 .reply_area {
88 border: 1px solid #e0e0e0;
89 height: 30px;
90 line-height: 30px;
91 width: 620px;
92 margin: 8px;
93 color: #666;
94 font-size: 12px;
95 font-family: "微软雅黑";
96 clear: both;
97 }
98
99 </style>
100 </head>
101 <body>
102 <ul>
103 <li class="feed">
104 <div class="avatar">
105 <img src="images/user.jpg" alt="" />
106 </div><!--第一层循环start-->
107 <div class="box1">
108 <p class='current'>
109 <a href="">user</a>
110 说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容
111 </p>
112 <p class='info'>
113 <span><a href="">删除</a><a href="">评论</a></span>
114 <strong>刚刚</strong>
115 通过QQ空间
116 </p>
117 <p class="line">
118 </p>
119 <!--第二层循环start-->
120 <div class="box2">
121 <div class="avatar">
122 <img src="images/user.jpg" alt="" />
123 </div>
124 <div class="box2_comments">
125 <p class='say'>
126 <a href="">user</a>
127 说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容
128 </p>
129 <p>
130 <strong>刚刚</strong>
131 <a href="">删除</a>
132 <a href="">回复</a>
133 </p>
134 <!--第三层循环start-->
135 <div class="box3">
136 <div class="avatar">
137 <img src="images/user.jpg" alt="" />
138 </div>
139 <div class="box3_comments">
140 <p class='say'>
141 <a href="">user</a>
142 说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容
143 </p>
144 <p>
145 <strong>刚刚</strong>
146 <a href="">删除</a>
147 <a href="">回复</a>
148 </p>
149 </div>
150 <div class="clear">
151 </div>
152 </div>
153 <!--第三层循环end-->
154 </div>
155 <div class="clear">
156 </div>
157 </div>
158 <div class="box2">
159 <div class="avatar">
160 <img src="images/user.jpg" alt="" />
161 </div>
162 <div class="box2_comments">
163 <p class='say'>
164 <a href="">user</a>
165 说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容
166 </p>
167 <p>
168 <strong>刚刚</strong>
169 <a href="">删除</a>
170 <a href="">回复</a>
171 </p>
172 <!--第三层循环start-->
173 <div class="box3">
174 <div class="avatar">
175 <img src="images/user.jpg" alt="" />
176 </div>
177 <div class="box3_comments">
178 <p class='say'>
179 <a href="">user</a>
180 说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容
181 </p>
182 <p>
183 <strong>刚刚</strong>
184 <a href="">删除</a>
185 <a href="">回复</a>
186 </p>
187 </div>
188 <div class="clear">
189 </div>
190 </div>
191 <div class="box3">
192 <div class="avatar">
193 <img src="images/user.jpg" alt="" />
194 </div>
195 <div class="box3_comments">
196 <p class='say'>
197 <a href="">user</a>
198 说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容说说内容
199 </p>
200 <p>
201 <strong>刚刚</strong>
202 <a href="">删除</a>
203 <a href="">回复</a>
204 </p>
205 </div>
206 <div class="clear">
207 </div>
208 </div>
209 <!--第三层循环end-->
210 </div>
211 <div class="clear">
212 </div>
213 </div>
214 <!--第二层循环end-->
215 <p class="line">
216 </p>
217 <textarea name="" class="reply_area">
218 我也说两句
219 </textarea>
220 </div>
221 <!--第一层循环end-->
222 <div class="clear">
223 </div>
224 </li>
225 </ul>
226 </body>
227 </html>
浙公网安备 33010602011771号