0f7065fa by 任超

style:公示公告样式

1 parent 671438d8
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
67 </div> 67 </div>
68 <div class="notice"> 68 <div class="notice">
69 <h2> 69 <h2>
70 <a title="公示公告" href="./staticViews/gsgg/index.html" class="news_title_content"> 70 <a title="公示公告" href="./staticViews/gsgg.html" class="news_title_content">
71 <div class="news_title"> 71 <div class="news_title">
72 <svg class="icon svg-icon" aria-hidden="true"> 72 <svg class="icon svg-icon" aria-hidden="true">
73 <use xlink:href="#icongonggao"></use> 73 <use xlink:href="#icongonggao"></use>
......
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
5 .mainbody { 5 .mainbody {
6 width: 1200px; 6 width: 1200px;
7 margin: 0 auto; 7 margin: 0 auto;
8 color: #4a4a4a;
8 } 9 }
9 /* --------------------导航tab------------------------- */ 10 /* --------------------导航tab------------------------- */
10 .navigation_crumbs { 11 .navigation_crumbs {
...@@ -134,7 +135,7 @@ div.navigation { ...@@ -134,7 +135,7 @@ div.navigation {
134 display: inline-block; 135 display: inline-block;
135 } 136 }
136 .mainbody .DividingLine { 137 .mainbody .DividingLine {
137 width: 1150px; 138 width: 1200px;
138 height: 1px; 139 height: 1px;
139 margin:0 auto; 140 margin:0 auto;
140 background-color:#DEDEDE; 141 background-color:#DEDEDE;
...@@ -150,3 +151,7 @@ div.navigation { ...@@ -150,3 +151,7 @@ div.navigation {
150 line-height: 24px; 151 line-height: 24px;
151 padding-bottom: 30px; 152 padding-bottom: 30px;
152 } 153 }
154 .notice_content {
155 margin-bottom: 100px;
156 line-height: 21px;
157 }
...\ No newline at end of file ...\ No newline at end of file
......
1 * {
2 margin: 0;
3 padding: 0;
4 }
5 1
6 ::-webkit-input-placeholder { /* WebKit browsers */ 2 ::-webkit-input-placeholder { /* WebKit browsers */
7 font-size: 13px; 3 font-size: 13px;
...@@ -20,12 +16,6 @@ ...@@ -20,12 +16,6 @@
20 input { 16 input {
21 padding-left: 10px; 17 padding-left: 10px;
22 } 18 }
23 /*================首页 start=====================*/
24 div a {
25 color: #000000;
26 text-decoration: none;
27 }
28
29 div.subject h2 a:hover { 19 div.subject h2 a:hover {
30 color: #f46143; 20 color: #f46143;
31 } 21 }
...@@ -218,10 +208,10 @@ div.navigation { ...@@ -218,10 +208,10 @@ div.navigation {
218 border-bottom: 1px solid #DEDEDE; 208 border-bottom: 1px solid #DEDEDE;
219 display: flex; 209 display: flex;
220 align-items: center; 210 align-items: center;
211 position: relative;
221 } 212 }
222 213
223 .top > div { 214 .top > div {
224 margin: 0 auto;
225 display: inline-block; 215 display: inline-block;
226 } 216 }
227 .top span{ 217 .top span{
...@@ -240,30 +230,48 @@ div.navigation { ...@@ -240,30 +230,48 @@ div.navigation {
240 border-radius: 2px; 230 border-radius: 2px;
241 border: 1px solid #CBCBCB; 231 border: 1px solid #CBCBCB;
242 margin-left: 10px; 232 margin-left: 10px;
233 padding-left: 10px;
234 }
235 .top-title {
236 margin-right: 6%;
237 }
238 .top-serach {
239 position: absolute;
240 right: 0;
243 } 241 }
244
245 .top button { 242 .top button {
246 width: 120px; 243 width: 120px;
247 height: 40px; 244 height: 40px;
248 background: #0091FF; 245 background: #0091FF;
249 border: none; 246 border: none;
250 border-radius: 3px; 247 border-radius: 3px;
251 color: white; 248 color: #FFFFFF;
249 font-weight: 100;
252 } 250 }
253 .gglist{ 251 .announcement_list {
254 width:76%;
255 float: left; 252 float: left;
253 width:81%;
254 }
255 .gglist{
256 border-right:1px solid #EAEAEA;
257 padding-bottom: 60px;
258 margin-top: 27px;
256 } 259 }
257 .gglist li{ 260 .gglist li{
258 height: 104px; 261 height: 104px;
259 } 262 }
263 .gglist .icon {
264 width: 38px;
265 height: 104px;
266 float: left;
267 }
260 .gglist li{ 268 .gglist li{
261 border-bottom:1px solid #EAEAEA; 269 border-bottom:1px solid #EAEAEA;
262 border-right:1px solid #EAEAEA
263 } 270 }
264 .listArea_right{ 271 .listArea_right{
265 width: 23%; 272 width: 201px;
266 float: right; 273 float: right;
274 text-align: right;
267 } 275 }
268 .diver{ 276 .diver{
269 width: 23%; 277 width: 23%;
...@@ -282,6 +290,7 @@ div.navigation { ...@@ -282,6 +290,7 @@ div.navigation {
282 font-weight: 500; 290 font-weight: 500;
283 color: #4A4A4A; 291 color: #4A4A4A;
284 line-height: 18px; 292 line-height: 18px;
293 font-weight: 600;
285 } 294 }
286 /* .top-date input:before { 295 /* .top-date input:before {
287 content: attr(placeholder) 296 content: attr(placeholder)
...@@ -353,10 +362,15 @@ div.navigation { ...@@ -353,10 +362,15 @@ div.navigation {
353 font-weight: bold; 362 font-weight: bold;
354 color: #4A4A4A; 363 color: #4A4A4A;
355 line-height: 104px; 364 line-height: 104px;
356 padding-left: 20px;
357 padding-right: 20px; 365 padding-right: 20px;
358 } 366 }
359 367 .item_list {
368 margin-left: 51px;
369 width: 92%;
370 overflow: hidden;
371 text-overflow:ellipsis;
372 white-space: nowrap;
373 }
360 .right { 374 .right {
361 width: 200px; 375 width: 200px;
362 margin-left: 15px; 376 margin-left: 15px;
...@@ -367,10 +381,11 @@ div.navigation { ...@@ -367,10 +381,11 @@ div.navigation {
367 height: 18px; 381 height: 18px;
368 font-size: 18px; 382 font-size: 18px;
369 font-weight: 500; 383 font-weight: 500;
370 color: #4A4A4A;
371 line-height: 18px; 384 line-height: 18px;
372 margin-bottom: 19px; 385 margin-bottom: 19px;
373 margin-top:30px 386 margin-top:30px;
387 font-weight: 600;
388 color: #4a4a4a;
374 } 389 }
375 .right-body { 390 .right-body {
376 display: inline-block; 391 display: inline-block;
...@@ -383,7 +398,9 @@ div.navigation { ...@@ -383,7 +398,9 @@ div.navigation {
383 } 398 }
384 399
385 .tj img, .tj span { 400 .tj img, .tj span {
386 float: left; 401 width: 100%;
402 display: block;
403 text-align: left;
387 } 404 }
388 405
389 .tj-title { 406 .tj-title {
...@@ -404,9 +421,9 @@ div.navigation { ...@@ -404,9 +421,9 @@ div.navigation {
404 font-family: PingFangSC-Regular, PingFang SC; 421 font-family: PingFangSC-Regular, PingFang SC;
405 font-weight: 400; 422 font-weight: 400;
406 color: #9B9B9B; 423 color: #9B9B9B;
407 line-height: 12px;
408 display: inline-block; 424 display: inline-block;
409 margin-top: 6px; 425 margin-top: 6px;
426 margin-bottom: 20px;
410 } 427 }
411 428
412 .right-bottom { 429 .right-bottom {
...@@ -436,30 +453,54 @@ div.navigation { ...@@ -436,30 +453,54 @@ div.navigation {
436 453
437 .zcfg-top { 454 .zcfg-top {
438 width: 200px; 455 width: 200px;
439 height: 14px;
440 font-size: 14px; 456 font-size: 14px;
441 font-family: PingFangSC-Medium, PingFang SC;
442 font-weight: bold; 457 font-weight: bold;
443 color: #4A4A4A; 458 color: #4A4A4A;
444 line-height: 14px; 459 line-height: 21px;
460 text-align: left;
445 } 461 }
446 462
447 .zcfg-body { 463 .zcfg-body {
448 width: 200px; 464 width: 200px;
449 font-size: 14px; 465 font-size: 14px;
450 display: inline-block; 466 display: inline-block;
451 font-family: PingFangSC-Regular, PingFang SC;
452 font-weight: 400; 467 font-weight: 400;
453 color: #6D7278; 468 color: #6D7278;
454 line-height: 21px; 469 line-height: 23px;
470 text-align: left;
455 } 471 }
456 472
457 .zcfg-bottom { 473 .zcfg-bottom {
458 width: 90px; 474 width: 90px;
459 height: 12px; 475 height: 12px;
460 font-size: 12px; 476 font-size: 12px;
461 font-family: PingFangSC-Regular, PingFang SC;
462 font-weight: 400;
463 color: #9B9B9B; 477 color: #9B9B9B;
464 line-height: 12px; 478 line-height: 21px;
479 text-align: left;
480 }
481 .rightcontainer {
482 margin-bottom: 20px;
483 }
484 #test1 {
485 text-align: center;
486 margin-top: -30px;
487 margin-bottom: 100px;
488 }
489 .layui-laypage .layui-laypage-curr .layui-laypage-em {
490 background-color: #0091FF!important;
491 }
492 .top-date span{
493 display: inline-block;
494 float: left;
495 margin-top: 12px;
496 }
497 .top-date input {
498 float: left;
499 }
500 input {
501 color: #4a4a4a!important;
502 font-weight: 100!important;
503 }
504 .layui-laydate .layui-this {
505 background-color: #0091FF!important;
465 } 506 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -5,4 +5,22 @@ layui.use('element', function () { ...@@ -5,4 +5,22 @@ layui.use('element', function () {
5 //console.log(elem) 5 //console.log(elem)
6 layer.msg(elem.text()); 6 layer.msg(elem.text());
7 }); 7 });
8 layui.use('laydate', function(){
9 var laydate = layui.laydate;
10
11 //常规用法
12 laydate.render({
13 elem: '#date'
14 });
15 })
16
17 layui.use('laypage', function(){
18 var laypage = layui.laypage;
19
20 //执行一个laypage实例
21 laypage.render({
22 elem: 'test1' //注意,这里的 test1 是 ID,不用加 # 号
23 ,count: 50 //数据总数,从服务端得到
24 });
25 });
8 }); 26 });
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
28 <div>发布日期:2020-10-28</div> 28 <div>发布日期:2020-10-28</div>
29 </div> 29 </div>
30 <div class="DividingLine"></div> 30 <div class="DividingLine"></div>
31 <div> 31 <div class="notice_content">
32 近日,自然资源部印发《自然资源统计工作管理办法》,旨在规范自然资源统计管理工作,建立健全统计数据质量控制体系,提高自然资源统计数据的真实性,发挥统计在自然资源管理中的重要基础性作用,该办法将于2020年8月1日起施行。 32 近日,自然资源部印发《自然资源统计工作管理办法》,旨在规范自然资源统计管理工作,建立健全统计数据质量控制体系,提高自然资源统计数据的真实性,发挥统计在自然资源管理中的重要基础性作用,该办法将于2020年8月1日起施行。
33 《自然资源统计工作管理办法》 一、明确自然资源统计主要任务 33 《自然资源统计工作管理办法》 一、明确自然资源统计主要任务
34 对7大类自然资源对象(土地、矿产、森林、草原、湿地、水、海域海岛),以及其他统计对象(海洋经济、地质勘查、地质灾害、测绘地理信息、自然资源督察、行政管理)开展统计调查和统计分析,提供统计数据,实施统计监督。 34 对7大类自然资源对象(土地、矿产、森林、草原、湿地、水、海域海岛),以及其他统计对象(海洋经济、地质勘查、地质灾害、测绘地理信息、自然资源督察、行政管理)开展统计调查和统计分析,提供统计数据,实施统计监督。
......
1 * {
2 padding: 0;
3 margin: 0;
4 }
5
6 .main {
7
8 }
9 .mainbody{
10 width: 1200px;
11 margin: 0 auto;
12 }
13 /*================首页 start=====================*/
14 div a {
15 color: #000000;
16 text-decoration: none;
17 }
18
19 div.subject h2 a:hover {
20 color: #f46143;
21 }
22
23 div.subject {
24 margin: 0 auto;
25 float: none;
26 clear: both;
27 position: relative;
28 min-width: 1200px;
29 }
30 /*新闻 */
31 div.top-logo {
32 width: 1200px;
33 height: 70px;
34 padding-top: 20px;
35 }
36
37 div.top-logo ::-webkit-input-placeholder { /* WebKit browsers */
38 font-size: 13px;
39 }
40
41 div.top-logo ::-moz-placeholder { /* Mozilla Firefox 19+ */
42 font-size: 13px;
43 }
44
45 div.top-logo :-ms-input-placeholder { /* Internet Explorer 10+ */
46 font-size: 13px;
47 }
48 .top_logo_content {
49 height: 40px;
50 width: 100%;
51 margin: 0 auto;
52 }
53 div.top-logo .top_logo_search {
54 float: left;
55 width: 350px;
56 position: relative;
57 margin-left: 400px;
58 }
59 div.top-logo .top_logo_search input {
60 border-radius: 50px;
61 }
62 div.top-logo .login {
63 float: right;
64 margin-top: 8px;
65 }
66 div.top-logo .top_logo_search i {
67 position: absolute;
68 right: 10px;
69 top: 11px;
70 cursor: pointer;
71 }
72
73 /*end*/
74
75 .top-logo h1 {
76 display: inline-block;
77 float: left;
78 }
79 .layui-nav-item a{
80 font-size: 16px;
81 }
82 /*------------------首页 end------------*/
83 /* --------------------导航tab------------------------- */
84 .navigation_crumbs {
85 width: 100%;
86 height: 45px;
87 padding: 10px 0;
88 line-height: 25px;
89 background: #FAFAFA;
90 border: 1px solid #E6E6E6;
91 box-sizing: border-box;
92 }
93 .navigation_crumbs .layui-breadcrumb a:hover {
94 color: #f46143!important;
95 }
96
97 .contentBox {
98 width: 1200px;
99 margin: 0 auto;
100 overflow: hidden;
101 }
102 .one_content {
103 border: 1px solid #DEDEDE;;
104 margin-top: 30px;
105 }
106 .one_content .layui-tab {
107 margin: 0;
108 }
109 .one_content .layui-tab-title li {
110 width: 100px;
111 font-weight: 600;
112 color: #6D7278;
113 }
114 .one_content .layui-tab-title .layui-this {
115 color: #4A4A4A;
116 }
117 .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after {
118 border-color: #006CFF;
119 }
120 .layui-tab .layui-tab-brief .layui-this {
121 color: #006CFF;
122 }
123 .layui-tab .layui-tab-brief li {
124 width: 90px;
125 }
126 .online_business {
127 margin-top: 20px;
128 }
129 .online_business h2 {
130 width: 100%;
131 height: 43px;
132 line-height: 43px;
133 background: #FAFAFA;
134 border-radius: 4px;
135 border: 1px solid #DEDEDE;
136 padding-left: 15px;
137 box-sizing: border-box;
138 }
139 .online_list {
140 padding-bottom: 20px;
141 overflow: hidden;
142 }
143 .online_list li{
144 width: 45%!important;
145 float: left;
146 height: 60px;
147 line-height: 60px;
148 border-bottom: 1px dotted #DEDEDE;
149 }
150 .online_list li:nth-child(even) {
151 margin-left: 10%;
152 }
153 .online_list li a{
154 display: block;
155 width: 100%;
156 }
157 .online_list li a:hover span{
158 color: #f46143;
159 }
160 .online_list li a button {
161 float: right;
162 margin-top: 15px;
163 }
164 /* ---------------------------------------------------- */
165 .top-logo ul li {
166 display: inline-block;
167 padding: 0 8px;
168 }
169
170 .top-logo ul li:first-child {
171 border-right: 1px solid grey;
172 }
173
174 div.navigation {
175 text-align: center;
176 }
177 .navigation .layui-nav-item {
178 width: 130px;
179 position: relative;
180 margin: 0 22px;
181 }
182 .layui-bg-blue {
183 background-color: #006CFF!important;
184 }
185
186 .layui-nav-item:not(:first-child)::before {
187 content: '';
188 position: absolute;
189 height: 22px;
190 border-left: 1px solid #ccc;
191 top: 21px;
192 left: -20px;
193 }
194 .title {
195 height: auto;
196 font-size: 30px;
197 font-weight: 500;
198 color: #4A4A4A;
199 line-height: 30px;
200 text-align: center;
201 padding: 20px;
202 }
203
204 .release {
205 display: flex;
206 flex-flow: row nowrap;
207 justify-content: space-between;
208 font-size: 16px;
209 font-weight: 400;
210 color: #6D7278;
211 line-height: 12px;
212 margin-top: 20px;
213 margin-bottom: 20px;
214 }
215
216 .release div {
217 display: inline-block;
218 }
219
220 .body {
221 padding-top: 20px;
222 border-top: 1px solid #DEDEDE;
223 height: auto;
224 font-size: 16px;
225 font-weight: 400;
226 color: #4A4A4A;
227 line-height: 24px;
228 padding-bottom: 30px;
229 }
230 /* -----------------底部start----------------------------- */
231 div.footer {
232 background-color: #233042;
233 }
234 div.footer .system_service {
235 width: 100%;
236 border-bottom: 1px solid #4A4A4A;
237 }
238 div.footer .system_service ul {
239 padding: 40px 0;
240 width: 1400px;
241 margin: 0 auto;
242 font-size: 0;
243 }
244 div.footer .system_service ul li {
245 width: 20%;
246 display: inline-block;
247 text-align: center;
248 height: 18px;
249 box-sizing: border-box;
250 }
251 div.footer .system_service ul li:not(:last-child) {
252 border-right: 1px solid #6D7278;
253 }
254 div.footer .system_service ul li a{
255 font-size: 16px;
256 font-weight: 400;
257 color: #DEDEDE;
258 }
259 div.footer .system_service ul li a:hover {
260 color: #f46143;
261 }
262 .footer .subject {
263 width: 1200px;
264 margin: 0 auto;
265 padding: 40px 0;
266 overflow: hidden;
267 }
268 .footer .subject .footer_logo {
269 float: left;
270 }
271 .footer .subject .footer_logo a{
272 display: block;
273 width: 64px;
274 height: 74px;
275 padding: 10px;
276 }
277 .footer .subject .footer_logo a img {
278 width: 100%;
279 height: 100%;
280 }
281 .footer .subject ul, ol {
282 float: left;
283 color: #CBCBCB;
284 text-align: left;
285 }
286 .footer .subject ul {
287 width: 72%;
288 box-sizing: border-box;
289 padding-left: 40px;
290 margin-top: 10px;
291 }
292 .footer .subject ul li {
293 width: 30%;
294 display: inline-block;
295 text-align: left;
296 margin-bottom: 30px;
297 }
298 .footer .subject ol li {
299 display: inline-block;
300 text-align: center;
301 }
302 .footer .subject ol li:last-child {
303 margin-left: 60px;
304 }
305 .footer .subject ol li img {
306 width: 80px;
307 height: 80px;
308 }
309 .footer .subject ol li p {
310 font-size: 12px;
311 color: #CBCBCB;
312 margin-top: 5px;
313 }
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html 1 <!DOCTYPE html
2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <html xmlns="http://www.w3.org/1999/xhtml">
4
5 <head> 4 <head>
6 <style> 5 <style>
7 </style> 6 </style>
...@@ -25,11 +24,14 @@ ...@@ -25,11 +24,14 @@
25 <div class="top-title"> 24 <div class="top-title">
26 <span>标题内容:</span><input type="text" placeholder="请输入标题内容"> 25 <span>标题内容:</span><input type="text" placeholder="请输入标题内容">
27 </div> 26 </div>
28 <div class="top-date "> 27 <div class="top-date">
29 <span>发布时间:</span><input type="date" placeholder="选择时间"> 28 <span>发布时间:</span> <input type="text" class="layui-input" id="date" placeholder="请选择时间">
30 </div> 29 </div>
31 <div class="top-serach"> 30 <div class="top-serach">
32 <button>查询</button> 31 <button>
32 <i class="layui-icon">&#xe615;</i>
33 查询
34 </button>
33 </div> 35 </div>
34 </div> 36 </div>
35 <div class="layui-tab layui-tab-brief" lay-filter=""> 37 <div class="layui-tab layui-tab-brief" lay-filter="">
...@@ -41,18 +43,23 @@ ...@@ -41,18 +43,23 @@
41 </div> 43 </div>
42 <!-- 列表区域 --> 44 <!-- 列表区域 -->
43 <div class="listArea"> 45 <div class="listArea">
44 <ul class="gglist"> 46 <div class="announcement_list">
45 <li> 47 <ul class="gglist">
46 <a href="./ggxq.html" target="_blank"> 48 <li>
47 <div class="gg"> 49 <a href="./ggxq.html" target="_blank">
48 <button type="button" class="layui-btn layui-btn-warm layui-btn-xs">公告</button> 50 <div class="gg">
49 党的十八大以来双拥工作综述:为实现中国梦强军梦凝聚强大力量 前三季度主要指标由负转正 51 <svg class="icon svg-icon" aria-hidden="true">
50 </div> 52 <use xlink:href="#icongonggao1"></use>
51 </a> 53 </svg>
52 </li> 54 <p class="item_list">
53 55 党的十八大以来双拥工作综述:为实现中国梦强军梦凝聚强大力量 前三季度主要指标由负转正
54 </ul> 56 </p>
55 <div id="test1"></div> 57 </div>
58 </a>
59 </li>
60 </ul>
61 <div id="test1"></div>
62 </div>
56 <div class="listArea_right"> 63 <div class="listArea_right">
57 <ul class="rightcontainer"> 64 <ul class="rightcontainer">
58 <h2 class="right-top">新闻推荐</h2> 65 <h2 class="right-top">新闻推荐</h2>
...@@ -75,26 +82,26 @@ ...@@ -75,26 +82,26 @@
75 <li> 82 <li>
76 <div class="zcfg"> 83 <div class="zcfg">
77 <div class="zcfg-top"> 84 <div class="zcfg-top">
78 <span>爬山虎国土空间规划信息化解决</span> 85 爬山虎国土空间规划信息化解决
79 </div> 86 </div>
80 <div class="zcfg-body"> 87 <div class="zcfg-body">
81 <span>10月21日,农业农村部举行新闻发布会,介绍2020年前三季度农业农村经济形势。</span> 88 10月21日,农业农村部举行新闻发布会,介绍2020年前三季度农业农村经济形势。
82 </div> 89 </div>
83 <div class="zcfg-bottom"> 90 <div class="zcfg-bottom">
84 <span>2020-10-28</span> 91 2020-10-28
85 </div> 92 </div>
86 </div> 93 </div>
87 </li> 94 </li>
88 <li> 95 <li>
89 <div class="zcfg"> 96 <div class="zcfg">
90 <div class="zcfg-top"> 97 <div class="zcfg-top">
91 <span>爬山虎国土空间规划信息化解决</span> 98 爬山虎国土空间规划信息化解决
92 </div> 99 </div>
93 <div class="zcfg-body"> 100 <div class="zcfg-body">
94 <span>10月21日,农业农村部举行新闻发布会,介绍2020年前三季度农业农村经济形势。</span> 101 10月21日,农业农村部举行新闻发布会,介绍2020年前三季度农业农村经济形势。
95 </div> 102 </div>
96 <div class="zcfg-bottom"> 103 <div class="zcfg-bottom">
97 <span>2020-10-28</span> 104 2020-10-28
98 </div> 105 </div>
99 </div> 106 </div>
100 </li> 107 </li>
......