标签：主办方 半透明 看电影 交互设计 logo 科幻 b2b 青春 联网
㈠豆瓣首页HTML代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>项目实战-豆瓣首页</title>
6 <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico">
7 <link rel="stylesheet" href="dbindex.css ">
8 </head>
9 <body>
10 <!--头部区域-->
11 <header class="header">
12 <div class="container clearfix">
13 <div class="logo left">
14 <h1>
15 <a href="">
16 <span>豆瓣</span>
17 </a>
18 </h1>
19 </div>
20 <div class="search left">
21 <form>
22 <input type="text" class="txt" placeholder="书籍、电影、音乐、小组、成员">
23 <button>
24 <i class="iconfont iconsousuo" ></i><!--字体图标-->
25 </button>
26 </form>
27 </div>
28 <div class="menu right clearfix">
29 <a href="" class="menu-read"></a>
30 <a href="" class="menu-movie"></a>
31 <a href="" class="menu-music"></a>
32 <a href="" class="menu-group"></a>
33 <a href="" class="menu-city"></a>
34 <a href="" class="menu-fm"></a>
35 <a href="" class="menu-time"></a>
36 <a href="" class="menu-doupin"></a>
37 </div>
38 </div>
39 </header>
40
41 <!--横幅区域-->
42 <div class="banner">
43 <div class="container clearfix">
44 <iframe class="right loginarea" src="loginframe.html" frameborder="0"></iframe>
45 <div class="slogan right">
46 <h1 class="title" >
47 豆瓣
48 <span>6.0</span>
49 </h1>
50 <div class="download">
51 <button class="btn" >下载豆瓣 App</button>
52 <div class="qrcode" >
53 <img src="img/icon-qr-smell.png " alt="">
54 <div class="qrcode-img hidden">
55 <img src="img/qrlogin_code.png" alt="">
56 <p>
57 iOS / Android 扫码直接下载
58 </p>
59 </div>
60 </div>
61 </div>
62 </div>
63 </div>
64 </div>
65
66 <!--主区域样式-->
67 <div>
68 <!--热点-->
69 <div class="section">
70 <div class="container clearfix">
71 <!--右边栏-->
72 <div class="aside-right">
73 <!--广告-->
74 <div class="adv">
75 <a href="">
76 <img src="img/adv1.jpg" alt="广告图片">
77 </a>
78 </div>
79 <!--标题-->
80 <div class="section-title">
81 <h2 class="title">热门话题</h2>
82 <span class="link">
83 <a href="">去话题广场</a>
84 </span>
85 </div>
86 <!--列表-->
87 <ul class="hot-list">
88 <li>
89 <div class="title">
90 <a href="">新型肺炎预防指南</a>
91 </div>
92 <div class="description">
93 <span>5425.8万次浏览</span>
94 </div>
95 </li>
96
97 <li>
98 <div class="title">
99 <a href="" class="adv-tag">你和伴侣玩过的“分手游戏”</a>
100 </div>
101 <div class="description">
102 <span>6.0万次浏览</span>
103 </div>
104 </li>
105
106 <li>
107 <div class="title">
108 <a href="">和新冠肺炎疫情有关的记忆</a>
109 </div>
110 <div class="description">
111 <span>1735.9万次浏览</span>
112 </div>
113 </li>
114
115 <li>
116 <div class="title">
117 <a href="">宅家消费实录</a>
118 </div>
119 <div class="description">
120 <span>新话题</span>
121 <span>1.3万次浏览</span>
122 </div>
123 </li>
124
125 <li>
126 <div class="title">
127 <a href="">疫情对你的行业或工作有什么影响</a>
128 </div>
129 <div class="description">
130 <span>286.7万次浏览</span>
131 </div>
132 </li>
133
134 <li>
135 <div class="title">
136 <a href="">新冠肺炎期间，你们小区办出入证了吗？</a>
137 </div>
138 <div class="description">
139 <span>38.2万次浏览</span>
140 </div>
141 </li>
142 </ul>
143 </div>
144
145 <!--主区域-->
146 <div class="main">
147 <!--标题-->
148 <div class="section-title">
149 <h2 class="title">热点内容</h2>
150 <span class="link">
151 <a href="">更多</a>
152 </span>
153 </div>
154 <!--热点主区域-->
155 <div class="hot-main clearfix">
156 <!--左侧内容-->
157 <div class="left">
158 <ul class="item-list">
159 <li>
160 <div class="img">
161 <a href="">
162 <img src="img/color1.webp" alt="">
163 </a>
164 </div>
165 <div class="word">
166 <a href="">大部分是自己的作业相册</a>
167 <span>20张照片</span>
168 </div>
169 </li>
170
171 <li>
172 <div class="img">
173 <a href="">
174 <img src="img/color2.webp" alt="">
175 </a>
176 </div>
177 <div class="word">
178 <a href="">新涂鸦</a>
179 <span>59张照片</span>
180 </div>
181 </li>
182
183 <li>
184 <div class="img">
185 <a href="">
186 <img src="img/color3.webp" alt="">
187 </a>
188 </div>
189 <div class="word">
190 <a href="">废墟|废弃剧院</a>
191 <span>39张照片</span>
192 </div>
193 </li>
194
195 <li>
196 <div class="img">
197 <a href="">
198 <img src="img/color4.webp" alt="">
199 </a>
200 </div>
201 <div class="word">
202 <a href="">废墟 | 迷失宫殿</a>
203 <span>55张照片</span>
204 </div>
205 </li>
206 </ul>
207 </div>
208 <!--右侧内容-->
209 <div class="right">
210 <ul>
211 <li>
212 <a href="">住在厕所里的“沪漂族”</a>
213 <div class="title">越村的日记</div>
214 <div class="description">
215 本文原载于【X博士】 “法租界”，上海的中心城区，最富小资情调的打卡圣地，路边...
216 </div>
217 </li>
218
219 <li>
220 <a href="">
221 桜台コートビレジ(Sakuradai Court Village)/ 内井昭藏_山地集合住宅的炒鸡佳作
222 </a>
223 </li>
224 <li>
225 <a href="">
226 我爸的心是一座巨大的修车厂
227 </a>
228 </li>
229 <li>
230 <a href="">
231 为什么中国的电影都是有字幕的，而几乎世界各地都是没有的？
232 </a>
233 </li>
234 <li>
235 <a href="">
236 去婆婆家过年，一场无法逃避的乡村修行
237 </a>
238 </li>
239 <li>
240 <a href="">上海物候记录24-岑卜村：你见过上海的霜花吗？
241 </a>
242 </li>
243 <li>
244 <a href="">
245 30岁了｜一晃而过的前三分之一人生
246 </a>
247 </li>
248 <li>
249 <a href="">记录：陪奶奶读旧书(●‘?‘●)
250 </a>
251 </li>
252 <li>
253 <a href="">
254 混乱又鲜活：年末十八线城市的小商品批发市场
255 </a>
256 </li>
257 <li>
258 <a href="">
259 记忆中的象牙塔
260 </a>
261 </li>
262 </ul>
263 </div>
264 </div>
265 </div>
266 </div>
267 </div>
268
269 <!--豆瓣时间-->
270 <div class="section">
271 <div class="container clearfix">
272 <!--左边栏-->
273 <div class="aside-left">
274 <h2 class="title">
275 <a href="" class="dark-color">豆瓣时间</a>
276 </h2>
277 </div>
278 <!--主区域-->
279 <div class="main">
280 <!--标题-->
281 <div class="section-title">
282 <h2 class="title">热门专门</h2>
283 <span class="link">
284 <a href="">更多</a>
285 </span>
286 </div>
287 <!--主要内容-->
288 <div class="time-main">
289 <ul class="item-list">
290 <li>
291 <div class="img">
292 <a href="">
293 <img src="img/mainner1.jpg" alt="">
294 </a>
295 </div>
296 <div class="words">
297 <a href="">电影产业破壁课——13小时重塑电影世界观</a>
298 <span>视频专栏</span>
299 </div>
300 </li>
301 <li>
302 <div class="img">
303 <a href="">
304 <img src="img/mainner2.jpg" alt="">
305 </a>
306 </div>
307 <div class="words">
308 <a href="">不准无聊！精品大师课免费放送</a>
309 <span>音频专栏</span>
310 </div>
311 </li>
312 <li>
313 <div class="img">
314 <a href="">
315 <img src="img/mainner3.jpg" alt="">
316 </a>
317 </div>
318 <div class="words">
319 <a href="">懂得这些再去穿越——古代天文学里的星空密码</a>
320 <span>音频专栏</span>
321 </div>
322 </li>
323 <li>
324 <div class="img">
325 <a href="">
326 <img src="img/mainner4.jpg" alt="">
327 </a>
328 </div>
329 <div class="words">
330 <a href="">收获一生之书——马家辉解读影响人生的24部文学经典</a>
331 <span>音频专栏</span>
332 </div>
333 </li>
334 <li>
335 <div class="img">
336 <a href="">
337 <img src="img/mainner5.jpg" alt="">
338 </a>
339 </div>
340 <div class="words">
341 <a href="">我同世界交流的方式——顶级纪录片导演创作分享课</a>
342 <span>音频专栏</span>
343 </div>
344 </li>
345 <li>
346 <div class="img">
347 <a href="">
348 <img src="img/mainner6.jpg" alt="">
349 </a>
350 </div>
351 <div class="words">
352 <a href="">掌控人生剧本——12堂改变命运的思维课</a>
353 <span>音频专栏</span>
354 </div>
355 </li>
356 <li>
357 <div class="img">
358 <a href="">
359 <img src="img/mainner7.jpg" alt="">
360 </a>
361 </div>
362 <div class="words">
363 <a href="">如何读懂美——赤木明登工艺课堂</a>
364 <span>视频专栏</span>
365 </div>
366 </li>
367 <li>
368 <div class="img">
369 <a href="">
370 <img src="img/mainner8.jpg" alt="">
371 </a>
372 </div>
373 <div class="words">
374 <a href="">李安解读立体电影</a>
375 <span>视频专栏</span>
376 </div>
377 </li>
378 <li>
379 <div class="img">
380 <a href="">
381 <img src="img/mainner1.jpg" alt="">
382 </a>
383 </div>
384 <div class="words">
385 <a href="">杨超教你用导演思维看电影——十大专题破解电影密码</a>
386 <span>视频专栏</span>
387 </div>
388 </li>
389 <li>
390 <div class="img">
391 <a href="">
392 <img src="img/mainner10.jpg" alt="">
393 </a>
394 </div>
395 <div class="words">
396 <a href="">好听的声音会跳舞——季冠霖的声音形象课</a>
397 <span>音频专栏</span>
398 </div>
399 </li>
400 </ul>
401 </div>
402 </div>
403 </div>
404 </div>
405
406 <!--视频-->
407 <div class="section">
408 <div class="container clearfix">
409 <!--左区域-->
410 <div class="aside-left">
411 <div class="title">
412 <h2>
413 <a href="" class="dark-color">视频</a>
414 </h2>
415 </div>
416 </div>
417
418 <!--主区域-->
419 <div class="main video-main">
420 <div class="section-title" >
421 <a href="">
422 <h2 class="title">瓣嘴</h2>
423 </a>
424 </div>
425
426 <ul class="item-list">
427 <li>
428 <a href="">
429 <div class="img iconfont iconbofang">
430 <img src="img/clear1.webp " alt="">
431 </div>
432 </a>
433 <div class="words">
434 <a href="">在美好的景区进行飞奔快跑</a>
435 </div>
436 </li>
437
438 <li>
439 <a href="">
440 <div class="img iconfont iconbofang">
441 <img src="img/clear1.webp " alt="">
442 </div>
443 </a>
444 <div class="words">
445 <a href="">在美好的景区进行飞奔快跑</a>
446 </div>
447 </li>
448
449 <li>
450 <a href="">
451 <div class="img iconfont iconbofang">
452 <img src="img/clear1.webp " alt="">
453 </div>
454 </a>
455 <div class="words">
456 <a href="">在美好的景区进行飞奔快跑</a>
457 </div>
458 </li>
459 </ul>
460
461 <div class="section-title" >
462 <a href="">
463 <h2 class="title">观影会客厅</h2>
464 </a>
465 </div>
466
467 <ul class="item-list">
468 <li>
469 <a href="">
470 <div class="img iconfont iconbofang">
471 <img src="img/clear1.webp " alt="">
472 </div>
473 </a>
474 <div class="words">
475 <a href="">在美好的景区进行飞奔快跑</a>
476 </div>
477 </li>
478
479 <li>
480 <a href="">
481 <div class="img iconfont iconbofang">
482 <img src="img/clear1.webp " alt="">
483 </div>
484 </a>
485 <div class="words">
486 <a href="">在美好的景区进行飞奔快跑</a>
487 </div>
488 </li>
489
490 <li>
491 <a href="">
492 <div class="img iconfont iconbofang">
493 <img src="img/clear1.webp " alt="">
494 </div>
495 </a>
496 <div class="words">
497 <a href="">在美好的景区进行飞奔快跑</a>
498 </div>
499 </li>
500 </ul>
501 </div>
502 </div>
503 </div>
504
505 <!--电影-->
506 <div class="section">
507 <div class="container clearfix movie-area">
508 <!--左边栏-->
509 <div class="aside-left">
510 <!--标题-->
511 <div class="title">
512 <h2>
513 <a href="">电影</a>
514 </h2>
515 </div>
516 <!--左边菜单-->
517 <nav class="left-menu">
518 <ul>
519 <li><a href="">影讯&购票</a></li>
520 <li><a href="" class="new">选电影</a></li>
521 <li><a href="">电视剧</a></li>
522 <li><a href="">排行榜</a></li>
523 <li><a href="">分类</a></li>
524 <li><a href="">影评</a></li>
525 <li><a href="">预告片</a></li>
526 <li><a href="">问答</a></li>
527 </ul>
528 </nav>
529 </div>
530
531 <!--右边栏-->
532 <div class="aside-right">
533 <div class="section-title">
534 <h2 class="title">影片分类</h2>
535 <span class="link">
536 <a href="">更多</a>
537 </span>
538 </div>
539
540 <ul class="right-menu-list clearfix">
541 <li><a href="">爱情</a></li>
542 <li><a href="">剧情</a></li>
543 <li><a href="">喜剧</a></li>
544 <li><a href="">动画</a></li>
545 <li><a href="">科幻</a></li>
546 <li><a href="">经典</a></li>
547 <li><a href="">动作</a></li>
548 <li><a href="">悬疑</a></li>
549 <li><a href="">犯罪</a></li>
550 <li><a href="">青春</a></li>
551 <li><a href="">搞笑</a></li>
552 <li><a href="">文艺</a></li>
553 <li><a href="">惊悚</a></li>
554 <li><a href="">励志</a></li>
555 <li><a href="">纪录片</a></li>
556 <li><a href="">幽默</a></li>
557 <li><a href="">战争</a></li>
558 <li><a href="">恐怖</a></li>
559 <li><a href="">美国</a></li>
560 <li><a href="">日本</a></li>
561 </ul>
562
563 <div class="section-title">
564 <h2 class="title">近期热门</h2>
565 <span class="link">
566 <a href="">更多</a>
567 </span>
568 </div>
569
570 <ul class="order-movie-list">
571 <li><a href="">1917</a></li>
572 <li><a href="">寄生虫</a></li>
573 <li><a href="">小妇人</a></li>
574 <li><a href="">囧妈</a></li>
575 <li><a href="">乔乔的异想世界</a></li>
576 <li><a href="">小丑</a></li>
577 <li><a href="">阳光普照</a></li>
578 <li><a href="">半个喜剧</a></li>
579 <li><a href="">爱尔兰人</a></li>
580 <li><a href="">婚姻故事</a></li>
581 </ul>
582 </div>
583
584 <!--主区域-->
585 <div class="main">
586 <div class="section-title">
587 <h2 class="title">正在热映</h2>
588 <span class="link">
589 <a href="">更多</a>
590 </span>
591 </div>
592
593 <div>
594 <ul class="item-list">
595 <li>
596 <!--图片-->
597 <div class="img">
598 <a href="">
599 <img src="img/movie1.webp" alt="">
600 </a>
601 </div>
602 <!--文字-->
603 <div class="words">
604 <a href="">叶问4：完结篇 葉問4 (2019)</a>
605 </div>
606 <!--评分-->
607 <div class="star">
608 <span class="star-bg star35"></span>
609 <span class="number">7.1</span>
610 </div>
611 <!--选座-->
612 <div class="func">
613 <a href="" class="block-link">选座购票</a>
614 </div>
615 </li>
616
617 <li>
618 <div class="img">
619 <a href="">
620 <img src="img/movie2.webp" alt="">
621 </a>
622 </div>
623
624 <div class="words">
625 <a href="">我在时间尽头等你 (2020)</a>
626 </div>
627
628 <div class="star">
629 <span class="star-bg star30"></span>
630 <span class="number">6.9</span>
631 </div>
632
633 <div class="func">
634 <a href="" class="block-link">选座购票</a>
635 </div>
636 </li>
637
638 <li>
639 <div class="img">
640 <a href="">
641 <img src="img/movie3.webp" alt="">
642 </a>
643 </div>
644
645 <div class="words">
646 <a href="">对联神童解大绅 (2020)</a>
647 </div>
648
649 <div class="star">
650 <span class="star-bg star40"></span>
651 <span class="number">7.6</span>
652 </div>
653
654 <div class="func">
655 <a href="" class="block-link">选座购票</a>
656 </div>
657 </li>
658
659 <li>
660 <!--图片-->
661 <div class="img">
662 <a href="">
663 <img src="img/movie1.webp" alt="">
664 </a>
665 </div>
666 <!--文字-->
667 <div class="words">
668 <a href="">叶问4：完结篇 葉問4 (2019)</a>
669 </div>
670 <!--评分-->
671 <div class="star">
672 <span class="star-bg star35"></span>
673 <span class="number">7.1</span>
674 </div>
675 <!--选座-->
676 <div class="func">
677 <a href="" class="block-link">选座购票</a>
678 </div>
679 </li>
680
681 <li>
682 <div class="img">
683 <a href="">
684 <img src="img/movie2.webp" alt="">
685 </a>
686 </div>
687
688 <div class="words">
689 <a href="">我在时间尽头等你 (2020)</a>
690 </div>
691
692 <div class="star">
693 <span class="star-bg star30"></span>
694 <span class="number">6.9</span>
695 </div>
696
697 <div class="func">
698 <a href="" class="block-link">选座购票</a>
699 </div>
700 </li>
701
702 <li>
703 <div class="img">
704 <a href="">
705 <img src="img/movie3.webp" alt="">
706 </a>
707 </div>
708
709 <div class="words">
710 <a href="">对联神童解大绅 (2020)</a>
711 </div>
712
713 <div class="star">
714 <span class="star-bg star40"></span>
715 <span class="number">7.6</span>
716 </div>
717
718 <div class="func">
719 <a href="" class="block-link">选座购票</a>
720 </div>
721 </li>
722
723 <li>
724 <!--图片-->
725 <div class="img">
726 <a href="">
727 <img src="img/movie1.webp" alt="">
728 </a>
729 </div>
730 <!--文字-->
731 <div class="words">
732 <a href="">叶问4：完结篇 葉問4 (2019)</a>
733 </div>
734 <!--评分-->
735 <div class="star">
736 <span class="star-bg star35"></span>
737 <span class="number">7.1</span>
738 </div>
739 <!--选座-->
740 <div class="func">
741 <a href="" class="block-link">选座购票</a>
742 </div>
743 </li>
744
745 <li>
746 <div class="img">
747 <a href="">
748 <img src="img/movie2.webp" alt="">
749 </a>
750 </div>
751
752 <div class="words">
753 <a href="">我在时间尽头等你 (2020)</a>
754 </div>
755
756 <div class="star">
757 <span class="star-bg star30"></span>
758 <span class="number">6.9</span>
759 </div>
760
761 <div class="func">
762 <a href="" class="block-link">选座购票</a>
763 </div>
764 </li>
765 </ul>
766 </div>
767 </div>
768 </div>
769 </div>
770
771 <!--小组-->
772 <div class="section">
773 <div class="container group-area clearfix">
774 <!--左边栏-->
775 <div class="aside-left">
776 <!--标题-->
777 <div class="title">
778 <h2>
779 <a href="">小组</a>
780 </h2>
781 </div>
782 <!--左边菜单-->
783 <nav class="left-menu">
784 <ul>
785 <li><a href="">精选</a></li>
786 <li><a href="">文化</a></li>
787 <li><a href="">行摄</a></li>
788 <li><a href="">娱乐</a></li>
789 <li><a href="">时尚</a></li>
790 <li><a href="">生活</a></li>
791 <li><a href="">科技</a></li>
792 </ul>
793 </nav>
794 </div>
795
796 <!--右边栏-->
797 <div class="aside-right">
798 <!--标题-->
799 <div class="section-title">
800 <h2 class="title">小组分类</h2>
801 </div>
802
803 <!--兴趣-->
804 <div class="group">
805 <div class="group-name">
806 <a href="">兴趣</a>
807 </div>
808 <!--兴趣内容-->
809 <ul class="right-menu-list clearfix">
810 <li><a href="">旅行</a></li>
811 <li><a href="">摄影</a></li>
812 <li><a href="">影视</a></li>
813 <li><a href="">音乐</a></li>
814 <li><a href="">文学</a></li>
815 <li><a href="">游戏</a></li>
816 <li><a href="">动漫</a></li>
817 <li><a href="">运动</a></li>
818 <li><a href="">戏曲</a></li>
819 <li><a href="">桌游</a></li>
820 <li><a href="">怪癖</a></li>
821 </ul>
822 </div>
823 <!--生活-->
824 <div class="group">
825 <div class="group-name">
826 <a href="">生活</a>
827 </div>
828 <!--生活内容-->
829 <ul class="right-menu-list clearfix">
830 <li><a href="">健康</a></li>
831 <li><a href="">美食</a></li>
832 <li><a href="">宠物</a></li>
833 <li><a href="">美容</a></li>
834 <li><a href="">化妆</a></li>
835 <li><a href="">护肤</a></li>
836 <li><a href="">服饰</a></li>
837 <li><a href="">公益</a></li>
838 <li><a href="">家庭</a></li>
839 <li><a href="">育儿</a></li>
840 <li><a href="">汽车</a></li>
841 </ul>
842 </div>
843 <!--购物-->
844 <div class="group">
845 <div class="group-name">
846 <a href="">购物</a>
847 </div>
848 <!--购物内容-->
849 <ul class="right-menu-list clearfix">
850 <li><a href="">淘宝</a></li>
851 <li><a href="">二手</a></li>
852 <li><a href="">团购</a></li>
853 <li><a href="">数码</a></li>
854 <li><a href="">品牌</a></li>
855 <li><a href="">文具</a></li>
856 </ul>
857 </div>
858 <!--社会-->
859 <div class="group">
860 <div class="group-name">
861 <a href="">社会</a>
862 </div>
863 <!--社会内容-->
864 <ul class="right-menu-list clearfix">
865 <li><a href="">求职</a></li>
866 <li><a href="">租房</a></li>
867 <li><a href="">励志</a></li>
868 <li><a href="">留学</a></li>
869 <li><a href="">出国</a></li>
870 <li><a href="">理财</a></li>
871 <li><a href="">传媒</a></li>
872 <li><a href="">创业</a></li>
873 <li><a href="">考试</a></li>
874 </ul>
875 </div>
876 <!--艺术-->
877 <div class="group">
878 <div class="group-name">
879 <a href="">艺术</a>
880 </div>
881 <!--艺术内容-->
882 <ul class="right-menu-list clearfix">
883 <li><a href="">设计</a></li>
884 <li><a href="">手工</a></li>
885 <li><a href="">展览</a></li>
886 <li><a href="">曲艺</a></li>
887 <li><a href="">舞蹈</a></li>
888 <li><a href="">雕塑</a></li>
889 <li><a href="">纹身</a></li>
890 </ul>
891 </div>
892 <!--学术-->
893 <div class="group">
894 <div class="group-name">
895 <a href="">学术</a>
896 </div>
897 <!--学术内容-->
898 <ul class="right-menu-list clearfix">
899 <li><a href="">人文</a></li>
900 <li><a href="">社科</a></li>
901 <li><a href="">自然</a></li>
902 <li><a href="">建筑</a></li>
903 <li><a href="">国学</a></li>
904 <li><a href="">语言</a></li>
905 <li><a href="">宗教</a></li>
906 <li><a href="">哲学</a></li>
907 <li><a href="">软件</a></li>
908 <li><a href="">硬件</a></li>
909 <li><a href="">互联网</a></li>
910 </ul>
911 </div>
912 <!--情感-->
913 <div class="group">
914 <div class="group-name">
915 <a href="">情感</a>
916 </div>
917 <!--情感内容-->
918 <ul class="right-menu-list clearfix">
919 <li><a href="">恋爱</a></li>
920 <li><a href="">心情</a></li>
921 <li><a href="">心理学</a></li>
922 <li><a href="">星座</a></li>
923 <li><a href="">塔罗</a></li>
924 <li><a href="">LES</a></li>
925 <li><a href="">GAY</a></li>
926 </ul>
927 </div>
928 <!--闲聊-->
929 <div class="group">
930 <div class="group-name">
931 <a href="">闲聊</a>
932 </div>
933 <!--闲聊内容-->
934 <ul class="right-menu-list clearfix">
935 <li><a href="">吐槽</a></li>
936 <li><a href="">笑话</a></li>
937 <li><a href="">直播</a></li>
938 <li><a href="">八卦</a></li>
939 <li><a href="">发泄</a></li>
940 </ul>
941 </div>
942 </div>
943
944 <!--主区域-->
945 <div class="main">
946 <!--标题-->
947 <div class="section-title">
948 <h2 class="title">热门小组</h2>
949 <span class="link">
950 <a href="">更多</a>
951 </span>
952 </div>
953 <!--主要的内容-->
954 <ul class="item-list " >
955 <li>
956 <div class="img">
957 <a href="">
958 <img src="img/xiaozu1.webp" alt="">
959 </a>
960 </div>
961
962 <div class="words">
963 <a href="">我爱三毛</a>
964 <span>47832 个成员</span>
965 </div>
966 </li>
967
968 <li>
969 <div class="img">
970 <a href="">
971 <img src="img/xiaozu2.webp" alt="">
972 </a>
973 </div>
974
975 <div class="words">
976 <a href="">沙发客</a>
977 <span>23622 个成员</span>
978 </div>
979 </li>
980
981 <li>
982 <div class="img">
983 <a href="">
984 <img src="img/xiaozu3.webp" alt="">
985 </a>
986 </div>
987
988 <div class="words">
989 <a href="">刘慈欣</a>
990 <span>30227 个成员</span>
991 </div>
992 </li>
993
994 <li>
995 <div class="img">
996 <a href="">
997 <img src="img/xiaozu4.webp" alt="">
998 </a>
999 </div>
1000
1001 <div class="words">
1002 <a href="">西双版纳</a>
1003 <span>11540 个成员</span>
1004 </div>
1005 </li>
1006
1007 <li>
1008 <div class="img">
1009 <a href="">
1010 <img src="img/xiaozu5.webp" alt="">
1011 </a>
1012 </div>
1013
1014 <div class="words">
1015 <a href="">记事本圆梦小组</a>
1016 <span>116854 个成员</span>
1017 </div>
1018 </li>
1019
1020 <li>
1021 <div class="img">
1022 <a href="">
1023 <img src="img/xiaozu6.jpg" alt="">
1024 </a>
1025 </div>
1026
1027 <div class="words">
1028 <a href="">搭讪学</a>
1029 <span>94182 个成员</span>
1030 </div>
1031 </li>
1032
1033 <li>
1034 <div class="img">
1035 <a href="">
1036 <img src="img/xiaozu7.webp" alt="">
1037 </a>
1038 </div>
1039
1040 <div class="words">
1041 <a href="">这辈子一定要做几件疯狂的事</a>
1042 <span>92934 个成员</span>
1043 </div>
1044 </li>
1045
1046 <li>
1047 <div class="img">
1048 <a href="">
1049 <img src="img/xiaozu8.jpg" alt="">
1050 </a>
1051 </div>
1052
1053 <div class="words">
1054 <a href="">自己给自己剪头发</a>
1055 <span>35173 个成员</span>
1056 </div>
1057 </li>
1058
1059 <li>
1060 <div class="img">
1061 <a href="">
1062 <img src="img/xiaozu9.jpg" alt="">
1063 </a>
1064 </div>
1065
1066 <div class="words">
1067 <a href="">我们就是要做衣服给自己穿</a>
1068 <span>3727 个成员</span>
1069 </div>
1070 </li>
1071 </ul>
1072 </div>
1073 </div>
1074 </div>
1075
1076 <!--读书-->
1077 <div class="section">
1078 <div class="container clearfix book-area">
1079 <!--左边栏-->
1080 <div class="aside-left">
1081 <!--标题-->
1082 <div class="title">
1083 <h2>
1084 <a href="">读书</a>
1085 </h2>
1086 </div>
1087 <!--左边菜单-->
1088 <nav class="left-menu">
1089 <ul>
1090 <li><a href="" >分类浏览</a></li>
1091 <li><a href="" class="new dark-color">阅读</a></li>
1092 <li><a href="" >作者</a></li>
1093 <li><a href="" >书评</a></li>
1094 <li><a href="" >购书单</a></li>
1095 </ul>
1096 </nav>
1097
1098 <div class="menu-adv">
1099 <a href="">
1100 <span class="app-icon-1"></span>
1101 </a>
1102 <a href="">豆瓣阅读</a>
1103 </div>
1104 </div>
1105
1106 <!--右边栏-->
1107 <div class="aside-right" >
1108 <!--标题-->
1109 <div class="section-title">
1110 <h2 class="title">热门标签</h2>
1111 <span class="link">
1112 <a href="">更多</a>
1113 </span>
1114 </div>
1115
1116 <!--文学-->
1117 <div class="group">
1118 <ul class="right-menu-list clearfix">
1119 <li><span>[文学]</span></li>
1120 <li><a href="">小说</a></li>
1121 <li><a href="">随笔</a></li>
1122 <li><a href="">日本文学</a></li>
1123 <li><a href="">散文</a></li>
1124 <li><a href="">诗歌</a></li>
1125 <li><a href="">童话</a></li>
1126 <li><a href="">名著</a></li>
1127 <li><a href="">港台</a></li>
1128 <li><a href="">更多</a></li>
1129 </ul>
1130 </div>
1131
1132 <!--流行-->
1133 <div class="group">
1134 <ul class="right-menu-list clearfix">
1135 <li><span>[流行]</span></li>
1136 <li><a href="">漫画</a></li>
1137 <li><a href="">推理</a></li>
1138 <li><a href="">绘本</a></li>
1139 <li><a href="">青春</a></li>
1140 <li><a href="">科幻</a></li>
1141 <li><a href="">言情</a></li>
1142 <li><a href="">奇幻</a></li>
1143 <li><a href="">武侠</a></li>
1144 <li><a href="">更多</a></li>
1145 </ul>
1146 </div>
1147
1148 <!--文化-->
1149 <div class="group">
1150 <ul class="right-menu-list clearfix">
1151 <li><span>[文化]</span></li>
1152 <li><a href="">历史</a></li>
1153 <li><a href="">哲学</a></li>
1154 <li><a href="">传记</a></li>
1155 <li><a href="">设计</a></li>
1156 <li><a href="">建筑</a></li>
1157 <li><a href="">电影</a></li>
1158 <li><a href="">回忆录</a></li>
1159 <li><a href="">音乐</a></li>
1160 <li><a href="">更多</a></li>
1161 </ul>
1162 </div>
1163
1164 <!--生活-->
1165 <div class="group">
1166 <ul class="right-menu-list clearfix">
1167 <li><span>[生活]</span></li>
1168 <li><a href="">旅行</a></li>
1169 <li><a href="">励志</a></li>
1170 <li><a href="">教育</a></li>
1171 <li><a href="">职场</a></li>
1172 <li><a href="">美食</a></li>
1173 <li><a href="">灵修</a></li>
1174 <li><a href="">健康</a></li>
1175 <li><a href="">家居</a></li>
1176 <li><a href="">更多</a></li>
1177 </ul>
1178 </div>
1179
1180 <!--经管-->
1181 <div class="group">
1182 <ul class="right-menu-list clearfix">
1183 <li><span>[经管]</span></li>
1184 <li><a href="">经济学</a></li>
1185 <li><a href="">管理</a></li>
1186 <li><a href="">商业</a></li>
1187 <li><a href="">金融</a></li>
1188 <li><a href="">营销</a></li>
1189 <li><a href="">理财</a></li>
1190 <li><a href="">股票</a></li>
1191 <li><a href="">企业史</a></li>
1192 <li><a href="">更多</a></li>
1193 </ul>
1194 </div>
1195
1196 <!--科技-->
1197 <div class="group">
1198 <ul class="right-menu-list clearfix">
1199 <li><span>[科技]</span></li>
1200 <li><a href="">科普</a></li>
1201 <li><a href="">互联网</a></li>
1202 <li><a href="">编程</a></li>
1203 <li><a href="">交互设计</a></li>
1204 <li><a href="">算法</a></li>
1205 <li><a href="">通信</a></li>
1206 <li><a href="">神经网络</a></li>
1207 <li><a href="">更多</a></li>
1208 </ul>
1209 </div>
1210 </div>
1211
1212 <!--主区域-->
1213 <div class="main">
1214 <!--标题-->
1215 <div class="section-title">
1216 <h2 class="title">新书速递</h2>
1217 <span class="link">
1218 <a href="">更多</a>
1219 </span>
1220 </div>
1221
1222 <!--内容区-->
1223 <ul class="item-list">
1224 <li>
1225 <div class="img">
1226 <a href="">
1227 <img src="img/read1.jpg" alt="">
1228 </a>
1229 </div>
1230
1231 <div class="words">
1232 <a href="">
1233 仁慈的关系
1234 </a>
1235 <span>
1236 [匈牙利]拉斯洛
1237 </span>
1238 </div>
1239
1240 <div class="func">
1241 <a href="" class="block-link">
1242 免费试读
1243 </a>
1244 </div>
1245 </li>
1246
1247 <li>
1248 <div class="img">
1249 <a href="">
1250 <img src="img/read1.jpg" alt="">
1251 </a>
1252 </div>
1253
1254 <div class="words">
1255 <a href="">
1256 仁慈的关系
1257 </a>
1258 <span>
1259 [匈牙利]拉斯洛
1260 </span>
1261 </div>
1262
1263 <div class="func">
1264 <a href="" class="block-link">
1265 免费试读
1266 </a>
1267 </div>
1268 </li>
1269
1270 <li>
1271 <div class="img">
1272 <a href="">
1273 <img src="img/read1.jpg" alt="">
1274 </a>
1275 </div>
1276
1277 <div class="words">
1278 <a href="">
1279 仁慈的关系
1280 </a>
1281 <span>
1282 [匈牙利]拉斯洛
1283 </span>
1284 </div>
1285
1286 <div class="func">
1287 <a href="" class="block-link">
1288 免费试读
1289 </a>
1290 </div>
1291 </li>
1292
1293 <li>
1294 <div class="img">
1295 <a href="">
1296 <img src="img/read1.jpg" alt="">
1297 </a>
1298 </div>
1299
1300 <div class="words">
1301 <a href="">
1302 仁慈的关系
1303 </a>
1304 <span>
1305 [匈牙利]拉斯洛
1306 </span>
1307 </div>
1308
1309 <div class="func">
1310 <a href="" class="block-link">
1311 免费试读
1312 </a>
1313 </div>
1314 </li>
1315 </ul>
1316
1317 <!--标题-->
1318 <div class="section-title">
1319 <h2 class="title">原创数字作品</h2>
1320 <span class="link">
1321 <a href="">更多</a>
1322 </span>
1323 </div>
1324
1325 <ul class="item-list">
1326 <li>
1327 <div class="img">
1328 <a href="">
1329 <img src="img/read1.jpg" alt="">
1330 </a>
1331 </div>
1332
1333 <div class="words">
1334 <a href="">
1335 仁慈的关系
1336 </a>
1337 <span>
1338 [匈牙利]拉斯洛
1339 </span>
1340 </div>
1341
1342 <div class="func">
1343 <a href="" class="block-link">
1344 免费试读
1345 </a>
1346 </div>
1347 </li>
1348
1349 <li>
1350 <div class="img">
1351 <a href="">
1352 <img src="img/read1.jpg" alt="">
1353 </a>
1354 </div>
1355
1356 <div class="words">
1357 <a href="">
1358 仁慈的关系
1359 </a>
1360 <span>
1361 [匈牙利]拉斯洛
1362 </span>
1363 </div>
1364
1365 <div class="func">
1366 <a href="" class="block-link">
1367 免费试读
1368 </a>
1369 </div>
1370 </li>
1371
1372 <li>
1373 <div class="img">
1374 <a href="">
1375 <img src="img/read1.jpg" alt="">
1376 </a>
1377 </div>
1378
1379 <div class="words">
1380 <a href="">
1381 仁慈的关系
1382 </a>
1383 <span>
1384 [匈牙利]拉斯洛
1385 </span>
1386 </div>
1387
1388 <div class="func">
1389 <a href="" class="block-link">
1390 免费试读
1391 </a>
1392 </div>
1393 </li>
1394
1395 <li>
1396 <div class="img">
1397 <a href="">
1398 <img src="img/read1.jpg" alt="">
1399 </a>
1400 </div>
1401
1402 <div class="words">
1403 <a href="">
1404 仁慈的关系
1405 </a>
1406 <span>
1407 [匈牙利]拉斯洛
1408 </span>
1409 </div>
1410
1411 <div class="func">
1412 <a href="" class="block-link">
1413 免费试读
1414 </a>
1415 </div>
1416 </li>
1417 </ul>
1418 </div>
1419 </div>
1420 </div>
1421
1422 <!--音乐-->
1423 <div class="section">
1424 <div class="container clearfix music-area">
1425 <!--左边栏-->
1426 <div class="aside-left">
1427 <div class="aside-left">
1428 <!--标题-->
1429 <div class="title">
1430 <h2>
1431 <a href="">音乐</a>
1432 </h2>
1433 </div>
1434 <!--左边菜单-->
1435 <nav class="left-menu">
1436 <ul>
1437 <li><a href="" >音乐人</a></li>
1438 <li><a href="" >潮潮豆瓣音乐周</a></li>
1439 <li><a href="" >金羊毛计划</a></li>
1440 <li><a href="" >专题</a></li>
1441 <li><a href="" >排行榜</a></li>
1442 <li><a href="" >分类浏览</a></li>
1443 <li><a href="" >乐评</a></li>
1444 <li><a href="" >豆瓣FM</a></li>
1445 <li><a href="" >歌单</a></li>
1446 <li><a href="" >阿比鹿音乐榜</a></li>
1447 </ul>
1448 </nav>
1449
1450 <div class="menu-adv">
1451 <a href="">
1452 <span class="app-icon-2"></span>
1453 </a>
1454 <a href="">豆瓣FM</a>
1455 </div>
1456
1457 <div class="menu-adv">
1458 <a href="">
1459 <span class="app-icon-3"></span>
1460 </a>
1461 <a href="">豆瓣音乐人</a>
1462 </div>
1463 </div>
1464 </div>
1465
1466 <!--右边栏-->
1467 <div class="aside-right">
1468 <!--标题-->
1469 <div class="section-title">
1470 <h2 class="title">本周流行音乐人</h2>
1471 <span class="link">
1472 <a href="">更多</a>
1473 </span>
1474 </div>
1475
1476 <ul class="music-player-list">
1477 <li class="clearfix">
1478 <span class="number left">1.</span>
1479 <div class="player right">
1480 <a href="">
1481 <div class="img left iconbofang iconfont">
1482 <img src="img/player1.jpg" alt="">
1483 </div>
1484 </a>
1485 <div class="words left">
1486 <a href="">大猴仔</a>
1487 <span>流派: 流行 Pop</span>
1488 <span>76人关注</span>
1489 </div>
1490 </div>
1491 </li>
1492
1493 <li class="clearfix">
1494 <span class="number left">2.</span>
1495 <div class="player right">
1496 <a href="">
1497 <div class="img left iconbofang iconfont">
1498 <img src="img/player2.jpg" alt="">
1499 </div>
1500 </a>
1501 <div class="words left">
1502 <a href="">跳格子</a>
1503 <span>流派: 民谣 Folk</span>
1504 <span>1810人关注</span>
1505 </div>
1506 </div>
1507 </li>
1508
1509 <li class="clearfix">
1510 <span class="number left">3.</span>
1511 <div class="player right">
1512 <a href="">
1513 <div class="img left iconbofang iconfont">
1514 <img src="img/player3.jpg" alt="">
1515 </div>
1516 </a>
1517 <div class="words left">
1518 <a href="">施文</a>
1519 <span>流派: 流行 Pop</span>
1520 <span>103人关注</span>
1521 </div>
1522 </div>
1523 </li>
1524
1525 <li class="clearfix">
1526 <span class="number left">4.</span>
1527 <div class="player right">
1528 <a href="">
1529 <div class="img left iconbofang iconfont">
1530 <img src="img/player4.jpg" alt="">
1531 </div>
1532 </a>
1533 <div class="words left">
1534 <a href="">三七</a>
1535 <span>流派: 民谣 Folk</span>
1536 <span>199人关注</span>
1537 </div>
1538 </div>
1539 </li>
1540
1541 <li class="clearfix">
1542 <span class="number left">5.</span>
1543 <div class="player right">
1544 <a href="">
1545 <div class="img left iconbofang iconfont">
1546 <img src="img/player5.jpg" alt="">
1547 </div>
1548 </a>
1549 <div class="words left">
1550 <a href="">S.A.D.</a>
1551 <span>流派: 电子 Electronica</span>
1552 <span>413人关注</span>
1553 </div>
1554 </div>
1555 </li>
1556 </ul>
1557 </div>
1558
1559 <!--主区域-->
1560 <div class="main">
1561 <div class="section-title">
1562 <h2 class="title">豆瓣新碟榜</h2>
1563 <span class="link">
1564 <a href="">更多</a>
1565 </span>
1566 </div>
1567
1568 <ul class="item-list">
1569 <li>
1570 <div class="img">
1571 <a href="">
1572 <img src="img/music1.jpg " alt="">
1573 </a>
1574 </div>
1575
1576 <div class="words">
1577 1.<a href=""> The Slow Rush</a>
1578 </div>
1579
1580 <div class="words">
1581 <a href="">Tame Impala</a>
1582 </div>
1583
1584 <!--评分-->
1585 <div class="star">
1586 <span class="star-bg star35"></span>
1587 <span class="number">7.1</span>
1588 </div>
1589 </li>
1590 <li>
1591 <div class="img">
1592 <a href="">
1593 <img src="img/music1.jpg " alt="">
1594 </a>
1595 </div>
1596
1597 <div class="words">
1598 1.<a href=""> The Slow Rush</a>
1599 </div>
1600
1601 <div class="words">
1602 <a href="">Tame Impala</a>
1603 </div>
1604
1605 <!--评分-->
1606 <div class="star">
1607 <span class="star-bg star35"></span>
1608 <span class="number">7.1</span>
1609 </div>
1610 </li>
1611 <li>
1612 <div class="img">
1613 <a href="">
1614 <img src="img/music1.jpg " alt="">
1615 </a>
1616 </div>
1617
1618 <div class="words">
1619 1.<a href=""> The Slow Rush</a>
1620 </div>
1621
1622 <div class="words">
1623 <a href="">Tame Impala</a>
1624 </div>
1625
1626 <!--评分-->
1627 <div class="star">
1628 <span class="star-bg star35"></span>
1629 <span class="number">7.1</span>
1630 </div>
1631 </li>
1632 <li>
1633 <div class="img">
1634 <a href="">
1635 <img src="img/music1.jpg " alt="">
1636 </a>
1637 </div>
1638
1639 <div class="words">
1640 1.<a href=""> The Slow Rush</a>
1641 </div>
1642
1643 <div class="words">
1644 <a href="">Tame Impala</a>
1645 </div>
1646
1647 <!--评分-->
1648 <div class="star">
1649 <span class="star-bg star35"></span>
1650 <span class="number">7.1</span>
1651 </div>
1652 </li>
1653 <li>
1654 <div class="img">
1655 <a href="">
1656 <img src="img/music1.jpg " alt="">
1657 </a>
1658 </div>
1659
1660 <div class="words">
1661 1.<a href=""> The Slow Rush</a>
1662 </div>
1663
1664 <div class="words">
1665 <a href="">Tame Impala</a>
1666 </div>
1667
1668 <!--评分-->
1669 <div class="star">
1670 <span class="star-bg star35"></span>
1671 <span class="number">7.1</span>
1672 </div>
1673 </li>
1674 <li>
1675 <div class="img">
1676 <a href="">
1677 <img src="img/music1.jpg " alt="">
1678 </a>
1679 </div>
1680
1681 <div class="words">
1682 1.<a href=""> The Slow Rush</a>
1683 </div>
1684
1685 <div class="words">
1686 <a href="">Tame Impala</a>
1687 </div>
1688
1689 <!--评分-->
1690 <div class="star">
1691 <span class="star-bg star35"></span>
1692 <span class="number">7.1</span>
1693 </div>
1694 </li>
1695 <li>
1696 <div class="img">
1697 <a href="">
1698 <img src="img/music1.jpg " alt="">
1699 </a>
1700 </div>
1701
1702 <div class="words">
1703 1.<a href=""> The Slow Rush</a>
1704 </div>
1705
1706 <div class="words">
1707 <a href="">Tame Impala</a>
1708 </div>
1709
1710 <!--评分-->
1711 <div class="star">
1712 <span class="star-bg star35"></span>
1713 <span class="number">7.1</span>
1714 </div>
1715 </li>
1716 <li>
1717 <div class="img">
1718 <a href="">
1719 <img src="img/music1.jpg " alt="">
1720 </a>
1721 </div>
1722
1723 <div class="words">
1724 1.<a href=""> The Slow Rush</a>
1725 </div>
1726
1727 <div class="words">
1728 <a href="">Tame Impala</a>
1729 </div>
1730
1731 <!--评分-->
1732 <div class="star">
1733 <span class="star-bg star35"></span>
1734 <span class="number">7.1</span>
1735 </div>
1736 </li>
1737 </ul>
1738
1739 <div class="section-title">
1740 <h2 class="title">热门歌单</h2>
1741 <span class="link">
1742 <a href="">更多</a>
1743 </span>
1744 </div>
1745
1746 <ul class="item-list hot-music">
1747 <li>
1748 <a href="">
1749 <div class="img iconfont iconbofang">
1750 <img src="img/music2.jpg " alt="">
1751 </div>
1752 </a>
1753
1754 <div class="words">
1755 狗蛋成长屎
1756 </div>
1757 </li>
1758 <li>
1759 <a href="">
1760 <div class="img iconfont iconbofang">
1761 <img src="img/music2.jpg " alt="">
1762 </div>
1763 </a>
1764
1765 <div class="words">
1766 狗蛋成长屎
1767 </div>
1768 </li>
1769 <li>
1770 <a href="">
1771 <div class="img iconfont iconbofang">
1772 <img src="img/music2.jpg " alt="">
1773 </div>
1774 </a>
1775
1776 <div class="words">
1777 狗蛋成长屎
1778 </div>
1779 </li>
1780 <li>
1781 <a href="">
1782 <div class="img iconfont iconbofang">
1783 <img src="img/music2.jpg " alt="">
1784 </div>
1785 </a>
1786
1787 <div class="words">
1788 狗蛋成长屎
1789 </div>
1790 </li>
1791 <li>
1792 <a href="">
1793 <div class="img iconfont iconbofang">
1794 <img src="img/music2.jpg " alt="">
1795 </div>
1796 </a>
1797
1798 <div class="words">
1799 狗蛋成长屎
1800 </div>
1801 </li>
1802 <li>
1803 <a href="">
1804 <div class="img iconfont iconbofang">
1805 <img src="img/music2.jpg " alt="">
1806 </div>
1807 </a>
1808
1809 <div class="words">
1810 狗蛋成长屎
1811 </div>
1812 </li>
1813 <li>
1814 <a href="">
1815 <div class="img iconfont iconbofang">
1816 <img src="img/music2.jpg " alt="">
1817 </div>
1818 </a>
1819
1820 <div class="words">
1821 狗蛋成长屎
1822 </div>
1823 </li>
1824 <li>
1825 <a href="">
1826 <div class="img iconfont iconbofang">
1827 <img src="img/music2.jpg " alt="">
1828 </div>
1829 </a>
1830
1831 <div class="words">
1832 狗蛋成长屎
1833 </div>
1834 </li>
1835 </ul>
1836 </div>
1837 </div>
1838 </div>
1839
1840 <!--豆品-->
1841 <div class="section">
1842 <div class="container clearfix doupin-area">
1843 <!--左边栏-->
1844 <div class="aside-left">
1845 <!--标题-->
1846 <div class="title">
1847 <h2>
1848 <a href="">豆品</a>
1849 </h2>
1850 </div>
1851 </div>
1852
1853 <!--右边栏-->
1854 <div class="aside-right">
1855 <!--标题-->
1856 <div class="section-title">
1857 <h2 class="title">热卖活动</h2>
1858 </div>
1859
1860 <!--广告-->
1861 <div class="adv">
1862 <a href="">
1863 <img src="img/adv2.jpg" alt="广告图片">
1864 </a>
1865 </div>
1866
1867 <div>
1868 <a href="">我的豆瓣收藏夹里有什么</a>
1869 </div>
1870
1871 <!--标题-->
1872 <div class="section-title">
1873 <h2 class="title">官方小组</h2>
1874 <span class="link">
1875 <a href="">更多</a>
1876 </span>
1877 </div>
1878 </div>
1879
1880 <!--主区域-->
1881 <div class="main">
1882 <div class="section-title">
1883 <h2 class="title">热卖商品</h2>
1884 <span class="link">
1885 <a href="">更多</a>
1886 </span>
1887 </div>
1888
1889 <ul class="item-list">
1890 <li>
1891 <div class="img">
1892 <a href="">
1893 <img src="img/doupin1.jpg " alt="">
1894 </a>
1895 </div>
1896
1897 <div class="words clearfix">
1898 <a href="" class="left">豆瓣冻顶乌龙茶</a>
1899 <span class="right">￥59</span>
1900 </div>
1901 </li>
1902 <li>
1903 <div class="img">
1904 <a href="">
1905 <img src="img/doupin2.jpg " alt="">
1906 </a>
1907 </div>
1908
1909 <div class="words clearfix">
1910 <a href="" class="left">豆瓣软面笔记本</a>
1911 <span class="right">￥39</span>
1912 </div>
1913 </li>
1914 <li>
1915 <div class="img">
1916 <a href="">
1917 <img src="img/doupin3.jpg " alt="">
1918 </a>
1919 </div>
1920
1921 <div class="words clearfix">
1922 <a href="" class="left">豆瓣收藏夹</a>
1923 <span class="right">￥99</span>
1924 </div>
1925 </li>
1926 <li>
1927 <div class="img">
1928 <a href="">
1929 <img src="img/doupin3.jpg " alt="">
1930 </a>
1931 </div>
1932
1933 <div class="words clearfix">
1934 <a href="" class="left">豆瓣经典帆布包</a>
1935 <span class="right">￥149</span>
1936 </div>
1937 </li>
1938 </ul>
1939 </div>
1940 </div>
1941 </div>
1942
1943 <!--同城-->
1944 <div class="section">
1945 <div class="container clearfix city-area">
1946 <!--左边栏-->
1947 <div class="aside-left">
1948 <!--标题-->
1949 <div class="title">
1950 <h2>
1951 <a href="">同城</a>
1952 </h2>
1953 </div>
1954
1955 <!--左边菜单-->
1956 <nav class="left-menu">
1957 <ul>
1958 <li><a href="" >近期活动</a></li>
1959 <li><a href="" >主办方</a></li>
1960 <li><a href="" >舞台剧</a></li>
1961 </ul>
1962 </nav>
1963 </div>
1964
1965 <!--右边栏-->
1966 <div class="aside-right">
1967 <!--标题-->
1968 <div class="section-title">
1969 <h2 class="title">活动标签</h2>
1970 </div>
1971
1972 <!--音乐-->
1973 <div class="group">
1974 <div class="group-name">
1975 <a href="">音乐</a>
1976 </div>
1977 <!--音乐内容-->
1978 <ul class="right-menu-list clearfix">
1979 <li><a href="">小型现场</a></li>
1980 <li><a href="">音乐会</a></li>
1981 <li><a href="">演唱会</a></li>
1982 <li><a href="">音乐节</a></li>
1983 </ul>
1984 </div>
1985 <!--戏剧-->
1986 <div class="group">
1987 <div class="group-name">
1988 <a href="">戏剧</a>
1989 </div>
1990 <!--戏剧内容-->
1991 <ul class="right-menu-list clearfix">
1992 <li><a href="">话剧</a></li>
1993 <li><a href="">音乐剧</a></li>
1994 <li><a href="">舞剧</a></li>
1995 <li><a href="">歌剧</a></li>
1996 <li><a href="">戏曲</a></li>
1997 <li><a href="">其他</a></li>
1998 </ul>
1999 </div>
2000 <!--聚会-->
2001 <div class="group">
2002 <div class="group-name">
2003 <a href="">聚会</a>
2004 </div>
2005 <!--聚会内容-->
2006 <ul class="right-menu-list clearfix">
2007 <li><a href="">生活</a></li>
2008 <li><a href="">集市</a></li>
2009 <li><a href="">摄影</a></li>
2010 <li><a href="">外语</a></li>
2011 <li><a href="">桌游</a></li>
2012 <li><a href="">夜店</a></li>
2013 <li><a href="">交友</a></li>
2014 <li><a href="">美食</a></li>
2015 <li><a href="">派对</a></li>
2016 </ul>
2017 </div>
2018 <!--电影-->
2019 <div class="group">
2020 <div class="group-name">
2021 <a href="">电影</a>
2022 </div>
2023 <!--电影内容-->
2024 <ul class="right-menu-list clearfix">
2025 <li><a href="">主题放映</a></li>
2026 <li><a href="">影展</a></li>
2027 <li><a href="">影院活动</a></li>
2028 </ul>
2029 </div>
2030 <!--其他-->
2031 <div class="group">
2032 <div class="group-name">
2033 <a href="">其他</a>
2034 </div>
2035 <!--其他内容-->
2036 <ul class="right-menu-list clearfix">
2037 <li><a href="">讲座</a></li>
2038 <li><a href="">展览</a></li>
2039 <li><a href="">运动</a></li>
2040 <li><a href="">旅行</a></li>
2041 <li><a href="">公益</a></li>
2042 </ul>
2043 </div>
2044 </div>
2045
2046 <!--主区域-->
2047 <div class="main">
2048 <div class="section-title">
2049 <h2 class="title">重庆 · 本周热门活动</h2>
2050 <span class="link">
2051 <a href="">更多</a>
2052 </span>
2053 </div>
2054
2055 <ul class="item-list">
2056 <li class="clearfix">
2057 <div class="img left">
2058 <a href="">
2059 <img src="img/city.jpg " alt="">
2060 </a>
2061 </div>
2062
2063 <div class="words">
2064 <a href="">Christopher Nissen巡演</a>
2065 <span>3月14日 周六 19:30 - 21:00</span>
2066 <span>寅派动力</span>
2067 <span>4人关注</span>
2068 </div>
2069 </li>
2070 <li class="clearfix">
2071 <div class="img left">
2072 <a href="">
2073 <img src="img/city.jpg " alt="">
2074 </a>
2075 </div>
2076
2077 <div class="words">
2078 <a href="">Christopher Nissen巡演</a>
2079 <span>3月14日 周六 19:30 - 21:00</span>
2080 <span>寅派动力</span>
2081 <span>4人关注</span>
2082 </div>
2083 </li>
2084 <li class="clearfix">
2085 <div class="img left">
2086 <a href="">
2087 <img src="img/city.jpg " alt="">
2088 </a>
2089 </div>
2090
2091 <div class="words">
2092 <a href="">Christopher Nissen巡演</a>
2093 <span>3月14日 周六 19:30 - 21:00</span>
2094 <span>寅派动力</span>
2095 <span>4人关注</span>
2096 </div>
2097 </li>
2098 <li class="clearfix">
2099 <div class="img left">
2100 <a href="">
2101 <img src="img/city.jpg " alt="">
2102 </a>
2103 </div>
2104
2105 <div class="words">
2106 <a href="">Christopher Nissen巡演</a>
2107 <span>3月14日 周六 19:30 - 21:00</span>
2108 <span>寅派动力</span>
2109 <span>4人关注</span>
2110 </div>
2111 </li>
2112 </ul>
2113 </div>
2114
2115 </div>
2116 </div>
2117 </div>
2118
2119 <!--页脚区域-->
2120 <footer class="footer">
2121 <div class="container clearfix">
2122 <!--左区域-->
2123 <div class="left">
2124 <p>© 2005－2020 douban.com, all rights reserved 北京豆网科技有限公司</p>
2125 <p><a href="">京ICP证090015号</a> 京ICP备11027288号 网络视听许可证<a href="">0110418</a>号</p>
2126 <p>京网文[2015]2026-368号<img src="img/biaoshi.gif" alt=""><a href="">京公网安备11010502000728</a>新出网证(京)字129号</p>
2127 <p>违法和不良信息举报电话：4008353331-9</p>
2128 <p><img src="img/jubao.png" alt=""><a href="">中国互联网举报中心</a>电话：12377<a href="">新出发京批字第直160029号</a></p>
2129 </div>
2130
2131 <!--右区域-->
2132 <div class="right">
2133 <nav class="menu">
2134 <a href="">关于豆瓣</a>
2135 ·
2136 <a href="">在豆瓣工作</a>
2137 ·
2138 <a href="">联系我们</a>
2139 ·
2140 <a href="">法律声明</a>
2141 ·
2142 <a href="">帮助中心</a>
2143 ·
2144 <a href="">移动应用</a>
2145 ·
2146 <a href="">豆瓣广告</a>
2147 </nav>
2148
2149 <div class="adv">
2150 <a href="">
2151 <img src="img/adv3.jpg " alt="">
2152 </a>
2153 </div>
2154 </div>
2155 </div>
2156 </footer>
2157
2158 </body>
2159 </html>
㈡豆瓣首页CSS代码
1 @import "reset.css";
2 @import "common.css ";
3
4 /*统一样式*/
5 body{
6 line-height: 2;
7 }
8
9 button{
10 cursor: pointer ;
11 }
12
13 a{
14 color: #37a;
15 text-decoration: none;
16 }
17
18 a:hover{
19 color: #fff;
20 background: #37a;
21 }
22
23 a:active{
24 color: #fff;
25 background: #f93;
26 }
27
28 ul{
29 word-break: break-all;
30 }
31 /*统一样式结束*/
32
33 /*首页通用样式开始*/
34 .container{
35 width: 950px;
36 margin: 0 auto;
37 }
38
39 .section{
40 padding: 35px 0;
41 }
42
43 .section:nth-child(even){
44 background: #f7f7f7;
45 }
46
47 /*页面左边栏样式*/
48 .aside-left{
49 float: left;
50 width: 100px;
51 margin-right: 20px;
52 }
53
54 /*页面右边栏样式*/
55 .aside-right{
56 float: right;
57 width: 265px;
58 margin-right: 30px;
59 }
60
61 /*页面主区域样式*/
62 .main{
63 /*创建BFC*/
64 overflow: hidden;
65 }
66
67 /*广告样式*/
68 .adv img{
69 /*高度撑满*/
70 width: 100%;
71 /*消除白边*/
72 display: block;
73 }
74
75 .section-title{
76 margin: 12px 0;
77 }
78
79 .section-title .title{
80 display: inline;
81 color:#072;
82 font-size: 15px;
83 }
84
85 .section-title .title::after{
86 content: "· · · · · ·";
87 }
88
89 .section-title .link{
90 font-size: 12px;
91 }
92
93 .section-title .link::before{
94 content: "(";
95 }
96
97 .section-title .link::after{
98 content: ")";
99 }
100
101 .adv-tag::after{
102 content: "广告";
103 color: #c9c9c9;
104 font-size: 13px;
105 }
106
107 .aside-left .title{
108 font-size: 24px;
109 color:#000;
110 }
111
112 .dark-color{
113 color: #494949;
114 }
115
116 .item-list li{
117 display: inline-block;
118 vertical-align: top;
119 line-height: 1.5;
120 }
121
122 .item-list li .img img{
123 width: 100%;
124 display: block;
125 }
126
127 .left-menu{
128 font-size: 14px;
129 }
130
131 .left-menu a.new{
132 position: relative;
133 }
134
135 .left-menu a.new::after{
136 content: "";
137 background: url(img/new_menu.gif) no-repeat;
138 width: 17px;
139 height: 7px;
140 position: absolute;
141 right: -20px;
142 top: 0;
143 }
144
145 .right-menu-list{
146 font-size: 12px;
147 }
148
149 .right-menu-list li{
150 float: left;
151 }
152
153 .block-link{
154 padding:2px 10px;
155 font-size: 12px;
156 border-radius: 3px;
157 display: inline-block;
158 }
159
160 .menu-adv{
161 margin-top: 20px;
162 font-size: 12px;
163 }
164
165 .app-icon-1{
166 width: 50px;
167 height: 50px;
168 display: block;
169 background: url(img/app-icon.jpg) no-repeat;
170 box-shadow:1px 1px 2px #999;
171 border-radius: 10px;
172 }
173
174 .app-icon-2{
175 width: 50px;
176 height: 50px;
177 display: block;
178 background: url(img/app-icon.jpg) no-repeat;
179 box-shadow:1px 1px 2px #999;
180 border-radius: 10px;
181 background-position:-250px 0;
182 }
183
184 .app-icon-3{
185 width: 50px;
186 height: 50px;
187 display: block;
188 background: url(img/app-icon.jpg) no-repeat;
189 box-shadow:1px 1px 2px #999;
190 border-radius: 10px;
191 background-position:-50px 0;
192 }
193
194 .group .group-name a{
195 color:#333;
196 }
197
198 .group .group-name a::after {
199 content: "»";
200 }
201
202 .group .right-menu-list li{
203 margin-right: 10px;
204 }
205 /*首页通用样式结束*/
206
207 /*页头开始*/
208 .header{
209 height: 90px;
210 margin-top:30px;
211 box-sizing:border-box;
212 }
213
214 .header .logo a{
215 width: 154px;
216 height: 30px;
217 display:block;
218 background: url("img/logo_db.png") no-repeat left top/100%;
219 }
220
221 .header .logo a span{
222 display:none;
223 }
224
225 .header .search{
226 width: 270px;
227 height: 30px;
228 border:1px solid #c3c3c3;
229 margin-left: 20px;
230 /*设置相对定位*/
231 position: relative;
232 line-height: normal;
233 }
234
235 .header .search .txt{
236 width: 240px;
237 height: 20px;
238 padding: 5px;
239 font-size: 13px;
240 }
241
242 .header .search .txt::placeholder{
243 color:#ccc;
244 }
245
246 .header .search button {
247 /*设置绝对定位*/
248 position: absolute;
249 width: 30px;
250 height: 30px;
251 top: 0;
252 right: 0;
253 }
254
255 .header .menu{
256 margin-top: 6px;
257 }
258
259 .header .menu a{
260 background: url(img/nav_logo.png) no-repeat left top/463px 20px;
261 width: 40px;
262 height: 20px;
263 float:left;
264 margin-left: 20px;
265 }
266 /*重置文本框*/
267 input{
268 border:none;
269 outline:none;
270 outline-offset: 0;
271 }
272
273 /*重置按钮*/
274 button{
275 border:none;
276 outline:none;
277 outline-offset: 0;
278 background: initial;
279 padding: 0px;
280 color: #c3c3c3;
281 }
282
283 .header .menu .menu-read{
284 background-position: 0 0;
285 }
286
287 .header .menu .menu-movie{
288 background-position: -60px 0;
289 }
290
291 .header .menu .menu-music{
292 background-position: -120px 0;
293 }
294
295 .header .menu .menu-group{
296 background-position: -180px 0;
297 }
298
299 .header .menu .menu-city{
300 background-position: -240px 0;
301 }
302
303 .header .menu .menu-fm{
304 background-position: -300px 0;
305 }
306
307 .header .menu .menu-time{
308 background-position: -360px 0;
309 }
310
311 .header .menu .menu-doupin{
312 background-position: -420px 0;
313 width: 44px;
314 }
315 /*页头结束*/
316
317 /*横幅开始*/
318 .banner{
319 height: 304px;
320 background: url(img/banner-bd.jpg) no-repeat 120px top/auto 100% #edf4ed;
321 }
322
323 .banner .container .loginarea{
324 width: 300px;
325 height: 300px;
326 }
327
328 .banner .container .slogan {
329 margin-top: 100px;
330 margin-right: 32px;
331 }
332
333 .banner .container .slogan .title {
334 font-size: 25px;
335 color: #111;
336 }
337
338 .banner .container .slogan .title span{
339 margin-left: 10px;
340 }
341
342 .banner .container .slogan .download{
343 margin-top: 25px;
344 }
345
346 .banner .container .slogan .download .btn{
347 width: 115px;
348 height: 30px;
349 line-height: 30px;
350 font-size: 12px;
351 border-radius: 2px;
352 }
353
354 .banner .container .slogan .download .qrcode{
355 display: inline-block;
356 width: 28px;
357 height: 28px;
358 border: 1px solid #48aa0d;
359 border-radius: 2px;
360 /*垂直对齐*/
361 vertical-align: bottom;
362 position: relative;
363 }
364
365 .banner .container .slogan .download .qrcode img{
366 width: 100%;
367 height: 100%;
368 }
369
370 .banner .container .qrcode-img {
371 position: absolute;
372 left: -2px;
373 top: -2px;
374 width: 200px;
375 padding: 15px;
376 box-sizing: border-box;
377 background: #fff;
378 border-radius: 4px;
379 }
380
381 .banner .container .qrcode-img p{
382 color: #666;
383 font-size: 13px;
384 text-align: center;
385 }
386
387 .banner .container .slogan .download .qrcode:hover .qrcode-img{
388 display: block;
389 }
390 /*横幅结束*/
391
392 /*热门区域*/
393 .hot-list{
394 line-height: 1.5;
395 }
396
397 .hot-list li{
398 margin-bottom: 15px;
399 }
400
401 .hot-list li .title{
402 font-size: 14px;
403 }
404
405 .hot-list li .description{
406 font-size: 13px;
407 color: #aaa;
408 }
409
410 .hot-list li .description span{
411 margin-right: 4px;
412 }
413
414 /*主区域的左侧区域*/
415 .hot-main .left{
416 width: 350px;
417 }
418
419 .hot-main ul{
420 text-align: justify;
421 line-height: 1.5;
422 }
423
424 .hot-main ul::after{
425 content: "";
426 display: inline-block;
427 width: 100%;
428 }
429
430 .hot-main .left li{
431 width: 170px;
432 font-size: 12px;
433 margin: 10px 0;
434 }
435
436 .hot-main .left li .word span{
437 color: #999;
438 }
439
440 /*主区域的右侧区域*/
441 .hot-main .right{
442 width: 275px;
443 font-size: 12px;
444 }
445
446 .hot-main .right li{
447 margin-bottom: 12px;
448 }
449
450 .hot-main .right li .title{
451 color:#999;
452 }
453
454 .hot-main .right li .description{
455 color:#666;
456 }
457 /*热门区域结束*/
458
459 /*豆瓣时间开始*/
460 .time-main li{
461 width: 100px;
462 margin-right: 60px;
463 margin-bottom: 30px;
464 font-size: 13px;
465 text-align: center;
466 }
467
468 .time-main li .words a{
469 color:#333;
470 }
471
472 .time-main li .words a:hover{
473 color:#fff;
474 }
475
476 .time-main li .words span{
477 display: block;
478 color: #999;
479 font-size: 12px;
480 margin-top: 10px;
481 }
482 /*豆瓣时间结束*/
483
484 /*豆瓣视频开始*/
485 .video-main .section-title a:hover{
486 background: initial;
487 }
488
489 .video-main li{
490 width: 250px;
491 margin-right: 30px;
492 font-size: 13px;
493 }
494
495 .video-main li:nth-child(3n){
496 margin: 0;
497 }
498
499 .video-main li .img{
500 position: relative;
501 }
502
503 .video-main li .img::before{
504 position: absolute;
505 width: 100%;
506 height: 100%;
507 background: rgba(0,0,0,.2);
508 color: #fff;
509 text-align: center;
510 line-height: 203px;
511 font-size: 35px;
512 }
513 /*豆瓣视频结束*/
514
515 /*豆瓣电影开始*/
516 .movie-area .right-menu-list li{
517 width: 48px;
518 height: 24px;
519 overflow: hidden;
520 }
521
522 .order-movie-list{
523 font-size: 12px;
524 }
525
526 .order-movie-list li{
527 list-style-type: decimal;
528 list-style-position: inside;
529 border-bottom: 1px solid #eaeaea;
530 margin-bottom: 6px;
531 }
532
533 .order-movie-list li a{
534 margin-left: 5px;
535 }
536
537 .movie-area .item-list li{
538 width: 100px;
539 margin-right: 33px;
540 margin-bottom: 40px;
541 text-align: center;
542 font-size: 13px;
543 }
544
545 .movie-area .item-list li:nth-child(4n){
546 margin-right: 0;
547 }
548
549 .movie-area .item-list li .words{
550 margin-top: 10px;
551 margin-bottom: 4px;
552 }
553
554 .movie-area .item-list li .words a{
555 /*转换元素属性，让a元素可以设置宽度*/
556 display: inline-block;
557 /*最大宽度*/
558 max-width: 100%;
559 /*空白的处理方式是不换行*/
560 white-space: nowrap;
561 /*溢出隐藏*/
562 overflow: hidden;
563 /*隐藏部分用3个点表示*/
564 text-overflow: ellipsis;
565 }
566
567 .movie-area .func{
568 margin-top: 7px;
569 }
570
571 .movie-area .func .block-link{
572 background: #1c8bd0;
573 color: #fff;
574 }
575
576 .movie-area .func .block-link:hover{
577 background: #047fcb;
578 }
579 /*豆瓣电影结束*/
580
581 /*小组开始*/
582 .group-area a{
583 color:#007982;
584 }
585
586 .group-area a:hover{
587 color: #fff !important;
588 }
589
590 .group-area a:active{
591 color: #fff !important;
592 }
593
594 .group-area .main .item-list{
595 text-align: justify;
596 }
597
598 .group-area .main .item-list:after{
599 content: "";
600 display: inline-block;
601 width: 100%;
602 }
603
604 .group-area .main .item-list li{
605 width: 248px;
606 margin-bottom: 30px;
607 font-size: 13px;
608 }
609
610 .group-area .main .item-list li .img{
611 float: left;
612 width: 48px;
613 margin-right: 15px;
614 }
615
616 .group-area .main .item-list li .words{
617 overflow: hidden;
618 }
619
620 .group-area .main .item-list li .words span{
621 display: block;
622 font-size: 12px;
623 color: #999;
624 margin-top: 5px;
625 }
626 /*小组结束*/
627
628 /*读书开始*/
629 .book-area a{
630 color: #494949;
631 }
632
633 .book-area a:hover, .book-area a:active{
634 color: #fff;
635 }
636
637 .book-area .right-menu-list li{
638 margin-right: 10px;
639 }
640
641 .book-area .right-menu-list li span{
642 color: #999;
643 }
644
645 .book-area .group{
646 border-bottom: 1px solid #eaeaea;
647 padding:10px 0;
648 }
649
650 .book-area .group:last-child{
651 border-bottom:none;
652 }
653
654 .book-area .item-list li{
655 width: 100px;
656 margin-right: 33px;
657 font-size: 13px;
658 text-align: center;
659 }
660
661 .book-area .item-list li:nth-child(4n){
662 margin-right: 0;
663 }
664
665 .book-area .item-list li .words{
666 margin-top: 15px;
667 }
668
669 .book-area .item-list li .words span{
670 display:block;
671 color: #111;
672 font-size: 12px;
673 margin-top: 8px;
674 }
675
676 .book-area .item-list li .func .block-link{
677 background: #999a95;
678 color: #fff;
679 }
680
681 .book-area .item-list li .func .block-link:hover{
682 background: #878882;
683 }
684
685 /*读书结束*/
686
687 /*音乐开始*/
688 .music-area a{
689 color: #555d53;
690 }
691
692 .music-area a:hover, .music-area a:active{
693 color: #fff;
694 }
695
696 .music-area .aside-left .title a{
697 color: #f39c00;
698 }
699
700 .music-area .aside-left .title a:hover, .music-area .aside-left .title a:active{
701 color: #fff;
702 }
703
704 .music-area .music-player-list li .number{
705 font-size: 12px;
706 color:#111;
707 }
708
709 .music-area .music-player-list li .player{
710 width: 240px;
711 }
712
713 .music-area .music-player-list li .player .img{
714 width: 48px;
715 height: 48px;
716 position:relative;
717 }
718
719 .music-area .music-player-list li .player .img img{
720 display: block;
721 width: 100%;
722 height: 100%;
723 }
724
725 .music-area .music-player-list li .player .img::before{
726 display: none;
727 position: absolute;
728 width: 100%;
729 height: 100%;
730 left: 0;
731 top: 0;
732 background:rgba(0,0,0,.8);
733 color: #fff;
734 text-align: center;
735 line-height: 48px;
736 }
737
738 .music-area .music-player-list li .player .img:hover::before{
739 display: block;
740 }
741
742 .music-area .music-player-list li .player .words{
743 width: 180px;
744 margin-left:10px;
745 font-size: 12px;
746 }
747
748 .music-area .music-player-list li .player .words span{
749 display:block;
750 color: #999;
751 line-height: 1.5;
752 }
753
754 .music-area .item-list li{
755 width: 130px;
756 text-align: center;
757 font-size: 12px;
758 margin-bottom: 40px;
759 }
760
761 .music-area .item-list li .img{
762 width: 80px;
763 margin: 0 auto;
764 }
765
766 .music-area .item-list li .words{
767 margin: 4px 0;
768 }
769
770 .music-area .item-list.hot-music li .words{
771 font-size: 13px;
772 margin: 8px 0;
773 }
774
775 .music-area .item-list.hot-music li .img{
776 position: relative;
777 }
778
779 .music-area .item-list.hot-music li .img::before{
780 position: absolute;
781 width: 40px;
782 height: 40px;
783 left: 0;
784 right: 0;
785 top: 0;
786 bottom: 0;
787 margin: auto;
788 text-align: center;
789 line-height: 40px;
790 font-size: 40px;
791 color: #fff;
792 background: rgba(0,0,0,.4);
793 border-radius: 50%;
794 }
795 /*音乐结束*/
796
797 /*豆品开始*/
798 .doupin-area .aside-left .title a{
799 color: #1f9432;
800 }
801
802 .doupin-area .aside-left .title a:hover, .doupin-area .aside-left .title a:active{
803 color: #fff;
804 }
805
806 .doupin-area .aside-right{
807 font-size: 14px;
808 }
809
810 .doupin-area .main .item-list li{
811 width: 240px;
812 margin-right: 20px;
813 font-size: 16px;
814 margin-bottom: 30px;
815 }
816
817 .doupin-area .main .item-list li .words{
818 margin-top: 10px;
819 }
820
821 .doupin-area .main .item-list li .words span{
822 color: #E55457;
823 }
824 /*豆品结束*/
825
826 /*同城开始*/
827 .city-area a{
828 color: #643;
829 }
830
831 .city-area a:hover, .city-area a:active{
832 color: #fff;
833 }
834
835 .city-area .aside-left .title a{
836 color: #ec5303;
837 }
838
839 .city-area .aside-left .title a:hover, .city-area .aside-left .title a:active{
840 color: #fff;
841 }
842
843 .city-area .item-list li{
844 width: 248px;
845 margin-right: 20px;
846 margin-bottom: 60px;
847 }
848
849 .city-area .item-list li:nth-child(even){
850 margin-right: 0;
851 }
852
853 .city-area .item-list li .img{
854 margin-right: 10px;
855 }
856
857 .city-area .item-list li .words{
858 overflow: hidden;
859 }
860
861 .city-area .item-list li .words a{
862 font-size: 13px;
863 }
864
865 .city-area .item-list li .words span{
866 font-size: 12px;
867 display: block;
868 color: #666;
869 line-height: 1.7;
870 }
871 /*同城结束*/
872
873 /*页脚开始*/
874 .footer{
875 font-size: 12px;
876 line-height: 1.5;
877 color: #999;
878 }
879
880 .footer .container{
881 border-top: 1px dashed #dcdcdc;
882 padding-top: 15px;
883 padding-bottom: 30px;
884 }
885
886 .footer .left img{
887 width: 15px;
888 vertical-align: middle;
889 }
890
891 .footer .left, .footer .right{
892 width: 50%;
893 }
894
895 .footer .right .menu a{
896 display: inline-block;
897 margin:0 2px;
898 }
899
900 .footer .right .menu a:first-child{
901 margin-left: 0;
902 }
903
904 .footer .adv{
905 width: 150px;
906 margin-top: 20px;
907 }
908 /*页脚结束*/
㈢引用的公共样式CSS代码
1 /*多页面共享的css代码*/
2 @import "//at.alicdn.com/t/font_1637126_kry1x9i38pm.css";
3
4 body{
5 font-family: Helvetica,Arial,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;;
6 }
7
8 .left{
9 float:left;
10 }
11
12 .right{
13 float:right;
14 }
15
16 .clearfix::after{
17 content:"";
18 display:block;
19 clear:both;
20 }
21
22 .hidden{
23 display:none;
24 }
25
26 .btn{
27 background: #41ac52 ;
28 cursor: pointer ;
29 color: #fff;
30 text-align: center;
31 border-radius: 4px;
32 }
33
34 .btn:disabled {
35 background:rgba(66,189,86,.5);
36 cursor: not-allowed;
37 }
38
39 /*评分*/
40 .star-bg{
41 display: inline-block;
42 width: 55px;
43 height: 11px;
44 background:url(img/star.png) no-repeat left top/100%;
45 }
46
47 .star50{
48 background-position: 0 0;
49 }
50
51 .star45{
52 background-position: 0 -11px;
53 }
54
55 .star40{
56 background-position: 0 -22px;
57 }
58
59 .star35{
60 background-position: 0 -33px;
61 }
62
63 .star30{
64 background-position: 0 -44px;
65 }
66
67 .star25{
68 background-position: 0 -55px;
69 }
70
71 .star20{
72 background-position: 0 -66px;
73 }
74
75 .star15{
76 background-position: 0 -77px;
77 }
78
79 .star10{
80 background-position: 0 -88px;
81 }
82
83 .star05{
84 background-position: 0 -99px;
85 }
86
87 .star00{
88 background-position: 0 -110px;
89 }
90
91 .star .number{
92 font-size: 12px;
93 margin-left: 7px;
94 color: #e09015;
95 }
㈣重置样式CSS代码
1 /* http://meyerweb.com/eric/tools/css/reset/
2 v2.0 | 20110126
3 License: none (public domain)
4 */
5
6 html, body, div, span, applet, object, iframe,
7 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 a, abbr, acronym, address, big, cite, code,
9 del, dfn, em, img, ins, kbd, q, s, samp,
10 small, strike, strong, sub, sup, tt, var,
11 b, u, i, center,
12 dl, dt, dd, ol, ul, li,
13 fieldset, form, label, legend,
14 table, caption, tbody, tfoot, thead, tr, th, td,
15 article, aside, canvas, details, embed,
16 figure, figcaption, footer, header, hgroup,
17 menu, nav, output, ruby, section, summary,
18 time, mark, audio, video {
19 margin: 0;
20 padding: 0;
21 border: 0;
22 font-size: 100%;
23 font: inherit;
24 vertical-align: baseline;
25 }
26 /* HTML5 display-role reset for older browsers */
27 article, aside, details, figcaption, figure,
28 footer, header, hgroup, menu, nav, section {
29 display: block;
30 }
31 body {
32 line-height: 1;
33 }
34 ol, ul {
35 list-style: none;
36 }
37 blockquote, q {
38 quotes: none;
39 }
40 blockquote:before, blockquote:after,
41 q:before, q:after {
42 content: ‘‘;
43 content: none;
44 }
45 table {
46 border-collapse: collapse;
47 border-spacing: 0;
48 }
㈤豆瓣横幅区域登录HTML代码
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>登录/注册</title>
6 <link rel="stylesheet" href="loginframe.css ">
7 </head>
8 <body>
9 <div class="container">
10 <!--短信登录/注册，密码登录-->
11 <div class="login ">
12 <!--切换菜单-->
13 <div class="switch-menu clearfix">
14 <span class="left " >
15 短信登录/注册
16 </span>
17 <span class="right selected">
18 密码登录
19 </span>
20 </div>
21 <form class="form">
22 <!--短信登录/注册表单-->
23 <div >
24 <div class="form-item">
25 <p class="txt">
26 登录注册表示同意
27 <a href="">豆瓣使用协议、隐私政策</a>
28 </p>
29 </div>
30
31 <div class="form-item">
32 <input type="text" class="more-text-indent" placeholder="手机号">
33 <div class="country-code">
34 <div>
35 +86
36 </div>
37 <div class="choose-area hidden">
38 <div class="center">
39 <div class="title">
40 选择国际区号
41 </div>
42 <div>
43 <ul>
44 <li class="clearfix"><span class="left">国家名1</span><span class="right">+1</span>
45 </li>
46 <li class="clearfix selected">
47 <span class="left">国家名2</span>
48 <i class="left iconfont iconzhengque"></i>
49 <span class="right">+2</span>
50 </li>
51 <li class="clearfix"><span class="left">国家名3</span><span class="right">+3</span>
52 </li>
53 <li class="clearfix"><span class="left">国家名4</span><span class="right">+4</span>
54 </li>
55 <li class="clearfix"><span class="left">国家名5</span><span class="right">+5</span>
56 </li>
57 <li class="clearfix"><span class="left">国家名6</span><span class="right">+6</span>
58 </li>
59 <li class="clearfix"><span class="left">国家名7</span><span class="right">+7</span>
60 </li>
61 <li class="clearfix"><span class="left">国家名8</span><span class="right">+8</span>
62 </li>
63 <li class="clearfix"><span class="left">国家名9</span><span class="right">+9</span>
64 </li>
65 <li class="clearfix"><span class="left">国家名10</span><span
66 class="right">+10</span></li>
67 <li class="clearfix"><span class="left">国家名11</span><span
68 class="right">+11</span></li>
69 <li class="clearfix"><span class="left">国家名12</span><span
70 class="right">+12</span></li>
71 <li class="clearfix"><span class="left">国家名13</span><span
72 class="right">+13</span></li>
73 <li class="clearfix"><span class="left">国家名14</span><span
74 class="right">+14</span></li>
75 <li class="clearfix"><span class="left">国家名15</span><span
76 class="right">+15</span></li>
77 </ul>
78 </div>
79 </div>
80 </div>
81 </div>
82 </div>
83
84 <div class="form-item">
85 <input type="text" placeholder="验证码">
86 <a href="" class="ab-right">
87 获取验证码
88 </a>
89 </div>
90 <div class="form-item">
91 <button class="btn" >登录豆瓣</button>
92 </div>
93
94 <div class="form-item tip clearfix">
95 <label class="left">
96 <input type="checkbox">
97 下次自动登录
98 </label>
99
100 <span class="right">
101 <a href="">
102 收不到验证码
103 </a>
104 </span>
105 </div>
106 </div>
107
108 <!--密码登录-->
109 <div class="hidden">
110 <div class="form-item tip clearfix" >
111 <a href="" class="right" >找回密码</a>
112 </div>
113
114 <div class="form-item" >
115 <input type="text" placeholder="手机号/邮箱">
116 </div>
117
118 <div class="form-item" >
119 <input type="password" placeholder="密码">
120 </div>
121
122 <div class="form-item">
123 <button disabled class="btn" >登录豆瓣</button>
124 </div>
125
126 <div class="form-item tip clearfix">
127 <lable class="left">
128 <input type="checkbox" >
129 下次自动登录
130 </lable>
131 <span class="right">
132 <a href="">
133 海外手机登录
134 </a>
135 </span>
136 </div>
137 </div>
138 </form>
139
140 <div class="bottom">
141 <span class="msg">
142 第三方登录：
143 </span>
144 <i class="iconfont iconweixin" ></i>
145 <i class="iconfont iconweibo" ></i>
146 </div>
147 </div>
148
149 <!--扫码登录-->
150 <div class="qrcode hidden">
151 <div class="title">
152 二维码登录
153 </div>
154 <div class="code">
155 <img src="img/qrlogin_code.png" alt="">
156 </div>
157 <div class="tip" >
158 请打开豆瓣客户端扫一扫
159 </div>
160 </div>
161 <div class="change">
162 <!--通过类名切换图标-->
163 <!--<i class="icon icon-qrcode"></i>-->
164 <i class="icon icon-pc"></i>
165 </div>
166
167 <div class="pointer hidden">
168 扫码登录
169 </div>
170 </div>
171 </body>
172 </html>
㈥豆瓣横幅区域登录CSS代码
1 @import "reset.css";
2 @import "common.css ";
3
4 /*统一设置开始*/
5 a{
6 color:#41ac52;
7 }
8
9 input[type="text"], input[type="password"]{
10 width:100%;
11 border:1px solid #e4e6e5;
12 box-sizing: border-box;
13 height: 34px;
14 padding-left: 10px;
15 border-radius: 4px;
16 font-size: 13px;
17 }
18
19 /*更多的缩进*/
20 input[type="text"].more-text-indent{
21 padding-left: 60px;
22 }
23 /*统一设置结束*/
24
25 /*重置按钮*/
26 button{
27 border:none;
28 outline:none;
29 outline-offset: 0;
30 background: initial;
31 padding: 0;
32 color: #c3c3c3;
33 box-sizing: border-box;
34 }
35
36 .container {
37 width: 300px;
38 height: 300px;
39 line-height: 2;
40 padding: 30px 10px 10px 10px;
41 color:#9b9b9b;
42 box-sizing: border-box;
43 position: relative;
44 }
45
46 .container .login .switch-menu{
47 border-bottom: 1px solid #ececec;
48 font-size: 13px;
49 }
50
51 .container .login .switch-menu span{
52 width: 50%;
53 text-align: center;
54 cursor: pointer;
55 }
56
57 .container .login .switch-menu span.selected{
58 font-weight: bold;
59 color:#333;
60 border-bottom: 1px solid #494949;
61 margin-bottom: -1px;
62 }
63
64 .container .login .form .form-item{
65 margin:10px 0;
66 position: relative;
67 font-size: 13px;
68 }
69
70 .container .login .form .form-item .txt{
71 font-size: 12px;
72 }
73
74 /*国家地区电话区号设置*/
75 .container .login .form .form-item .country-code{
76 position: absolute;
77 width: 51px;
78 height: 26px;
79 left: 0;
80 top: 5px;
81 text-align: center;
82 color:#333;
83 font-weight: bold;
84 font-size: 15px;
85 line-height: 26px;
86 border-right:1px solid #e4e6e5;
87 cursor: pointer;
88 }
89
90 .container .login .form .form-item .country-code .choose-area{
91 /*铺满整个窗口，背景为半透明的白色*/
92 position: fixed;
93 width: 100%;
94 height: 100%;
95 background: rgba(255,255,255,0.5);
96 left: 0;
97 top: 0;
98 z-index: 1;
99 }
100
101 .container .login .form .form-item .country-code .choose-area .center{
102 width: 285px;
103 height: 225px;
104 position: absolute;
105 box-sizing: border-box;
106 border:1px solid #bbb;
107 left: 0;
108 right: 0;
109 top:0;
110 bottom: 0;
111 margin: auto;
112 background: #fff;
113 border-radius: 5px;
114 cursor: auto;
115 overflow: hidden;
116 }
117
118 .container .login .form .form-item .country-code .choose-area .center .title{
119 background: #ebf5eb;
120 height: 42px;
121 line-height: 42px;
122 text-align: left;
123 padding-left: 10px;
124 color:#060;
125 font-weight: bold;
126 }
127 .container .login .form .form-item .country-code .choose-area .center ul{
128 height: 180px;
129 overflow: auto;
130 padding: 10px;
131 box-sizing: border-box;
132 font-size: 14px;
133 }
134
135 .container .login .form .form-item .country-code .choose-area .center ul li{
136 height: 38px;
137 line-height: 38px;
138 border-top: 1px solid #e5e5e5;
139 border-bottom: 1px solid #e5e5e5;
140 margin-top: -1px;
141 cursor: pointer;
142 }
143
144 .container .login .form .form-item .country-code .choose-area .center ul li .right{
145 color: #aaa;
146 font-weight: normal;
147 }
148
149 .container .login .form .form-item .country-code .choose-area .center ul li.selected{
150 color: #42bd56;
151 }
152
153 .container .login .form .form-item .country-code .choose-area .center ul li.selected .right{
154 color: inherit;
155 }
156
157 .container .login .form .form-item .country-code .choose-area .center ul li.selected .iconfont{
158 margin-left: 10px;
159 }
160
161 .container .form-item .ab-right{
162 position: absolute;
163 right:7px;
164 top: 5px;
165 }
166
167 .container .form-item .btn{
168 width: 100%;
169 height: 34px;
170 font-size: 15px;
171 }
172
173 .container .login .form-item.tip{
174 font-size: 12px;
175 color: #333;
176 }
177
178 .container .login .bottom{
179 border-top: 1px solid #ddd;
180 }
181
182 .container .login .bottom .msg{
183 font-size: 11px;
184 vertical-align: 2px;
185 }
186
187 .container .login .bottom .iconfont{
188 margin-left: 12px;
189 }
190
191 .container .login .bottom .iconfont.iconweixin{
192 color:#1afa29;
193 }
194
195 .container .login .bottom .iconfont.iconweibo{
196 color: #EA5D5C;
197 }
198
199 .container .qrcode{
200 font-size: 13px;
201 }
202
203 .container .qrcode .title{
204 color:#333;
205 border-bottom: 1px solid #ececec;
206 }
207
208 .container .qrcode .code{
209 /*图片居中*/
210 text-align: center;
211 font-size: 0;
212 margin-top: 20px;
213 }
214
215 .container .qrcode .code img{
216 width: 170px;
217 height: 170px;
218 }
219
220 .container .qrcode .tip{
221 width: 183px;
222 height: 25px;
223 line-height: 25px;
224 background: rgba(0,0,0,.08);
225 color: #494949;
226 margin: 0 auto;
227 text-align: center;
228 border-radius: 20px;
229 margin-top: 10px;
230 }
231
232 .container .change{
233 position: absolute;
234 width: 30px;
235 height: 30px;
236 right: 10px;
237 top: 10px;
238 }
239
240 .container .change:hover+.pointer{
241 display: block;
242 }
243
244 .container .change .icon{
245 width: 30px;
246 height: 30px;
247 display: block;
248 cursor: pointer;
249 }
250
251 .container .change .icon.icon-qrcode{
252 background: url(img/icon-qrcode.png ) no-repeat left top/100% 100%;
253 }
254
255 .container .change .icon.icon-pc {
256 background: url(img/icon-pc.png) no-repeat left top/100% 100%;
257 }
258
259 .container .pointer{
260 position: absolute;
261 height: 28px;
262 line-height: 28px;
263 border: 1px solid rgba(66,189,86,.3);
264 color:#666;
265 font-size: 13px;
266 background: #f5faf9;
267 right: 50px;
268 top: 6px;
269 padding: 0 5px;
270 border-radius: 4px;
271 }
㈦具体效果图
进入豆瓣官网查看：https://www.douban.com/
标签：主办方 半透明 看电影 交互设计 logo 科幻 b2b 青春 联网
原文地址：https://www.cnblogs.com/shihaiying/p/12320836.html
