style.css 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. *{
  2. margin:0;
  3. padding:0;
  4. font-family:microsoft yahei,'黑体';
  5. }
  6. #youdaoBanner{
  7. margin-top:15vh;
  8. height:85vh;
  9. position:relative;
  10. }
  11. #youdaoBanner .swiper-slide{
  12. width: 315px;
  13. padding:0 30px;
  14. position:relative;
  15. border-radius: 5px;
  16. overflow: hidden;
  17. }
  18. #youdaoBanner .swiper-slide .bg{
  19. height: 200px;
  20. background-repeat: no-repeat;
  21. background-position: center top;
  22. position:relative;
  23. overflow:hidden;
  24. }
  25. #youdaoBanner .swiper-slide .white-top{
  26. background:url(../images/white-top.png);
  27. position:absolute;
  28. z-index:900;
  29. top:0;
  30. left:0;
  31. width:100%;
  32. height:8px;
  33. }
  34. #youdaoBanner .swiper-slide .white-bottom{
  35. background:url(../images/white-bottom.png);
  36. position:absolute;
  37. z-index:900;
  38. bottom:0;
  39. left:0;
  40. width:100%;
  41. height:8px;}
  42. #youdaoBanner .bg .black-mask{
  43. width:315px;
  44. height:200px;
  45. position:absolute;
  46. z-index:1;
  47. top:0;
  48. left:0;
  49. background:url(../images/black-mask.png);
  50. border-radius: 10px;
  51. }
  52. #youdaoBanner .bg:hover .black-mask{
  53. display:none;
  54. }
  55. #youdaoBanner .swiper-button-prev,#youdaoBanner .swiper-button-next{
  56. position:absolute;
  57. z-index:999;
  58. top:85%;
  59. left:35%;
  60. margin-top:-30px;
  61. margin-left:-30px;
  62. width: 60px;
  63. height: 60px;
  64. background:url(../images/swiper-btn.png);
  65. cursor:pointer;
  66. /* display:none; */
  67. }
  68. #youdaoBanner .swiper-button-next{
  69. background-position:0 -60px;
  70. left:65%;
  71. /* right:10px; */
  72. }
  73. #youdaoBanner:hover .swiper-button-prev,#youdaoBanner:hover .swiper-button-next{
  74. display:block;
  75. }
  76. #youdaoBanner .slide1 .bg{background-image:url(../images/banner/Obanner1.jpg);background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;}
  77. #youdaoBanner .slide2 .bg{background-image:url(../images/banner/Obanner2.jpg);background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;}
  78. #youdaoBanner .slide3 .bg{background-image:url(../images/banner/Obanner3.jpg);background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;}
  79. #youdaoBanner .slide4 .bg{background-image:url(../images/banner/Obanner4.jpg);background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;}
  80. #youdaoBanner .slide5 .bg{background-image:url(../images/banner/Obanner5.jpg);background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;}
  81. #youdaoBanner .slide6 .bg{background-image:url(../images/banner/Obanner6.jpg);background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;}
  82. #youdaoBanner .swiper-slide .bg:hover{
  83. /* background: url(../images/fire.png) #fc6760 340px 210px no-repeat; */
  84. }
  85. #youdaoBanner .info{
  86. position: absolute;
  87. padding:30px;
  88. z-index:999;
  89. bottom: -149px;
  90. color:#fff;
  91. font-size:14px;
  92. padding-top:30px;
  93. }
  94. #youdaoBanner .info .date{
  95. font-size: 14px;
  96. margin-bottom: 16px;
  97. }
  98. #youdaoBanner .info h3{
  99. margin-bottom: 18px;
  100. }
  101. #youdaoBanner .info h3 a{
  102. color: #fff;
  103. font-size: 24px;
  104. font-weight: 500;
  105. text-decoration:none;
  106. }
  107. #youdaoBanner .info p{
  108. text-indent:2em;
  109. font-size: 16px;
  110. }
  111. #youdaoBanner .info .btn{
  112. margin-top: 40px;
  113. display:block;
  114. color: #fff;
  115. font-size: 16px;
  116. text-align:center;
  117. width:106px;
  118. height:42px;
  119. line-height: 40px;
  120. text-decoration:none;
  121. background:url(../images/link_bg.png) no-repeat;
  122. }
  123. #youdaoBanner .info .btn:hover{
  124. color:#000;
  125. background:url(../images/link_bg.png) no-repeat left -42px;
  126. }