Example.css 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. .Example {
  2. width: 100%;
  3. margin-top: 100px;
  4. position: relative;
  5. /* padding: 0 100px; */
  6. /* background-image: url('../img/初级back.png'); */
  7. h1 {
  8. position: relative;
  9. top: 0;
  10. display: inline-block;
  11. font-size: 64px;
  12. font-weight: 500;
  13. line-height: 92.67px;
  14. padding-left: 100px;
  15. /* background: linear-gradient(to right,#3681FC,#fff); */
  16. z-index: 10;
  17. }
  18. h1::after {
  19. content: '';
  20. width: 100%;
  21. padding: 12px 0;
  22. background: linear-gradient(to right, rgba(54, 129, 252, 1), rgba(54, 129, 252, 0));
  23. position: absolute;
  24. top: 72px;
  25. left: 0;
  26. z-index: -1;
  27. }
  28. .Example_content{
  29. background-color: #3681FC;
  30. margin-top: 60px;
  31. position: relative;
  32. .img_title{
  33. position: absolute;
  34. top: -50px;
  35. left: 50%;
  36. transform: translateX(-50%);
  37. img{
  38. width: 80%;
  39. }
  40. }
  41. .bi_arrow_left{
  42. position: absolute;
  43. top: 50%;
  44. left: 25px;
  45. transform: translate(0,-50%);
  46. cursor: pointer;
  47. z-index: 1;
  48. width: 64px;
  49. }
  50. .bi_arrow_right{
  51. position: absolute;
  52. top: 50%;
  53. right: 25px;
  54. transform: translate(0,-50%);
  55. cursor: pointer;
  56. z-index: 1;
  57. width: 64px;
  58. }
  59. .contentStyle{
  60. text-align: center;
  61. padding: 110px 100px 100px;
  62. position: relative;
  63. div{
  64. display: inline-block;
  65. position: absolute;
  66. top: 10px;
  67. left: 50%;
  68. transform: translate(-50%,0);
  69. z-index: 10;
  70. img{
  71. width: 80%;
  72. }
  73. }
  74. img{
  75. display: inline-block;
  76. max-width: 25%;
  77. }
  78. }
  79. }
  80. }