HTML｜响应式管理系统
1<!doctype html>
2<html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
5 <title>响应式管理系统</title>
6 <meta name="Keywords" content="关键词,关键词">
7 <meta name="description" content="">
8 <style type="text/css">
9 *{margin:0;padding:0;}
10 body{font-size:12px;font-family:"微软雅黑";color:#666;}
11 .content{width:100%;}
12
13 /*c_left start*/
14 .content .c_left{width:200px;height:800px;background:#282828;position:fixed;}
15 .content .c_left .c_logo{width:100%;height:108px;background:url("images/logo.png") no-repeat center center;border-bottom:1px solid #000;}
16 .content .c_left .c_nav ul li{list-style:none;line-height:52px;border-bottom:1px solid #000;border-top:1px solid #414141;}
17 .content .c_left .c_nav ul li a{display:block;padding-left:30px;text-decoration:none;font-size:14px;color:#fff;}
18 .content .c_left .c_nav ul li a:hover{background:#28b779;}
19 .content .c_left .c_nav ul li a i{width:16px;height:16px;background:url("images/ht_icon.png") no-repeat;display:inline-block;margin-top:19px;float:left;}
20 .content .c_left .c_nav ul li a .c_icon_1{background-position:-233px -52px;}/*这是小图标里面背景图片定位*/
21 .content .c_left .c_nav ul li a .c_icon_2{background-position:-254px -52px;}
22 .content .c_left .c_nav ul li a .c_icon_3{background-position:-211px -52px;}
23 .content .c_left .c_nav ul li a .c_icon_4{background-position:-274px -52px;}
24 .content .c_left .c_nav ul li a .c_icon_5{background-position:-295px -52px;}
25 .content .c_left .c_nav ul li a .c_icon_6{background-position:-315px -52px;width:19px;margin-top:24px;}
26 .content .c_left .c_nav ul li a .c_text{padding-left:10px;}
27 /*end c_left*/
28
29 /*c_header start*/
30 .c_header{width:100%;height:56px;background:#2f3437;}
31 .c_header .h_nav{height:56px;margin-left:200px;float:left;}
32 .c_header .h_nav ul li{list-style:none;float:left;width:100px;border-left:1px solid #414141;border-right:1px solid #000;}
33 .c_header .h_nav ul li a{display:block;height:48px;text-align:center;text-decoration:none;color:#838383;padding-top:8px;}
34 .c_header .h_nav ul li a:hover{color:#fff;}
35 .c_header .h_nav ul li a i{width:18px;height:17px;background:url("images/ht_icon.png") no-repeat;display:block;margin:3px auto;}/*因为i标签是行内元素,要显示,就要变成块元素*/
36 .c_header .h_nav ul li a .h_icon_1{background-position:0 -25px;}
37 .c_header .h_nav ul li a .h_icon_2{background-position:-24px 0;}
38 .c_header .h_nav ul li a .h_icon_3{background-position:-47px 0;}
39 .c_header .h_nav ul li a .h_icon_4{background-position:-68px 0;}
40 .c_header .h_nav ul li a .h_icon_5{background-position:-91px 0;}
41 .c_header .h_nav ul li a .h_icon_6{background-position:-113px 0;}
42 .c_header .h_nav ul li a .h_icon_7{background-position:-134px 0;}
43 .c_header .h_nav ul li a .h_icon_8{background-position:-152px 0;}
44 .c_header .h_nav ul li .h_sel{color:#fff;}
45 .c_header .h_nav ul li a:hover .h_icon_2{background-position:-24px -25px;}
46 .c_header .h_nav ul li a:hover .h_icon_3{background-position:-47px -25px;}
47 .c_header .h_nav ul li a:hover .h_icon_4{background-position:-68px -25px;}
48 .c_header .h_nav ul li a:hover .h_icon_5{background-position:-91px -25px;}
49 .c_header .h_nav ul li a:hover .h_icon_6{background-position:-113px -25px;}
50 .c_header .h_nav ul li a:hover .h_icon_7{background-position:-134px -25px;}
51 .c_header .h_nav ul li a:hover .h_icon_8{background-position:-152px -25px;}
52 .c_header .h_info{float:right;}
53 .c_header .h_info .i_user{line-height:56px;color:#fff;float:left;}
54 .c_header .h_info .i_out{float:left;}
55 .c_header .h_info .i_out a{width:65px;height:30px;background:#28b779;display:block;text-decoration:none;color:#fff;line-height:30px;margin:13px 20px 0 10px;}
56 .c_header .h_info .i_out a:hover{background:#24A66F;}
57 .c_header .h_info .i_out a .i_exit{float:left;padding-left:10px;}
58 .c_header .h_info .i_out a .i_icon{width:14px;height:14px;background:url("images/ht_icon.png") no-repeat 0 -52px;display:block;float:left;margin:9px 8px;}
59 /*end c_header*/
60
61 /*r_right start*/
62 .c_right{height:1500px;background:#f3f4f5;margin-left:200px;}
63 .c_right .r_position{background:#e5e5e5;height:51px;border-bottom:1px solid #ccc;line-height:51px;}
64 .c_right .r_position i{width:14px;height:18px;display:block;background:url("images/ht_icon.png") no-repeat -16px -51px;float:left;margin:16px 15px 0px 20px;}
65 .c_right .r_message .m_list{height:99px;float:left;margin-left:1%;margin-top:20px;}
66 .c_right .r_message .m_list .l_icon{width:44px;height:46px;display:block;background:url("images/ht_icon.png") no-repeat;float:left;margin:26px 5px 0px 30px;}
67 .c_right .r_message .m_list .l_info{margin-top:25px;color:#fff;}
68 .c_right .r_message .m_list .l_info span{font-size:24px;}
69 .c_right .r_message .m_1{width:22%;background:#27a9e3;}
70 .c_right .r_message .m_2{width:16%;background:#28b779;}
71 .c_right .r_message .m_3{width:17%;background:#ffb848;}
72 .c_right .r_message .m_4{width:21%;background:#cc6a6a;}
73 .c_right .r_message .m_5{width:18%;background:#2255a4;}
74 .c_right .r_message .m_6{width:17%;background:#da542e;}
75 .c_right .r_message .m_7{width:20%;background:#2255a4;}
76 .c_right .r_message .m_8{width:18%;background:#6297bc;}
77 .c_right .r_message .m_9{width:20%;background:#27a9e3;}
78 .c_right .r_message .m_10{width:19%;background:#28b779;}
79 .c_right .r_message .m_list:hover{background:#2f3437;}
80 .c_right .r_message .m_1 .l_icon{background-position:0 -76px;}
81 .c_right .r_message .m_2 .l_icon{background-position:-46px -76px;width:46px;}
82 .c_right .r_message .m_3 .l_icon{background-position:-96px -76px;width:46px;margin-top:33px;}
83 .c_right .r_message .m_4 .l_icon{background-position:-143px -76px;}
84 .c_right .r_message .m_5 .l_icon{background-position:-190px -76px;height:55px;}
85 .c_right .r_message .m_6 .l_icon{background-position:-239px -76px}
86 .c_right .r_message .m_7 .l_icon{background-position:-288px -76px;width:50px;}
87 .c_right .r_message .m_8 .l_icon{background-position:-342px -76px;width:49px;}
88 .c_right .r_message .m_9 .l_icon{background-position:-395px -76px;width:50px;}
89 .c_right .r_message .m_10 .l_icon{background-position:-449px -76px;width:47px;}
90 .c_right .r_message .m_list:hover{background:#2f3437;}
91 .c_right .r_table{border:1px solid #ccc;margin:20px 1% 0 1%;background:#fff;padding-bottom:10px;}
92 .c_right .r_table .t_title{width:100%;height:40px;background:#eee;float:left;} /*【bug: 少写float:left 】*/
93 .c_right .r_table .t_title i{width:16px;height:14px;display:inline-block;background:url("images/ht_icon.png") no-repeat -386px -15px;float:left;margin:12px;}
94 .c_right .r_table .t_title p{float:left;line-height:40px;border-left:1px solid #ccc;padding-left:10px;}
95 .c_right .r_table .t_label{width:80%;height:100px;float:left;} /*【bug: 把.t_label 写错成 .t_title 】*/
96 .c_right .r_table .t_label ul li{list-style:none;background:#999;float:left;margin:10px 10px 0 10px;}
97 .c_right .r_table .t_label ul li a{display:block;padding:8px 22px;text-decoration:none;color:#fff;}
98 .c_right .r_table .t_label ul li a:hover{background:#28b779;}
99 .c_right .r_table .t_label ul li i{width:15px;height:14px;display:illine-block;background:url("images/ht_icon.png") no-repeat;float:left;margin: 2px 10px 0 0;}
100 /*【bug:把 ; 写错成 : 】*/
101 .c_right .r_table .t_label ul li a .l_icon_1{background-position:-33px -52px;} /*【bug:少了个负号" - " 】*/
102 .c_right .r_table .t_label ul li a .l_icon_2{background-position:-49px -52px;}
103 .c_right .r_table .t_label ul li a .l_icon_3{background-position:-67px -52px;width:16px;height:15px;}
104 .c_right .r_table .t_label ul li a .l_icon_4{background-position:-87px -52px;}
105 .c_right .r_table .t_label ul li a .l_icon_5{background-position:-105px -52px;}
106 .c_right .r_table .t_label ul li a .l_icon_6{background-position:-123px -52px;}
107 .c_right .r_table .t_label ul li a .l_icon_7{background-position:-191px -52px;height:15px;}
108 .c_right .r_table .t_label ul li a .l_icon_8{background-position:-212px -52px;}
109 .c_right .r_table .t_label ul li a .l_icon_9{background-position:-140px -52px;}
110 .c_right .r_table .t_label ul li a .l_icon_10{background-position:-155px -52px;}
111 .c_right .r_table .t_label ul li a .l_icon_11{background-position:-172px -52px;}
112 .c_right .r_table .t_search{width:19%;height:30px;float:left;margin-top:10px;}
113 .c_right .r_table .t_search .s_text{width:60%;height:28px;border:1px solid #ddd;line-height:28px;outline:none;float:right;}
114 .c_right .r_table .t_search .s_btn{width:20%;height:30px;border:none;background:#999;color:#fff;outline:none;float:right;}
115 .c_right .r_table_list{width:100%;}
116 .c_right .r_table_list .t_tab{width:98%;border-collapse:collapse;margin:0 1% 0 1%;border:1px solid #ddd;}
117 .c_right .r_table_list .t_tab thead tr th{line-height:40px;background:#eee;}
118 .c_right .r_table_list .t_tab tr td{border:1px solid #ddd;line-height:40px;text-align:center;}
119 .c_right .r_table_list .t_tab thead tr .t_action{width:120px;}
120 .c_right .r_table_list .t_tab tbody tr td .t_tools{width:108px;height:24px;display:none;}
121 .c_right .r_table_list .t_tab tbody tr td .t_tools a{width:24px;height:24px;display:block;float:left;background:url("images/ht_icon.png") no-repeat;margin-left:3px;}
122 .c_right .r_table_list .t_tab tbody tr:hover{background:#F2F2F2;}
123 .c_right .r_table_list .t_tab tbody tr:hover .t_tools{display:block;}
124 .c_right .r_table_list .t_tab tbody tr td .t_tools a:hover{background-color:#000;}
125 .c_right .r_table_list .t_tab tbody tr td .t_tools .t_see{background-position:-359px -45px;background-color:#6297bc;}
126 .c_right .r_table_list .t_tab tbody tr td .t_tools .t_edit{background-position:-379px -47px;background-color:#27a9e3;}
127 .c_right .r_table_list .t_tab tbody tr td .t_tools .t_save{background-position:-398px -47px;background-color:#28b779;}
128 .c_right .r_table_list .t_tab tbody tr td .t_tools .t_del{background-position:-417px -48px;background-color:#ff912f;}
129 /*end r_right*/
130
131 .clear{clear:both;}
132
133 /*头部导航和用户信息小于1200的时候,使用下边的样式 (and后边必须要添加"空格")*/
134 @media screen and (max-width:1360px){
135 .c_right .r_message .m_list .l_icon{display:none;}
136 .c_right .r_message .m_list .l_info{text-align:center;}
137 .c_header .h_info .i_user{display:none;}
138 }
139
140 /*左册导航航小于1024的时候,用下边的样式*/
141 @media screen and (max-width:1024px){
142 .c_header .h_nav ul li{width:80px;}
143 .content .c_left .c_nav ul li a{height:50px;padding-left:16px;}
144 .content .c_left .c_nav ul li a .c_text{display:none;}
145 .content .c_left{width:50px;}
146 .c_right{margin-left:50px;}
147 .content .c_left .c_logo{width:50px;height:55px;background:url("images/logo1.png") no-repeat center center;}
148 .c_header .h_nav{margin-left:50px;}
149 }
150 </style>
151 </head>
152<body>
153 <div class="content">
154 <!--c_left start-->
155 <div class="c_left">
156 <div class="c_logo"></div>
157 <div class="c_nav">
158 <ul>
159 <li>
160 <a href="#">
161 <i class="c_icon_1"></i>
162 <span class="c_text">所以元素</span>
163 </a>
164 </li>
165 <li>
166 <a href="#">
167 <i class="c_icon_2"></i>
168 <span class="c_text">表格表单类</span>
169 </a>
170 </li>
171 <li>
172 <a href="#">
173 <i class="c_icon_3"></i>
174 <span class="c_text">标签按钮类</span>
175 </a>
176 </li>
177 <li>
178 <a href="#">
179 <i class="c_icon_4"></i>
180 <span class="c_text">日历类</span>
181 </a>
182 </li>
183 <li>
184 <a href="#">
185 <i class="c_icon_5"></i>
186 <span class="c_text">TAB轮换</span>
187 </a>
188 </li>
189 <li>
190 <a href="#">
191 <i class="c_icon_6"></i>
192 <span class="c_text">其他元素</span>
193 </a>
194 </li>
195 </ul>
196 </div>
197 </div>
198 <!--end c_left-->
199
200 <!--c_header start-->
201 <div class="c_header">
202 <div class="h_nav">
203 <ul>
204 <li>
205 <a href="#" class="h_sel">
206 <i class="h_icon_1"></i>
207 <span class="h_text">首页</span>
208 </a>
209 </li>
210 <li>
211 <a href="#">
212 <i class="h_icon_2"></i>
213 <span class="h_text">界面管理</span>
214 </a>
215 </li>
216 <li>
217 <a href="#">
218 <i class="h_icon_3"></i>
219 <span class="h_text">栏目管理</span>
220 </a>
221 </li>
222 <li>
223 <a href="#">
224 <i class="h_icon_4"></i>
225 <span class="h_text">内容管理</span>
226 </a>
227 </li>
228 <li>
229 <a href="#">
230 <i class="h_icon_5"></i>
231 <span class="h_text">用户管理</span>
232 </a>
233 </li>
234 <li>
235 <a href="#">
236 <i class="h_icon_6"></i>
237 <span class="h_text">论坛中心</span>
238 </a>
239 </li>
240 <li>
241 <a href="#">
242 <i class="h_icon_7"></i>
243 <span class="h_text">应用中心</span>
244 </a>
245 </li>
246 <li>
247 <a href="#">
248 <i class="h_icon_8"></i>
249 <span class="h_text">工具</span>
250 </a>
251 </li>
252 </ul>
253 </div>
254 <div class="h_info">
255 <div class="i_user">当前用户: C.Lyun 身份:系统管理员</div>
256 <div class="i_out">
257 <a href="#">
258 <span class="i_exit">退出</span>
259 <i class="i_icon"></i>
260 </a>
261 </div>
262 </div>
263 </div>
264 <!--end c_header-->
265
266 <!--c_right start-->
267 <div class="c_right">
268 <div class="r_position">
269 <i></i>
270 <p>您当前所在位置: 首页 > 后台中心</p>
271 </div>
272 <div class="r_message">
273 <div class="m_list m_1">
274 <i class="l_icon"></i>
275 <div class="l_info">
276 <span>26890</span>
277 <p>所以用户数</p>
278 </div>
279 </div>
280 <div class="m_list m_2">
281 <i class="l_icon"></i>
282 <div class="l_info">
283 <span>2356</span>
284 <p>所以用户数</p>
285 </div>
286 </div>
287 <div class="m_list m_3">
288 <i class="l_icon"></i>
289 <div class="l_info">
290 <span>9823</span>
291 <p>所以用户数</p>
292 </div>
293 </div>
294 <div class="m_list m_4">
295 <i class="l_icon"></i>
296 <div class="l_info">
297 <span>15315</span>
298 <p>所以用户数</p>
299 </div>
300 </div>
301 <div class="m_list m_5">
302 <i class="l_icon"></i>
303 <div class="l_info">
304 <span>0896</span>
305 <p>所以用户数</p>
306 </div>
307 </div>
308 <div class="m_list m_6">
309 <i class="l_icon"></i>
310 <div class="l_info">
311 <span>5345</span>
312 <p>所以用户数</p>
313 </div>
314 </div>
315 <div class="m_list m_7">
316 <i class="l_icon"></i>
317 <div class="l_info">
318 <span>46546</span>
319 <p>所以用户数</p>
320 </div>
321 </div>
322 <div class="m_list m_8">
323 <i class="l_icon"></i>
324 <div class="l_info">
325 <span>9097</span>
326 <p>所以用户数</p>
327 </div>
328 </div>
329 <div class="m_list m_9">
330 <i class="l_icon"></i>
331 <div class="l_info">
332 <span>2312</span>
333 <p>所以用户数</p>
334 </div>
335 </div>
336 <div class="m_list m_10">
337 <i class="l_icon"></i>
338 <div class="l_info">
339 <span>9708</span>
340 <p>所以用户数</p>
341 </div>
342 </div>
343 </div>
344 <div class="clear"></div>
345 <div class="r_table">
346 <div class="t_title">
347 <i></i>
348 <p>表格表单类</p>
349 </div>
350 <div class="t_label">
351 <ul>
352 <li>
353 <a href="#">
354 <i class="l_icon_1"></i>
355 <span>添加</span>
356 </a>
357 </li>
358 <li>
359 <a href="#">
360 <i class="l_icon_2"></i><!--【bug：把l写错成i】-->
361 <span>编辑</span>
362 </a>
363 </li>
364 <li>
365 <a href="#">
366 <i class="l_icon_3"></i><!--【bug：把l写错成i】-->
367 <span>添加章节</span>
368 </a>
369 </li>
370 <li>
371 <a href="#">
372 <i class="l_icon_4"></i><!--【bug：把l写错成i】-->
373 <span>上存资料</span>
374 </a>
375 </li>
376 <li>
377 <a href="#">
378 <i class="l_icon_5"></i><!--【bug：把l写错成i】-->
379 <span>置顶</span>
380 </a>
381 </li>
382 <li>
383 <a href="#">
384 <i class="l_icon_6"></i><!--【bug：把l写错成i】-->
385 <span>取消置顶</span>
386 </a>
387 </li>
388 <li>
389 <a href="#">
390 <i class="l_icon_7"></i><!--【bug：把l写错成i】-->
391 <span>刷新数据</span>
392 </a>
393 </li>
394 <li>
395 <a href="#">
396 <i class="l_icon_8"></i><!--【bug：把l写错成i】-->
397 <span>标记</span>
398 </a>
399 </li>
400 <li>
401 <a href="#">
402 <i class="l_icon_9"></i><!--【bug：把l写错成i】-->
403 <span>生成静态页面</span>
404 </a>
405 </li>
406 <li>
407 <a href="#">
408 <i class="l_icon_10"></i><!--【bug：把l写错成i】-->
409 <span>删除</span>
410 </a>
411 </li>
412 <li>
413 <a href="#">
414 <i class="l_icon_11"></i>
415 <span>审核信息</span>
416 </a>
417 </li>
418 </ul>
419 </div>
420 <div class="t_search">
421 <input type="button" value="GO" class="s_btn" /><input type="text" class="s_text" />
422 </div>
423 <div class="clear"></div>
424 <div class="r_table_list">
425 <table class="t_tab">
426 <thead>
427 <tr>
428 <th>编号</th>
429 <th>ID</th>
430 <th>标题</th>
431 <th>发布者</th>
432 <th>点击数</th>
433 <th>类型</th>
434 <th>发布时间</th>
435 <th>置顶</th>
436 <th>静态化</th>
437 <th>评论</th>
438 <th>状态</th>
439 <th class="t_action">操作</th>
440 </tr>
441 </thead>
442 <tbody>
443 <tr>
444 <td>1</td>
445 <td>001</td>
446 <td>Myeclipse注释自动补全</td>
447 <td>arry老师</td>
448 <td>23423</td>
449 <td>文章</td>
450 <td>2018/5/20</td>
451 <td>已置顶</td>
452 <td>已静态化</td>
453 <td>是</td>
454 <td>已发布</td>
455 <td>
456 <div class="t_tools">
457 <a href="#" class="t_see"></a>
458 <a href="#" class="t_edit"></a>
459 <a href="#" class="t_save"></a>
460 <a href="#" class="t_del"></a>
461 </div>
462 </td>
463 </tr>
464 <tr>
465 <td>2</td>
466 <td>002</td>
467 <td>Myeclipse注释自动补全</td>
468 <td>arry老师</td>
469 <td>23423</td>
470 <td>文章</td>
471 <td>2018/5/20</td>
472 <td>已置顶</td>
473 <td>已静态化</td>
474 <td>是</td>
475 <td>已发布</td>
476 <td>
477 <div class="t_tools">
478 <a href="#" class="t_see"></a>
479 <a href="#" class="t_edit"></a>
480 <a href="#" class="t_save"></a>
481 <a href="#" class="t_del"></a>
482 </div>
483 </td>
484 </tr>
485 <tr>
486 <td>3</td>
487 <td>003</td>
488 <td>Myeclipse注释自动补全</td>
489 <td>arry老师</td>
490 <td>23423</td>
491 <td>文章</td>
492 <td>2018/5/20</td>
493 <td>已置顶</td>
494 <td>已静态化</td>
495 <td>是</td>
496 <td>已发布</td>
497 <td>
498 <div class="t_tools">
499 <a href="#" class="t_see"></a>
500 <a href="#" class="t_edit"></a>
501 <a href="#" class="t_save"></a>
502 <a href="#" class="t_del"></a>
503 </div>
504 </td>
505 </tr>
506 <tr>
507 <td>4</td>
508 <td>004</td>
509 <td>Myeclipse注释自动补全</td>
510 <td>arry老师</td>
511 <td>23423</td>
512 <td>文章</td>
513 <td>2018/5/20</td>
514 <td>已置顶</td>
515 <td>已静态化</td>
516 <td>是</td>
517 <td>已发布</td>
518 <td>
519 <div class="t_tools">
520 <a href="#" class="t_see"></a>
521 <a href="#" class="t_edit"></a>
522 <a href="#" class="t_save"></a>
523 <a href="#" class="t_del"></a>
524 </div>
525 </td>
526 </tr>
527 <tr>
528 <td>5</td>
529 <td>005</td>
530 <td>Myeclipse注释自动补全</td>
531 <td>arry老师</td>
532 <td>23423</td>
533 <td>文章</td>
534 <td>2018/5/20</td>
535 <td>已置顶</td>
536 <td>已静态化</td>
537 <td>是</td>
538 <td>已发布</td>
539 <td>
540 <div class="t_tools">
541 <a href="#" class="t_see"></a>
542 <a href="#" class="t_edit"></a>
543 <a href="#" class="t_save"></a>
544 <a href="#" class="t_del"></a>
545 </div>
546 </td>
547 </tr>
548 <tr>
549 <td>6</td>
550 <td>006</td>
551 <td>Myeclipse注释自动补全</td>
552 <td>arry老师</td>
553 <td>23423</td>
554 <td>文章</td>
555 <td>2018/5/20</td>
556 <td>已置顶</td>
557 <td>已静态化</td>
558 <td>是</td>
559 <td>已发布</td>
560 <td>
561 <div class="t_tools">
562 <a href="#" class="t_see"></a>
563 <a href="#" class="t_edit"></a>
564 <a href="#" class="t_save"></a>
565 <a href="#" class="t_del"></a>
566 </div>
567 </td>
568 </tr>
569 <tr>
570 <td>7</td>
571 <td>007</td>
572 <td>Myeclipse注释自动补全</td>
573 <td>arry老师</td>
574 <td>23423</td>
575 <td>文章</td>
576 <td>2018/5/20</td>
577 <td>已置顶</td>
578 <td>已静态化</td>
579 <td>是</td>
580 <td>已发布</td>
581 <td>
582 <div class="t_tools">
583 <a href="#" class="t_see"></a>
584 <a href="#" class="t_edit"></a>
585 <a href="#" class="t_save"></a>
586 <a href="#" class="t_del"></a>
587 </div>
588 </td>
589 </tr>
590 </tbody>
591 </table>
592 </div>
593 </div>
594 </div>
595 <!--end c_right-->
596
597 </div>
598</body>
599</html>
浙公网安备 33010602011771号