1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         *{
  8             margin:0;
  9             padding: 0;
 10         }
 11 
 12         a{
 13             text-decoration: none;
 14         }
 15 
 16         body{
 17             font-family: "Times New Roman";
 18             font-size: 14px;
 19             font-weight: 700;
 20         }
 21 /*/------------------------*head part:*-------------------------------/*/
 22         .head-box{
 23             /*background-color: #2459a2;*/
 24             background-color: cornsilk;
 25             height: 56px;
 26             width: 100%;
 27             position: fixed;
 28             top: 0;
 29             left: 0;
 30         }
 31 
 32 
 33         .head-content{
 34             width: 1194px;
 35             height: 56px;
 36             line-height: 56px;
 37             /*background-color: blueviolet;*/
 38             background-color: cornsilk;
 39             margin: 0 auto;
 40         }
 41 
 42         .head-content .logo-con{
 43             background:url("images/logo.png");
 44             float: left;
 45             margin-top: 10px;
 46             display: inline-block;
 47             height: 36px;
 48             width: 36px;
 49 
 50         }
 51 
 52         .head-content .logo-text{
 53             background:url("images/logo1.png");
 54             margin-top: 17px;
 55             margin-left: 12px;
 56             width: 112px;
 57             height: 22px;
 58             position: relative;
 59             /*top: -7px;*/
 60             display: inline-block;
 61             float: left;
 62         }
 63 
 64         .action-menu{
 65             float: left;
 66             line-height: 18.4px;
 67         }
 68 
 69         .head-content .action-menu a.tb{
 70             display: inline-block;
 71             margin-left: 28px;
 72             padding: 17px 11px;
 73             border: solid 2px cornsilk;
 74             color:#4b4c4d
 75 
 76         }
 77 
 78         .head-content .action-menu a.active{
 79             border-bottom: solid 3px #f8aa00;
 80         }
 81         .head-content .action-menu a.tb:hover{
 82             color: #f8aa00;
 83 
 84         }
 85 
 86         .key-search{
 87             float: left;
 88         }
 89 
 90         .key-search{
 91             width: 208px;
 92             height: 36px;
 93             line-height: 36px;
 94             margin-top: 10px;
 95             margin-right: 35px;
 96             margin-left: 20px;
 97             background-color: lightpink;
 98             position: relative;
 99             border-radius: 2px;
100         }
101 
102         .key-search .search-txt{
103             margin-left: 10px;
104             background-color: lightpink;
105             border: none;
106             outline: 0;
107             font-size: 14px;
108         }
109 
110         .key-search .i .ico{
111             display: inline-block;
112             width: 18px;
113             height: 18px;
114             position: absolute;
115             cursor: pointer;
116             top: 8px;
117             right: 12px;
118             background-size: 100%;
119             background:url("images/search.png");
120             /*background-color: lightpink;*/
121         }
122 
123         .head-content .publish-btn{
124             margin-right: 35px;
125             margin-top: 13px;
126             padding: 8px;
127             display: inline-block;
128             height: 15px;
129             width: 15px;
130             background-color: #f8aa00;
131             text-align: center;
132             border: 1px solid #f8aa00;
133             border-radius: 2px;
134             float: left;
135             font-size: 14px;
136 
137         }
138         .head-content .publish-btn .publish-ico{
139             background:url("images/publish.png");
140             width: 14px;
141             height: 14px;
142             margin-right: -5px;
143             position: relative;
144             top: -16px;
145             display: inline-block;
146 
147             background-size: 15px 15px;
148         }
149 
150         .head-content .login-btn{
151             margin-top: 7px;
152             font-size: 14px;
153             padding: 5px 15px;
154             font-weight: 700;
155             float: right;
156             line-height: 30px;
157             text-align: center;
158             border: 1px solid #f8aa00;
159             border-radius: 2px;
160             color: #f8aa00;
161             background-color: cornsilk;
162             cursor: pointer;
163             width: 60px;
164             height: 30px;
165         }
166 /*/------------------------*head part ending:*-------------------------------/*/
167 
168 /*/------------------------*content part starting:*-------------------------------/*/
169     .main-content-box{
170         background-color: lightgray;
171         padding-top: 70px;
172     }
173 
174      .main-content{
175          background-color:lightpink ;
176          margin: 0 auto;
177          width: 1016px;
178          height: auto!important;
179          min-height: 700px;
180          overflow: hidden;
181      }
182      .main-content .content-L{
183          float: left;
184          width: 630px;
185          margin-top: 10px;
186      }
187 
188      .main-content .content-R{
189          float: right;
190      }
191 
192       .footer-box{
193           clear: both;
194       }
195 
196       .content-L .top-area{
197           border-bottom: 1px solid darkcyan;
198           height: 40px;
199       }
200 
201       .top-area .child-nav a{
202           display: inline-block;
203           width: 60px;
204           height: 26px;
205           line-height: 26px;
206           color: #390;
207           float: left;
208       }
209 
210        .top-area .child-nav .active{
211            font-weight: bolder;
212        }
213 
214       .sort-nav{
215           float: left;
216           margin-left: 120px;
217           margin-top: 10px;
218       }
219 
220       .sort-nav a{
221           display: inline-block;
222           text-align: center;
223           color: #390;
224           margin-left: 10px;
225       }
226 
227        .sort-nav .active{
228            color: #b4b4b4;
229        }
230 
231        .publish-btn{
232            display: inline-block;
233            width: 136px;
234            height: 32px;
235            background-color: #84a42b;
236            float: right;
237            color: white;
238            font-size: 16px;
239            text-align: center;
240            line-height: 32px;
241        }
242 
243         .content-list .item{
244 
245             padding-top: 10px;
246             border-bottom: 1px solid #b4b4b4;
247             line-height: 100px;
248         }
249 
250         .content-list .item .news-pic{
251             background: url("images/pic.jpg");
252             float: right;
253             display: inline-block;
254             width: 100px;
255             height: 100px;
256         }
257 
258         .content-list .item .part1{
259             line-height: 20px;
260         }
261         .content-list .item .part1:hover a.show-content{
262             text-decoration: underline;
263 
264         }
265 
266         .content-list .item .part2{
267             padding: 10px 0;
268             color: #99aecb;
269         }
270 
271         .part2 .hand-icon{
272             background: url("#") no-repeat 0 0;
273             display: inline-block;
274             width: 18px;
275             height: 18px;
276         }
277 
278         .part2 .icon-recommend{
279             background-position: 0px -40px;
280         }
281 
282         .part2 .recommend:hover .icon-recommend{
283             background-position: 0px -20px;
284         }
285 
286         .part2 .icon-discuss{
287             background-position: 0px -100px;
288         }
289 
290         .part2 .discuss:hover .icon-discuss{
291             background-position: 0px -80px;
292         }
293 
294         .part2 .icon-collect{
295             background-position: 0px -160px;
296         }
297 
298         .part2 .collect:hover .icon-collect{
299             background-position: 0px -140px;
300         }
301 
302         .part2 a{
303             margin-left: 8px;
304         }
305 
306         .part2 a b, .part2 span i{
307             vertical-align: 4px;
308             font-size: 14px;
309         }
310 
311         .share-site-to {
312             float: right;
313             display: none;
314         }
315 
316 /*##########################!*考虑优先级问题*!*/
317 
318 
319         .share-site-to .share-icon a{
320             display: inline-block;
321             /*width: 14px;*/
322             background:url("#") no-repeat 0 0;
323             opacity: .3;
324         }
325 
326         .share-icon a.icon-sina{
327             background-position: 0 -90px;
328             width: 17px;
329             height: 14px;
330         }
331 
332         .share-icon a.icon-douban{
333             background-position: 0 -105px;
334             width: 17px;
335             height: 14px;
336         }
337 
338         .share-icon a.icon-qqzone{
339             background-position: 0 -120px;
340             width: 17px;
341             height: 14px;
342         }
343 
344         .share-icon a.icon-renren{
345             background-position: 0 -151px;
346             width: 17px;
347             height: 14px;
348         }
349 
350         .share-icon a.icon-tenxun{
351             background-position: 0 -90px;
352             width: 17px;
353             height: 14px;
354         }
355 
356         .item:hover .share-site-to {
357             display: inline-block;
358         }
359 
360         .share-site-to .share-icon a:hover{
361             opacity: 1;
362         }
363 
364         .page-area ul li{
365             display: inline-block;
366         }
367 
368         .page-area ul li a{
369             display: inline-block;
370             width: 34px;
371             height: 34px;
372             line-height: 34px;
373             color: #369;
374             text-align: center;
375             border: 1px solid #e1e1e1;
376             border-radius: 15%;
377             margin-left: 5px;
378         }
379 
380         .page-area ul li a.page-next{
381             width: 90px;
382         }
383 
384         .page-area ul li a:hover{
385             background-color: #369;
386             color: white;
387         }
388 
389         .page-area{
390             margin-left: 50px;
391         }
392 
393 /*/------------------------*content part endig:*-------------------------------/*/
394 /*/------------------------*footer part starting:*-------------------------------/*/
395         .footer-box{
396             clear: both;
397             margin: 0 auto;
398             width: 960px;
399             background-color: #fff;
400             border-top: 1px solid #dce7f4;
401         }
402 
403         .footer-box .foot-nav{
404             padding-top: 15px;
405             text-align: center;
406             border-top: 1px solid #cedcef;
407         }
408 
409         .footer-box .foot-nav2{
410             padding-top: 15px;
411             text-align: center;
412             border-top: 1px solid #cedcef;
413         }
414     </style>
415 </head>
416 <body>
417 
418 
419 <div class="head-box">
420     <div class="head-content">
421         <a class="logo-con left" href="/">
422 <!--            <img class="logo-icon" url="/images/logo.png">-->
423 <!--            <img class="logo-txt" url="/images/logo1.png">-->
424         </a>
425         <a href="/" class="logo-text"></a>
426         <div class="action-menu">
427             <a href="#" class="tb active">All</a>
428             <a href="#" class="tb">42area</a>
429             <a href="#" class="tb">phase</a>
430             <a href="#" class="tb">picture</a>
431             <a href="#" class="tb">kick1024</a>
432             <a href="#" class="tb">YAIA</a>
433         </div>
434 
435          <div class="key-search">
436              <form action="/" method="post">
437                  <input type="text" class="search-txt" placeholder="search">
438                  <a href="#" class="i">
439                      <span class="ico"></span>
440                  </a>
441              </form>
442 
443          </div>
444 <!--     <div class="active-nav">-->
445 <!--         <a href="#" class="register-btn">register</a>-->
446 <!--         <a href="#" class="login-btn">login</a>-->
447 <!--     </div>-->
448          <a href="#" class="btn right publish-btn">
449              <span class="publish-ico"></span>
450          </a>
451         <a href="#" class="login-btn">login</a>
452     </div>
453 
454 </div>
455 
456 
457 <div class="main-content-box">
458     <div class="main-content">
459             <div class="content-L">
460                 <div class="top-area">
461                     <div class="child-nav">
462                         <a href="#" class="hotbtn active">最热</a>
463                         <a href="#" class="newbtn">最新</a>
464                         <a href="#" class="personbtn">人类发布</a>
465 
466                     </div>
467                     <div class="sort-nav">
468                         <a href="#" class="sortbtn active">即时排序</a>
469                         <a href="#" class="newbtn">24h</a>
470                         <a href="#" class="personbtn">3day</a>
471                     </div>
472                     <a href="#" class="publish-btn">
473                         <span class="n2">+ &nbsp;&nbsp;发布</span>
474                     </a>
475                 </div>
476 
477                 <div class="content-list">
478                     <div class="item">
479                         <a class="news-pic">
480 <!--                            <img src="images/pic.jpg" alt="抽屉新热榜">-->
481                         </a>
482                         <div class="news-content">
483                             <div class="part1">
484                                 <a href="#" class="show-content" data-title="【在线考试、黄牛抢位：疫情中的国际课程高中生】国际课程高中生大多数没有国内高中的学籍，因此也无法参加会考及高考，一旦选择了去国际课程机构，就意味着必须在留学的道路上走到底。" data-pic="https://img3.chouti.com/CHOUTI_20200622/2E75A9F4F03C44378CA9288E30E2036E_W238H238.jpeg" data-id="29696675" data-url="/share/link?link_id=29696675" data-section-id="1224" data-subject-id="1">
485                                 【在线考试、黄牛抢位：疫情中的国际课程高中生】国际课程高中生大多数没有国内高中的学籍，因此也无法参加会考及高考，一旦选择了去国际课程机构，就意味着必须在留学的道路上走到底。
486                                 </a>
487                             </div>
488                             <div class="part2">
489                                 <a href="#" class="recommend" title="推荐">
490                                     <span class="hand-icon icon-recommend"></span>
491                                     <b>4</b>
492                                 </a>
493 
494                                 <a href="#" class="discuss">
495                                     <span class="hand-icon icon-discuss"></span>
496                                     <b>5</b>
497                                 </a>
498 
499                                  <a href="#" class="collect" title="加入私藏">
500                                     <span class="hand-icon icon-collect"></span>
501                                     <b>私藏</b>
502                                 </a>
503 
504                                   <a href="#" class="user-a" >
505                                     <span>
506                                         <img src="images/13.png">
507                                     </span>
508                                     <b>乱太郎</b>
509                                 </a>
510 
511                                 <span class="left time-into">
512                                     <a href="#" class="time-a" target="_blank">
513                                         <b>4分钟前</b>
514                                     </a>
515                                     <i>入热榜</i>
516                                 </span>
517 
518                                 <span class="share-site-to">
519                                     <i>分享到</i>
520                                     <span class="share-icon">
521                                         <a href="#" class="icon-sina" title="分享到新浪微博"></a>
522                                         <a href="#" class="icon-douban" title="分享到豆瓣"></a>
523                                         <a href="#" class="icon-qqzone" title="分享到qq空间"></a>
524                                         <a href="#" class="icon-tenxun" title="分享到腾讯微博"></a>
525                                         <a href="#" class="icon-renren" title="分享到人人网"></a>
526                                     </span>
527                                 </span>
528                             </div>
529                         </div>
530                     </div>
531                     <div class="item">
532                         <a class="news-pic">
533 <!--                            <img src="images/pic.jpg" alt="抽屉新热榜">-->
534                         </a>
535                         <div class="news-content">
536                             <div class="part1">
537                                 <a href="#" class="show-content" data-title="【在线考试、黄牛抢位：疫情中的国际课程高中生】国际课程高中生大多数没有国内高中的学籍，因此也无法参加会考及高考，一旦选择了去国际课程机构，就意味着必须在留学的道路上走到底。" data-pic="https://img3.chouti.com/CHOUTI_20200622/2E75A9F4F03C44378CA9288E30E2036E_W238H238.jpeg" data-id="29696675" data-url="/share/link?link_id=29696675" data-section-id="1224" data-subject-id="1">
538                                 【在线考试、黄牛抢位：疫情中的国际课程高中生】国际课程高中生大多数没有国内高中的学籍，因此也无法参加会考及高考，一旦选择了去国际课程机构，就意味着必须在留学的道路上走到底。
539                                 </a>
540                             </div>
541                             <div class="part2">
542                                 <a href="#" class="recommend" title="推荐">
543                                     <span class="hand-icon icon-recommend"></span>
544                                     <b>4</b>
545                                 </a>
546 
547                                 <a href="#" class="discuss">
548                                     <span class="hand-icon icon-discuss"></span>
549                                     <b>5</b>
550                                 </a>
551 
552                                  <a href="#" class="collect" title="加入私藏">
553                                     <span class="hand-icon icon-collect"></span>
554                                     <b>私藏</b>
555                                 </a>
556 
557                                   <a href="#" class="user-a" >
558                                     <span>
559                                         <img src="images/13.png">
560                                     </span>
561                                     <b>乱太郎</b>
562                                 </a>
563 
564                                 <span class="left time-into">
565                                     <a href="#" class="time-a" target="_blank">
566                                         <b>4分钟前</b>
567                                     </a>
568                                     <i>入热榜</i>
569                                 </span>
570 
571                                 <span class="share-site-to">
572                                     <i>分享到</i>
573                                     <span class="share-icon">
574                                         <a href="#" class="icon-sina" title="分享到新浪微博"></a>
575                                         <a href="#" class="icon-douban" title="分享到豆瓣"></a>
576                                         <a href="#" class="icon-qqzone" title="分享到qq空间"></a>
577                                         <a href="#" class="icon-tenxun" title="分享到腾讯微博"></a>
578                                         <a href="#" class="icon-renren" title="分享到人人网"></a>
579                                     </span>
580                                 </span>
581                             </div>
582                         </div>
583                     </div>
584                     <div class="item">
585                         <a class="news-pic">
586 <!--                            <img src="images/pic.jpg" alt="抽屉新热榜">-->
587                         </a>
588                         <div class="news-content">
589                             <div class="part1">
590                                 <a href="#" class="show-content" data-title="【在线考试、黄牛抢位：疫情中的国际课程高中生】国际课程高中生大多数没有国内高中的学籍，因此也无法参加会考及高考，一旦选择了去国际课程机构，就意味着必须在留学的道路上走到底。" data-pic="https://img3.chouti.com/CHOUTI_20200622/2E75A9F4F03C44378CA9288E30E2036E_W238H238.jpeg" data-id="29696675" data-url="/share/link?link_id=29696675" data-section-id="1224" data-subject-id="1">
591                                 【在线考试、黄牛抢位：疫情中的国际课程高中生】国际课程高中生大多数没有国内高中的学籍，因此也无法参加会考及高考，一旦选择了去国际课程机构，就意味着必须在留学的道路上走到底。
592                                 </a>
593                             </div>
594                             <div class="part2">
595                                 <a href="#" class="recommend" title="推荐">
596                                     <span class="hand-icon icon-recommend"></span>
597                                     <b>4</b>
598                                 </a>
599 
600                                 <a href="#" class="discuss">
601                                     <span class="hand-icon icon-discuss"></span>
602                                     <b>5</b>
603                                 </a>
604 
605                                  <a href="#" class="collect" title="加入私藏">
606                                     <span class="hand-icon icon-collect"></span>
607                                     <b>私藏</b>
608                                 </a>
609 
610                                   <a href="#" class="user-a" >
611                                     <span>
612                                         <img src="images/13.png">
613                                     </span>
614                                     <b>乱太郎</b>
615                                 </a>
616 
617                                 <span class="left time-into">
618                                     <a href="#" class="time-a" target="_blank">
619                                         <b>4分钟前</b>
620                                     </a>
621                                     <i>入热榜</i>
622                                 </span>
623 
624                                 <span class="share-site-to">
625                                     <i>分享到</i>
626                                     <span class="share-icon">
627                                         <a href="#" class="icon-sina" title="分享到新浪微博"></a>
628                                         <a href="#" class="icon-douban" title="分享到豆瓣"></a>
629                                         <a href="#" class="icon-qqzone" title="分享到qq空间"></a>
630                                         <a href="#" class="icon-tenxun" title="分享到腾讯微博"></a>
631                                         <a href="#" class="icon-renren" title="分享到人人网"></a>
632                                     </span>
633                                 </span>
634                             </div>
635                         </div>
636                     </div>
637                 </div>
638 
639                 <div class="page-area">
640                     <ul>
641                         <li><span class="current_page">1</span></li>
642                         <li><a href="#" class="page-a">2</a></li>
643                         <li><a href="#" class="page-a">3</a></li>
644                         <li><a href="#" class="page-a">4</a></li>
645                         <li><a href="#" class="page-a">5</a></li>
646                         <li><a href="#" class="page-a">6</a></li>
647                         <li><a href="#" class="page-a">7</a></li>
648                         <li><a href="#" class="page-a">8</a></li>
649                         <li><a href="#" class="page-a">9</a></li>
650                         <li><a href="#" class="page-a page-next">下一页</a></li>
651                     </ul>
652                 </div>
653             </div>
654             <div class="content-R"></div>
655             <div class="footer-box">
656                 <span class="foot-nav">
657                     <a href="#">关于我们</a>
658                     <a href="#">联系我们</a>
659                 </span>
660             </div>
661     </div>
662 
663 </div>
664 </body>
665 </html>
View Code