使用公共样式的问题

使用公共样式的问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>慕云游商城---机票 酒店 旅游攻略</title>
<meta name="Keywords" content="机票 酒店 旅游攻略 签证 出国 自由行">
<meta name="Description" content="提供全方位旅游攻略">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<!-- 页面头部 -->
<header class="site-head">
<div class="topbar">
<div class="center-wrap">
<nav class="shortcut-links">
<ul>
<li>
<a href="">目的地</a>
</li>
<!--  锦囊 社区 行程助手 商城 酒店·民宿 特价酒店-->
<li>
<a href="">锦囊</a>
</li>
 
<li class="have-menu">
<a href="">社区</a>
<!-- 使用盒子之间的压盖制作下拉三角形 -->
<em class="arrow">
<!-- 占位标签 -->
<b></b>
<i></i>
</em>
<!--下拉菜单展示 -->
<div class="menu sqmenu">
<ul class="menu-list">
<li><a href="">旅行论坛</a></li>
<li><a href="">旅行专栏</a></li>
<li><a href="">旅行问答</a></li>
<li><a href="">旅行生活分享平台</a></li>
<li><a href="">JNE旅行生活美学</a></li>
<li><a href="">Biu伴(原结伴同游)</a></li>
<li><a href="">负责任的旅行</a></li>
<li><a href="">特别策划</a></li>
</ul>
</div>
</li>
 
<li>
<a href="">行程助手</a>
</li>
 
<li class="have-menu">
<a href="">商城</a>
<em class="arrow">
<b></b>
<i></i>
</em>
<!--下拉菜单展示 -->
<div class="menu scmenu">
<ul class="menu-list">
<li><a href="#">机酒自由行</a></li>
<li><a href="#">当地玩乐</a></li>
<li><a href="#">签证</a></li>
<li><a href="#">保险</a></li>
<li><a href="#">租车自驾</a></li>
<li><a href="#">游轮</a></li>
<li><a href="#">河轮</a></li>
<li><a href="#">私人订制</a></li>
<li><a href="#">欧洲铁路</a></li>
</ul>
</div>
</li>
 
<li class="have-menu">
<a href="">酒店·民宿</a>
<em class="arrow">
<b></b>
<i></i>
</em>
<!--下拉菜单展示 -->
<div class="menu jdmsmenu">
<ul class="menu-list">
<li><a href="#">酒店</a></li>
<li><a href="#">爱彼迎</a></li>
<li><a href="#">华人旅馆</a></li>
</ul>
</div>
</li>
 
<li>
<a href="">特价酒店</a>
</li>
 
</ul>
</nav>
<nav class="topbar-r">
<!-- qq图标 并映射到样式-->
<a href="" class="iconfont">&#xe62d;</a>
<span>|</span>
<a href="" class="iconfont">&#xe612;</a>
<a href="" class="iconfont">&#xe63e;</a>
<a href="" class="iconfont">&#xe61b;</a>
<a href="">登陆</a>
<a href="">注册</a>
</nav>
</div>
</div>
<!-- 这一列只有导航 使用语义化标签nav -->
<nav class="main-nav">
<!-- 板心 -->
<div class="center-wrap">
<ul>
<li class="have-menu">
<a href="">机酒自由行</a>
<div class="menu jjzyxmenu">
<dl>
<dt>全部</dt>
<dd>
<a href="#">自由行</a>
<a href="#">优惠机票</a>
<a href="#">酒店</a>
<a href="#">游轮</a>
<a href="#">定制游</a>
<a href="#">马尔代夫</a>
<a href="#">海岛游</a>
</dd>
</dl>
</div>
</li>
<li>
<a href="">优惠机票</a>
</li>
<li class="have-menu">
<a href="">跟团游</a>
<div class="menu gtymenu">
<dl>
<dt>全部</dt>
<dd>
<a href="#">跟团游</a>
<a href="#">半自助游</a>
</dd>
</dl>
</div>
</li>
<li>
<a href="">酒店</a>
</li>
<li class="have-menu">
<a href="">当地玩乐</a>
<div class="menu ddwlmenu">
<dl>
<dt>全部</dt>
<dd>
<a href="#">日游小团</a>
<a href="#">深度体验</a>
<a href="#">门票票卷</a>
<a href="#">餐饮美食</a>
<a href="#">WIFI电话卡</a>
<a href="#">购物</a>
<a href="#">交通卡</a>
</dd>
</dl>
</div>
</li>
<li>
<a href="">签证</a>
</li>
<li>
<a href="">游轮</a>
</li>
<li>
<a href="">河轮</a>
</li>
<li>
<a href="">保险</a>
</li>
<li>
<a href="">租车自驾</a>
</li>
<li class="have-menu">
<a href="">深度旅游</a>
<div class="menu sdlymenu">
<dl>
<dt>全部</dt>
<dd>
<a href="#">CityWalk</a>
<a href="#">特色长线</a>
<a href="#">Q-Home</a>
</dd>
</dl>
</div>
</li>
<li>
<a href="">私人地址</a>
</li>
</ul>
</div>
</nav>
<!-- 页面icon和搜索框 -->
<div class="header-con">
<div class="center-wrap">
<h1>慕云游商城</h1>
<div class="soso-box">
<input  type="text">
<a class="btn iconfont" href="">&#xe62d;</a>
</div>
</div>
</div>
</header>
 
<!-- 页面主要内容区 -->
<section class="banner" id="banner">
<!-- banner -->
<!-- 此处是轮播图  用无序列表进行展示 -->
<ul class="carousel_list" id="carousel_list">
<li>
<img src="images/banner1.jpg" alt="">
</li>
</ul>
<!-- 板心 -->
<div class="center-wrap">
<!-- 轮播图的按钮 -->
<a href="javascript:;"  class="leftbtn" id="leftbtn"></a>
<a href="javascript:;"  class="rightbtn" id="rightbtn"></a>
<!-- 导航整体部分包含2个部分  -->
<nav class="banner-nav" id="banner-nav">
<ul id="banner-nav-ul">
<li class="hot" data-t="hot">
<dl>
<dt>热门出发地</dt>
<dd>
<em>北京</em>
<em>上海</em>
<em>广深</em>
<em>西南</em>
<em>国内其他</em>
</dd>
</dl>
</li>
 
<li class="hk" data-t="hk">
<dl>
<dt>港澳台 国内</dt>
<dd>
<em>香港</em>
<em>澳门</em>
<em>台湾</em>
<em>国内其他</em>
</dd>
</dl>
</li>
<li class="jp" data-t="jp">
<dl>
<dt>日本 韩国</dt>
<dd>
<em>东京</em>
<em>大阪</em>
<em>冲绳</em>
<em>北海道</em>
<em>福冈</em>
</dd>
</dl>
</li>
<li class="as" data-t="as">
<dl>
<dt>东南亚 南亚</dt>
<dd>
<em>泰国</em>
<em>新加坡</em>
<em>印尼</em>
<em>马来西亚</em>
<em>越南</em>
</dd>
</dl>
</li>
<li class="eu" data-t="eu">
<dl>
<dt>欧洲 美洲</dt>
<dd>
<em>英国</em>
<em>法国</em>
<em>美国</em>
<em>加拿大</em>
</dd>
</dl>
</li>
<li class="au" data-t="au">
<dl>
<dt>澳新 中东非</dt>
<dd>
<em>澳大利亚</em>
<em>新西兰</em>
<em>迪拜</em>
</dd>
</dl>
</li>
</ul>
<div class="menus-box">
<!-- 有6种不同的菜单 需要6个div -->
<div class="menu" data-t="hot">
<dl>
<dt>港澳台</dt>
<dd>
<a href="">香港</a>
<a href="">澳门</a>
<a href="">台北</a>
<a href="">高雄</a>
<a href="">香港迪士尼</a>
<a href="">香港海洋公园</a>
<a href="">交通接驳</a>
<a href="">澳门</a>
<a href="">塔新濠天地水舞间</a>
<a href="">澳门豪华自助 台北101</a>
<a href="">台湾美食</a>
</dd>
</dl>
<dl>
<dt>国内热门城市</dt>
<dd>
<a href="">三亚</a>
<a href="">东北雪乡</a>
<a href="">大理</a>
<a href="">丽江</a>
<a href="">昆明</a>
<a href="">西双版纳</a>
<a href="">拉萨</a>
<a href="">成都</a>
<a href="">重庆</a>
<a href="">长白山</a>
<a href="">厦门</a>
<a href="">长沙</a>
<a href="">桂林北京</a>
<a href="">西安</a>
<a href="">敦煌</a>
<a href="">杭州</a>
<a href="">上海</a>
<a href="">无锡</a>
<a href="">南京</a>
<a href="">广州</a>
<a href="">黄山</a>
<a href="">莫干山</a>
<a href="">新疆</a>
<a href="">北海</a>
<a href="">九华山</a>
<a href="">太原</a>
<a href="">张家口</a>
</dd>
</dl>
<dl>
<dt>热门景点</dt>
<dd>
<a href="">北京故宫</a>
<a href="">东北滑雪</a>
<a href="">恭王府</a>
<a href="">长城</a>
<a href="">青城山大熊猫基地</a>
<a href="">峨眉山</a>
<a href="">都江堰</a>
<a href="">长恨歌表演</a>
<a href="">兵马俑</a>
<a href="">大唐芙蓉园</a>
<a href="">三亚日游</a>
<a href="">厦门鼓浪屿</a>
<a href="">千岛湖</a>
<a href="">呼伦贝尔草原</a>
<a href="">希拉穆仁草原</a>
<a href="">大理日游</a>
<a href="">杭州</a>
<a href="">重庆两江夜游船票</a>
</dd>
</dl>
</div>
<div class="menu" data-t="hk">
<dl>
<dt>港澳台</dt>
<dd>
<a href="#">香港</a>
<a href="#">澳门</a>
<a href="#">台北</a>
<a href="#">高雄</a>
<a href="#">香港迪士尼</a>
<a href="#">香港海洋公园</a>
<a href="#">交通接驳</a>
<a href="#">澳门塔</a>
<a href="#">新濠天地水舞间</a>
<a href="#">澳门豪华自助</a>
<a href="#">台北101</a>
<a href="#">台湾美食</a>
</dd>
</dl>
</div>
<div class="menu current" data-t="jp">
<dl>
<dt>日本</dt>
<dd>
<a href="#">东京</a>
<a href="#">大阪</a>
<a href="#">冲绳</a>
<a href="#">北海道</a>
<a href="#">札幌</a>
<a href="#">京都</a>
<a href="#">名古屋</a>
<a href="#">福冈</a>
<a href="#">长崎</a>
<a href="#">鹿儿岛</a>
<a href="#">JR</a>
<a href="#">Pass</a>
<a href="#">米其林餐厅</a>
<a href="#">东京迪士尼</a>
<a href="#">大阪环球影城</a>
<a href="#">冲绳一日游</a>
<a href="#">City</a>
<a href="#">Walk</a>
<a href="#">西瓜卡</a>
<a href="#">京都日游</a>
<a href="#">和服体验</a>
<a href="#">包车服务</a>
<a href="#">富士山日游</a>
</dd>
</dl>
</div>
<div class="menu" data-t="as">
<dl>
<dt>泰新马</dt>
<dd>
<a href="#">普吉岛</a>
<a href="#">清迈</a>
<a href="#">曼谷</a>
<a href="#">苏梅岛</a>
<a href="#">甲米</a>
<a href="#">芭堤雅</a>
<a href="#">拜县</a>
<a href="#">新加坡</a>
<a href="#">马来西亚</a>
<a href="#">沙巴</a>
<a href="#">吉隆坡</a>
<a href="#">皇帝岛</a>
<a href="#">泰国人妖</a>
<a href="#">泰国丛林飞跃</a>
<a href="#">泰国spa按摩</a>
<a href="#">清迈夜间动物园</a>
<a href="#">泰拳表演清莱一日游</a>
<a href="#">新加坡环球影城</a>
<a href="#">新加坡日游</a>
<a href="#">新加坡滨海湾花园</a>
<a href="#">沙巴美人鱼岛</a>
<a href="#">沙巴红树林萤火虫</a>
</dd>
</dl>
<dl>
<dt>东南亚</dt>
<dd>
<a href="#">巴厘岛</a>
<a href="#">长滩岛</a>
<a href="#">马尼拉</a>
<a href="#">薄荷岛</a>
<a href="#">美娜多芽庄</a>
<a href="#">岘港</a>
<a href="#">富国岛</a>
<a href="#">柬埔寨</a>
<a href="#">缅甸</a>
<a href="#">老挝</a>
<a href="#">文莱</a>
<a href="#">蓝梦岛</a>
<a href="#">巴厘岛SPA</a>
<a href="#">网红漂浮下午茶</a>
<a href="#">珍珠岛游乐园</a>
<a href="#">富国岛浮潜海钓</a>
<a href="#">吴哥窟</a>
<a href="#">西哈努克</a>
</dd>
</dl>
<dl>
<dt>西亚</dt>
<dd>
<a href="#">马尔代夫</a>
<a href="#">斯里兰卡</a>
<a href="#">印度</a>
<a href="#">尼泊尔</a>
<a href="#">格鲁吉亚阿塞拜疆</a>
<a href="#">亚美尼亚</a>
</dd>
</dl>
</div>
<div class="menu" data-t="eu">
<dl>
<dt>欧洲</dt>
<dd>
<a href="#">法国</a>
<a href="#">意大利</a>
<a href="#">土耳其</a>
<a href="#">俄罗斯</a>
<a href="#">西班牙</a>
<a href="#">瑞士</a>
<a href="#">英国</a>
<a href="#">希腊</a>
<a href="#">荷兰</a>
<a href="#">德国</a>
<a href="#">捷克</a>
<a href="#">葡萄牙</a>
<a href="#">奥地利</a>
<a href="#">瑞典</a>
<a href="#">丹麦</a>
<a href="#">挪威</a>
<a href="#">冰岛</a>
<a href="#">芬兰</a>
<a href="#">罗瓦涅米</a>
<a href="#">奥斯陆</a>
<a href="#">雷克雅未克</a>
<a href="#">因特拉肯</a>
<a href="#">巴塞罗那</a>
<a href="#">伦敦</a>
<a href="#">巴黎</a>
<a href="#">塞纳河</a>
<a href="#">慕尼黑</a>
<a href="#">普罗旺斯</a>
<a href="#">温莎日游</a>
<a href="#">巴黎迪斯尼</a>
<a href="#">伊斯坦布</a>
<a href="#">尔阿尔罕布拉宫</a>
<a href="#">唐顿庄园</a>
<a href="#">埃菲尔铁塔</a>
<a href="#">凡尔赛宫</a>
<a href="#">北欧破冰船</a>
<a href="#">极光之旅</a>
<a href="#">英国天空岛</a>
</dd>
</dl>
<dl>
<dt>美洲</dt>
<dd>
<a href="#">美国</a>
<a href="#">加拿大</a>
<a href="#">墨西哥</a>
<a href="#">巴西</a>
<a href="#">阿根廷</a>
<a href="#">智利</a>
<a href="#">秘鲁</a>
<a href="#">玻利维亚</a>
<a href="#">洛杉矶</a>
<a href="#">纽约</a>
<a href="#">拉斯维加斯</a>
<a href="#">旧金山</a>
<a href="#">圣地亚哥芝加哥</a>
<a href="#">西雅图</a>
<a href="#">华盛顿</a>
<a href="#">奥兰多</a>
<a href="#">夏威夷</a>
<a href="#">塞班岛</a>
<a href="#">关岛</a>
<a href="#">环球影城</a>
<a href="#">迪士尼</a>
<a href="#">演出票</a>
<a href="#">尼亚加拉大瀑布</a>
<a href="#">帝国大厦</a>
<a href="#">奥特莱斯</a>
<a href="#">黄石国家公园</a>
<a href="#">纽约大都会博物馆</a>
<a href="#">美国大峡谷西峡</a>
<a href="#">拉斯维加斯摩天轮</a>
<a href="#">羚羊峡谷</a>
<a href="#">马蹄湾</a>
</dd>
</dl>
</div>
<div class="menu" data-t="au">
<dl>
<dt>澳新 南太平洋</dt>
<dd>
<a href="#">墨尔本</a>
<a href="#">悉尼</a>
<a href="#">黄金海岸</a>
<a href="#">凯恩斯</a>
<a href="#">布里斯班奥克兰</a>
<a href="#">斐济</a>
<a href="#">珀斯</a>
<a href="#">圣灵群岛</a>
<a href="#">大堡礁</a>
<a href="#">墨尔本之星</a>
<a href="#">悉尼热气球</a>
<a href="#">水上飞机</a>
<a href="#">海港大桥</a>
<a href="#">皇后镇霍比特人村</a>
<a href="#">怀托莫萤火虫洞</a>
<a href="#">米尔福德峡湾</a>
<a href="#">新西兰滑雪</a>
<a href="#">瓦纳卡</a>
<a href="#"></a>
</dd>
</dl>
<dl>
<dt>中东非</dt>
<dd>
<a href="#">迪拜</a>
<a href="#">摩洛哥</a>
<a href="#">毛里求斯</a>
<a href="#">埃及</a>
<a href="#">塞舌尔</a>
<a href="#">马达加斯加</a>
<a href="#">以色列</a>
<a href="#">肯尼亚</a>
<a href="#">南非</a>
<a href="#">伊朗</a>
<a href="#">约旦</a>
<a href="#">突尼斯</a>
<a href="#">迪拜</a>
<a href="#">塔法拉利主题公园</a>
<a href="#">迪拜七星帆船酒店用餐</a>
<a href="#">夜游迪拜河</a>
<a href="#">亚特兰蒂斯水上乐园</a>
<a href="#">动物大迁徙</a>
<a href="#">撒哈拉沙漠</a>
<a href="#">金字塔</a>
<a href="#">纳米比亚</a>
<a href="#"></a>
</dd>
</dl>
</div>
</div>
</nav>
</div>
</section>
 
<!-- 热门广告 -->
<section class="hot-ads clearfix" id="">
<div class="center-wrap">
<ul>
<li>
<a href="">
<img src="images/small01.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="images/small02.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="images/small03.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="images/small04.png" alt="">
</a>
</li>
</ul>
</div>
</section>
 
<!-- 新鲜甩尾 -->
<section class="xxsw content-part" id="">
<div class="center-wrap">
<div class="hd clearfix">
<h2>新鲜甩尾</h2>
<em>每日不可不看的好货</em>
</div>
 
<!-- ul不要清除浮动 否则盒子的阴影溢出会被隐藏 -->
<ul>
<li>
<a href="">
<div class="picbox">
<img src="images/xxsw1.png" alt="">
</div>
<div class="wordbox">
北京直飞马尔代夫6-7天往返含税机票(首都航空/售完为止)…
</div>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="images/xxsw2.png" alt="">
</div>
<div class="wordbox">
[甩尾狂欢] 北京/天津直飞日本东京/大阪/冲绳/札幌/福冈4-7…
</div>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="images/xxsw3.png" alt="">
</div>
<div class="wordbox">
[拒签全退][全国25城联运] 北京往返格鲁吉亚+阿塞拜疆7-30天自由行
</div>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="images/xxsw4.png" alt="">
</div>
<div class="wordbox">
[樱花季] 北京直飞东京/大阪/名古屋/冲绳/札幌/福冈/仙台2-30天…
</div>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="images/xxsw5.png" alt="">
</div>
<div class="wordbox">
[品质小团/快速确认] 新西兰福克斯冰川直升机观光+冰川徒步…
</div>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="images/xxsw6.png" alt="">
</div>
<div class="wordbox">
[北欧破冰船] 芬兰+瑞典极地探险号破冰船活动+冰上漂浮+瑞典…
</div>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="images/xxsw7.png" alt="">
</div>
<div class="wordbox">
[指定班期特惠][全程中文伴游] 摩洛哥全景深度10日游(卡萨进…)
</div>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="images/xxsw8.png" alt="">
</div>
<div class="wordbox">
马来西亚天空之镜+河口赏鹰+夜游萤火虫+寻找蓝眼泪(马来西亚瓜…)
</div>
</a>
</li>
</ul>
</div>
</section>
 
<!-- 机酒自由行 -->
<section class="jjzyx content-part common-style">
<div class="center-wrap">
<div class="hd clearfix">
<h2>机酒自由行</h2>
<em>挑选全球机票、酒店、邮轮等旅行产品</em>
<nav>
<ul>
<li class="current"><a href="">近期好货</a></li>
<li><a href="">新品汇聚</a></li>
<li><a href="">定制游</a></li>
<li><a href="">国内推荐</a></li>
<li><a href="">优惠机票</a></li>
<li><a href="">热门海岛</a></li>
<li><a href="">热门海岛</a></li>
<li><a href="">热卖签证</a></li>
</ul>
</nav>
</div>
<div class="bd">
<ul>
<li class="big-grid">
<a href="">
<img src="images/jjzyx1.png" alt="">
</a>
<span class="tag">机票</span>
<div class="info">
<p>
[樱花季]天津直飞东京/大阪/名古屋/冲绳/札幌2-30天往返
</p>
<p>
含税机票【甩尾/多团期】
</p>
</div>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<span class="tag">跟团游</span>
<img src="images/jjzyx2.png" alt="">
</div>
<div class="wordbox">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票(赠送旅游意外险…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<span class="tag">机票</span>
<img src="images/jjzyx3.png" alt="">
</div>
<div class="wordbox">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票(赠送旅游意外险…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<span class="tag">机票</span>
<img src="images/jjzyx4.png" alt="">
</div>
<div class="wordbox">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票(赠送旅游意外险…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<span class="tag">机票</span>
<img src="images/jjzyx5.png" alt="">
</div>
<div class="wordbox">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票(赠送旅游意外险…
</div>
</a>
</li>
<li class="pro-grid">
<a href="">
<div class="picbox">
<span class="tag">机票</span>
<img src="images/jjzyx6.png" alt="">
</div>
<div class="wordbox">
北京/上海/南京/杭州直飞巴厘岛5-7天往返含税机票(赠送旅游意外险…
</div>
</a>
</li>
<li class="more-grid">
<a href="">
<p>查看更多</p>
<p>机酒自由行产品</p>
<span class="iconfont">&#xe619;</span>
<ul>
<li>机票</li>
<li>酒店</li>
<li>机+酒</li>
<li>游轮</li>
</ul>
</a>
</li>
</ul>
</div>
</div>
</section>
 
<!-- 当地玩乐 -->
<section class="ddwl content-part common-style">
<div class="center-wrap">
<div class="hd clearfix">
<h2>当地玩乐</h2>
<em>像当地人一样,体验本土的吃喝玩乐</em>
<nav>
<ul>
<li class="current"><a href="">国内</a></li>
<li><a href="">日本</a></li>
<li><a href="">瑞士</a></li>
<li><a href="">新西兰</a></li>
<li><a href="">澳大利亚</a></li>
<li><a href="">柬埔寨</a></li>
<li><a href="">泰国</a></li>
</ul>
</nav>
</div>
<div class="bd">
<div class="col">
<div class="bigpicbox">
<img src="images/ddwl1.png" alt="">
<div class="info">
<p class="proname">
[亲子佳选]泰国清迈夜间动物园/Night Safari(可选接送;导游;长颈鹿餐厅)
</p>
<div class="bottom clearfix">
<p class="tag">城市玩乐</p>
<p class="price"><strong>199</strong>元起</p>
</div>
</div>
</div>
<div class="grid">
<a href="">
<div class="picbox">
<img src="images/ddwl2.png" alt="">
</div>
<div class="wordbox">
[樱花季] 北京/天津直飞东京/大阪/名古屋/福冈/广岛/北海道/冲绳往返…
</div>
</a>
</div>
</div>
<div class="col">
<div class="grid">
<a href="">
<div class="picbox">
<img src="images/ddwl3.png" alt="">
</div>
<div class="wordbox">
[网红新选] 泰国清迈黑白蓝庙一日游清莱黑庙 白庙 蓝庙 温泉驿站中文导游+酒店接送+餐赠小…
</div>
</a>
</div>
<div class="grid">
<a href="">
<div class="picbox">
<img src="images/ddwl4.png" alt="">
</div>
<div class="wordbox">
[全岛接送+中文导游] 泰国普吉岛+皇帝岛+珊瑚岛一日游双体帆船海钓 [帆船晚会+浮潜]
</div>
</a>
</div>
<div class="grid">
<a href="">
<div class="picbox">
<img src="images/ddwl5.png" alt="">
</div>
<div class="wordbox">
享行之旅|泰国苏梅岛一日游 越野车丛林环岛之旅 骑大象纳蒙瀑布 骑大象纳蒙瀑布
</div>
</a>
</div>
</div>
<div class="col">
<div class="grid">
<a href="">
<div class="picbox">
<img src="images/ddwl6.png" alt="">
</div>
<div class="wordbox">
[樱花季] 北京/天津直飞东京/大阪/名古屋/福冈/广岛/北海道/冲绳往返…
</div>
</a>
</div>
<div class="more-grid">
<a href="">
<p>查看更多</p>
<p>机酒自由行产品</p>
<span class="iconfont">&#xe619;</span>
<ul>
<li>WiFi/电话卡</li>
<li>交通票券</li>
<li>景点门票</li>
<li>特色体验</li>
</ul>
</a>
</div>
</div>
</div>
</div>
</section>
 
<!-- 特色当地体验 -->
<section>
<div class="center-wrap">
<div class="hd">
<h2>特色当地体验</h2>
</div>
<div class="bd">
<ul>
<li>
<a href="">
<div class="picbox">
<img src="images/tsddty1.png" alt="">
</div>
<div class="wordbox">
<p class="proname">
香港迪士尼乐园门票(一日 / 两日) - 无需换票扫码入园)
</p>
<p>
<span class="score">★ 4.8</span>
<span class="comment">(92833评价)2334.69k 人参加过</span>
</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="images/tsddty2.png" alt="">
</div>
<div class="wordbox">
<p class="proname">
罗马金宫剧场人妖秀
</p>
<p>
<span class="score">★ 4.8</span>
<span class="comment">(92833评价)2334.69k 人参加过</span>
</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="images/tsddty3.png" alt="">
</div>
<div class="wordbox">
<p class="proname">
京都和服体验 - 梦馆
</p>
<p>
<span class="score">★ 4.8</span>
<span class="comment">(92833评价)2334.69k 人参加过</span>
</p>
</div>
</a>
</li>
<li>
<a href="">
<div class="picbox">
<img src="images/tsddty4.png" alt="">
</div>
<div class="wordbox">
<p class="proname">
英国巨石阵 & 温莎城堡 & 巴斯罗马浴场一日游
</p>
<p>
<span class="score">★ 4.8</span>
<span class="comment">(92833评价)2334.69k人参加过</span>
</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</section>
</body>
</html>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
.site-head{
min-width1152px;
height150px;
}
 
.site-head .topbar{
min-width1152px;
height32px;
background-color:#383D42;
}
 
/* 所有链接都是一样的颜色 */
.site-head .topbar a{
color#FFFFFF;
}
 
.site-head .topbar .center-wrap .shortcut-links{
floatleft;
height32px;
line-height32px;
}
 
/* 此处应该使用子选择器 不能使用后代选择器 因为li中会有嵌套的li标签 */
.site-head .topbar .center-wrap .shortcut-links > ul > li{
floatleft;
font-size12px;
margin-right18px;
}
 
/* 给下来图标预留空间 */
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu{
padding-right:12px;
/* 下拉小三角形是相对字体进行浮动的 此处设置子绝父相*/
position:relative;
}
 
 
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .arrow{
positionabsolute;
width12px;
height12px;
right0;
top:50%;
margin-top-6px;
transition: all .2s linear 0s;
}
 
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu:hover .arrow{
transform: rotate(180deg);
}
 
 
/* 盒子1压盖盒子2 */
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .arrow b{
positionabsolute;
left4px;
top2px;
width6px;
height6px;
background-colorwhite;
transform: rotate(45deg);
}
 
 
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .arrow i{
positionabsolute;
left4px;
top0.5px;
width6px;
height6px;
background-color#383D42;
transform: rotate(45deg);
}
/* 设置下拉菜单的位置 */
/* 默认不显示  只有鼠标hover时显示 */
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .menu{
positionabsolute;
top:30px;
displaynone;
/* 压盖其他盒子 */
z-index9999;
box-shadow: 0 4px 8px 0;
background-colorwhite;
padding-top10px;
padding-left10px;
}
 
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu:hover .menu{
displayblock;
}
 
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .sqmenu{
width121px;
}
 
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .scmenu{
width80px;
}
 
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .jdmsmenu{
width80px;
}
 
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .menu .menu-list li{
height20px;
line-height18px;
margin-bottom2px;
}
 
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .menu .menu-list li a{
font-size12px;
color#1C1F21;
line-height20px;
}
 
.site-head .topbar .center-wrap .shortcut-links > ul > li.have-menu .menu .menu-list li a:hover{
color: orange;
}
 
/* 登录小图标位置 */
.site-head .topbar .center-wrap .topbar-r{
width225px;
height32px;
floatright;
}
 
.site-head .topbar .center-wrap .topbar-r a,.site-head .topbar .center-wrap .topbar-r span{
margin-right11px;
font-size15px;
}
 
.site-head .topbar .center-wrap .topbar-r a{
margin-right11px;
line-height32px;
}
 
.site-head .topbar .center-wrap .topbar-r a:last-child{
margin-right0px;
}
 
.site-head .topbar .topbar-r a:nth-child(6),.site-head .topbar .topbar-r a:nth-child(7){
font-size12px;
line-height32px;
}
 
.site-head .main-nav{
min-width1152px;
height40px;
background-color#20BD9A;
}
 
.site-head .main-nav ul li{
floatleft;
margin-right18px;
}
 
/* 设置链接字体和颜色 */
.site-head .main-nav ul li a{
font-size16px;
color#FFFFFF;
text-alignjustify;
line-height40px;
}
 
/* 给下拉图标预留空间 */
.site-head .main-nav ul li.have-menu{
padding-right:16px;
/* 下拉小三角形是相对字体进行浮动的 此处设置子绝父相*/
position:relative;
}
 
/* 使用一个盒子的边框就能完成三角形的制作 使用伪元素*/
.site-head .main-nav ul li.have-menu::after{
content'';
width0px;
height0px;
positionabsolute;
right0;
top18px;
border6px solid transparent;
/* 如果不去掉下边框 那么盒子旋转时就会绕着正方形的中心点旋转 */
border-bottomnone;
border-top-colorwhite;
transition: all .2s ease 0s;
}
 
.site-head .main-nav ul li.have-menu:hover:after{
transform: rotate(180deg);
}
 
/* 设置下拉菜单的位置 */
.site-head .main-nav ul li.have-menu .menu{
positionabsolute;
/* 要保证子盒子与父盒子之间没有缝隙  否则会导致鼠标移开之后菜单消失掉情况 */
top:30px;
displaynone;
/* 压盖其他盒子 */
z-index9999;
box-shadow: 0 4px 8px 0;
background-colorwhite;
padding:10px;
}
 
.site-head .main-nav ul li.have-menu:hover .menu{
displayblock;
}
.site-head .main-nav ul li.have-menu .menu dt{
font-size14px;
}
 
 
/* 这里需要单独设置a标签的样式 因为在reset中我们将a标签自带的样式统一清除了 */
.site-head .main-nav ul li.have-menu .menu dd a{
font-size12px;
color#1C1F21;
line-height20px;
}
 
/* 每个下拉菜单需单独设置宽度 */
.site-head .main-nav ul li.have-menu .jjzyxmenu{
width160px;
}
 
.site-head .main-nav ul li.have-menu .gtymenu{
width106px;
}
 
.site-head .main-nav ul li.have-menu .ddwlmenu{
width172px;
}
 
.site-head .main-nav ul li.have-menu .sdlymenu{
width118px;
}
/* 标题部分 */
.site-head .header-con{
width100%;
height78px;
background-color#FFFFFF;
/* 让标题居中 */
padding21px 0;
}
 
.site-head .header-con h1{
floatleft;
font-size24px;
color#20BD9A;
text-alignjustify;
line-height36px;
font-weightbold;
}
 
.site-head .header-con .soso-box{
floatleft;
margin-left:20px;
width405px;
/* 让搜索框居中 */
padding-top6px;
}
 
.site-head .header-con .soso-box input{
floatleft;
opacity: 0.3;
border1px solid #20BD9A;
border-radius: 4px 0 0 4px;
width350px;
height28px;
/* 取消默认的外线(外线是文本框特有的东西) */
outlinenone;
padding-left:10px;
}
 
.site-head .header-con .soso-box .btn{
floatleft;
width32px;
height30px;
background-color#20BD9A;
border-radius: 0 4px 4px 0;
text-aligncenter;
line-height30px;
font-size18px;
colorwhite;
}
 
/* 页面内容区域 */
.banner{
/*子绝父相 */
positionrelative;
overflowhidden;
}
 
.banner .carousel_list{
width600%;
overflowhidden;
height100%;
}
 
.banner .carousel_list li{
floatleft;
width16.666%;
 
}
 
.banner .carousel_list img{
width100%;
height100%;
/*白边的处理*/
displayblock;
}
 
.banner .center-wrap{
width:1152px;
positionabsolute;
top:0;
left0;
left:50%;
margin-left-576px;
/* 板心的高度设置为100% 因为导航列表高度是按百分比等分的 */
height100%;
}
 
.banner .center-wrap .banner-nav{
height100%;
width652px;
positionrelative;
}
 
 
.banner .center-wrap .banner-nav>ul{
height100%;
 
}
 
.banner .center-wrap .banner-nav>ul>li{
positionrelative;
width296px;
height16.666%;
background-color: rgba(0,0,0,.35);
border-bottom1px solid #9e9e9e;
/* box-sizing:border-box 属性的作用就是让height属性是盒子的总高度,这种情况:在盒子的高度高度是百分比写的,但是盒子有边框时候 */
/* 此时就要让盒子的边框涵盖在height里面,就要使用box-sizing 属性 */
box-sizing: border-box;
}
 
/* 处理底边 */
.banner .center-wrap .banner-nav>ul>li:last-child{
border-bottomnone;
}
 
.banner .center-wrap .banner-nav>ul>li dl{
positionabsolute;
top:50%;
left42px;
margin-top-24px;
color#FFFFFF;
}
.banner .center-wrap .banner-nav>ul>li dl dt{
font-size18px;
line-height26px;
 
}
.banner .center-wrap .banner-nav>ul>li dl dd{
font-size14px;
line-height22px;
}
 
 
/*导航小图标  使用css精灵和伪元素实现*/
 
.banner .center-wrap .banner-nav>ul>li::before{
content'';
width24px;
height24px;
background:url(../images/icons.png);
position:absolute;
top:50%;
margin-top-12px;
left10px;
}
 
.banner .center-wrap .banner-nav>ul>li.hot::before{
background-position-29px -399px;
}
 
.banner .center-wrap .banner-nav>ul>li.hk::before{
background-position-28px -217px;
}
 
.banner .center-wrap .banner-nav>ul>li.jp::before{
background-position-25px -171px;
}
 
.banner .center-wrap .banner-nav>ul>li.as::before{
background-position-28px -262px;
}
 
.banner .center-wrap .banner-nav>ul>li.eu::before{
background-position-29px -351px;
}
 
.banner .center-wrap .banner-nav>ul>li.au::before{
background-position-28px -305px;
}
 
.banner .center-wrap .banner-nav>ul>li:hover{
background-color: rgba(0,0,0,.55);
}
 
/* 图片轮播的按钮 */
.banner .center-wrap .leftbtn{
/* 按钮是相对center-wrap定位 使用子绝父绝 */
width28px;
height44px;
position:absolute;
top:50%;
margin-top-22px;
left-40px;
background:url(../images/icons.png) no-repeat -21px -94px;
}
 
.banner .center-wrap .rightbtn{
/* 按钮是相对center-wrap定位 使用子绝父绝 */
width28px;
height44px;
position:absolute;
top:50%;
margin-top-22px;
right-40px;
background:url(../images/icons.png) no-repeat -21px -29px;
}
 
/* 鼠标hover时透明度降低 */
.banner .center-wrap .leftbtn:hover ,.banner .center-wrap .rightbtn:hover{
opacity: 0.8;
}
 
 
.banner .center-wrap .banner-nav .menus-box .menu{
/* 默认隐藏 */
displaynone;
width356px;
height100%;
background-color: rgba(0,0,0,.45);
positionabsolute;
/* top: 0; */
bottom0;
left296px;
padding16px;
box-sizing: border-box;
colorwhite;
z-index99999;
}
 
.banner .center-wrap .banner-nav .menus-box .menu dl{
margin-bottom12px;
}
 
.banner .center-wrap .banner-nav .menus-box .menu dt{
font-size16px;
line-height24px;
}
 
.banner .center-wrap .banner-nav .menus-box .menu dd{
font-size14px;
line-height22px;
}
 
.banner .center-wrap .banner-nav .menus-box .menu dd a{
color#FFFFFF;
}
/* 有current类名的menu是显示的 */
.banner .center-wrap .banner-nav .menus-box .menu.current {
/* display: block; */
}
 
/* 鼠标hover 导航是显示对应菜单 此时菜单必须放置在导航下面才显示*/
.banner .center-wrap .banner-nav>ul>li.hot:hover .menus-box .menu{
displayblock;
}
 
 
.hot-ads .center-wrap ul li{
floatleft;
width264px;
height110px;
margin:32px 32px 32px 0;
}
 
.hot-ads .center-wrap ul li:last-child{
margin-right0;
}
 
 
.xxsw{
padding-top40px;
height698px;
background-color#F7F7F7;
}
 
.content-part .center-wrap .hd{
margin-bottom32px;
}
 
.content-part .center-wrap .hd h2{
floatleft;
}
 
.content-part .center-wrap .hd em{
floatleft;
positionrelative;
top20px;
left10px;
color#1C1F21;
}
 
.content-part .center-wrap .hd h2{
font-size36px;
font-weightbold;
color#1C1F21;
line-height54px;
margin-right12px;
}
 
 
.xxsw .center-wrap ul li{
width264px;
height270px;
margin-right32px;
floatleft;
margin-bottom32px;
backgroundwhite;
}
 
.xxsw .center-wrap ul li:nth-child(4n){
margin-right0;
}
 
 
.xxsw .center-wrap ul li a .wordbox{
font-size14px;
color#1C1F21;
line-height22px;
padding15px;
}
 
.xxsw .center-wrap ul li:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
 
/* 机酒自由行  */
.content-part{
padding-top40px;
height738px;
background-color: rgba(2552552550.829);
}
 
.content-part .center-wrap .hd nav{
floatright;
/* width: 546px; */
}
 
.content-part .hd nav ul {
padding-top16px;
}
 
.content-part .center-wrap .hd nav ul li{
floatleft;
margin-right14px;
font-size14px;
}
 
.content-part .center-wrap .hd nav ul li a{
color: rgba(0000.877);
}
 
.content-part .hd nav ul li.current {
border-bottom4px solid #20BD9A;
padding-bottom4px;
}
.content-part .hd nav ul li.current a{
color#20BD9A;
}
 
.jjzyx .center-wrap .bd>ul>li{
background#FFFFFF;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
floatleft;
margin-right32px;
margin-bottom32px;
positionrelative;
}
 
.jjzyx .center-wrap .bd>ul>li .tag{
width74px;
height40px;
opacity: 0.6;
background#1C1F21;
font-size14px;
color#FFFFFF;
text-aligncenter;
line-height40px;
positionabsolute;
left0;
top126px;
}
 
 
.jjzyx .center-wrap .bd>ul>li.pro-grid .tag{
top:144px;
}
 
.common-style .center-wrap .bd>ul>li.big-grid .info{
width560px;
height103px;
font-size14px;
color#FFFFFF;
line-height22px;
positionabsolute;
bottom0;
padding-top30px;
padding-left26px;
box-sizing: border-box;
}
 
.jjzyx .center-wrap .bd>ul>li.big-grid{
width560px;
height270px;
}
 
.jjzyx .center-wrap .bd>ul>li.pro-grid{
width264px;
height270px;
}
 
.jjzyx .center-wrap .bd>ul>li.pro-grid .wordbox{
font-size14px;
color#1C1F21;
line-height22px;
padding15px;
}
 
.content-part .more-grid{
width264px;
height270px;
background-image: linear-gradient(180deg, #34E3BC 0%#15AF7A 98%);
box-sizing: border-box;
positionrelative;
}
.content-part .more-grid a {
displayblock;
height270px;
padding-top46px;
box-sizing: border-box;
}
.content-part .more-grid p {
text-aligncenter;
colorwhite;
line-height24px;
font-size15px;
}
.content-part .more-grid .iconfont {
positionabsolute;
font-size48px;
colorwhite;
width48px;
height48px;
left50%;
top118px;
margin-left-24px;
}
/* 鼠标触碰more-grid盒子之后,iconfont进行蹦跳动画 */
.content-part .more-grid:hover .iconfont {
animation: ud .4s ease 0s infinite alternate;
}
@keyframes ud{
from {
transform: translateY(-10px);
}
to {
transform: translateY(10px);
}
}
.content-part .more-grid ul {
margin-top112px;
padding-left25px;
}
.content-part .more-grid ul li {
colorwhite;
floatleft;
border-right1px solid white;
padding0 9px;
height14px;
line-height14px;
font-size14px;
}
.content-part .more-grid ul li:last-child {
border-rightnone;
}
 
.jjzyx .center-wrap .bd>ul>li:nth-child(3),
.jjzyx .center-wrap .bd>ul>li:nth-child(7){
margin-right0;
}
 
.ddwl{
background#F7F7F7;
}
 
.ddwl .center-wrap .hd nav>ul>li.current{
width56px;
text-aligncenter;
}
 
.ddwl .center-wrap .bd .col{
floatleft;
width364px;
height480px;
margin-right30px;
}
 
.ddwl .center-wrap .bd .col:last-child{
margin-right0;
}
 
 
.ddwl .center-wrap .bd .col .bigpicbox{
backgroundwhite;
width364px;
height270px;
positionrelative;
margin-bottom30px;
}
 
.ddwl .center-wrap .bd .col .bigpicbox .info{
width364px;
height104px;
positionabsolute;
bottom0;
padding21px 17px;
ont-size14px;
color#FFFFFF;
line-height22px;
box-sizing: border-box;
}
 
.ddwl .center-wrap .bd .col .bigpicbox .info .bottom .tag{
floatleft;
}
 
 
.ddwl .center-wrap .bd .col .bigpicbox .info .bottom .price{
floatright;
}
 
 
.ddwl .center-wrap .bd .col .grid {
width364px;
height120px;
positionrelative;
backgroundwhite;
margin-bottom30px;
 
}
 
.ddwl .center-wrap .bd .col .grid .picbox{
floatleft;
positionabsolute;
left0;
}
 
 
.ddwl .center-wrap .bd .col .grid a{
font-size14px;
color#000000;
line-height22px;
}
 
 
.ddwl .center-wrap .bd .col .grid .wordbox{
floatright;
width244px;
height120px;
positionabsolute;
right:0;
padding26px 18px;
box-sizing: border-box;
}
 
.ddwl .center-wrap .bd .col .more-grid{
width364px;
height270px;
background-image: linear-gradient(180deg, #FF6374 1%#FF7368 98%);
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.08);
}
 
 
.ddwl .center-wrap .bd .col .more-grid ul li{
padding-left10px;
}

相关截图:

https://img1.sycdn.imooc.com//climg/623e7f4d093f132c13860736.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕久久 2022-03-26 11:00:41

同学你好,没明白同学的问题,能详细描述吗?公共样式怎么了?哪里有问题?哪里有疑惑?效果不正常?请同学详细描述一下,老师再为你解答。

祝学习愉快!

  • 提问者 qq_慕慕0057983 #1

    https://img1.sycdn.imooc.com//climg/623e8831098ff0a214340746.jpg

    2022-03-26 11:27:52
  • 好帮手慕久久 回复 提问者 qq_慕慕0057983 #2

    同学你好,由于如下样式中,设置了.more-grid的背景色是白色:

    https://img1.sycdn.imooc.com//climg/623e8b7a092e565e07180218.jpg

    背景色是白色,文字、图标也是白色,所以看不到。

     .jjzyx .center-wrap .bd>ul>li这个选择器的权重比.content-part .more-grid的大,所以.more-grid的背景色受.jjzyx .center-wrap .bd>ul>li的控制:

    https://img1.sycdn.imooc.com//climg/623e8c480935523709130178.jpg

    建议添加一个权重大的选择器,设置背景色:

    https://img1.sycdn.imooc.com//climg/623e8c0909066fd010920288.jpg

    祝学习愉快!

    2022-03-26 11:45:16
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师
插入代码