style.css 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. .app {
  6. width: 100%;
  7. /* margin: 50px 0; */
  8. text-align: center;
  9. }
  10. .app .scroll {
  11. position: relative;
  12. display: inline-block;
  13. width: 100%;
  14. height: 100%;
  15. }
  16. .app .scroll .img {
  17. display: none;
  18. width: 100%;
  19. }
  20. .app .scroll .current {
  21. display: block;
  22. }
  23. .scroll .lf {
  24. position: absolute;
  25. top: 50%;
  26. left: 10px;
  27. background-image: url('img/arrow.png');
  28. background-position: -83px 0;
  29. width: 41px;
  30. height: 69px;
  31. cursor: pointer;
  32. transform: translateY(-50%);
  33. }
  34. .scroll .lr {
  35. position: absolute;
  36. top: 50%;
  37. right: 10px;
  38. background-image: url('img/arrow.png');
  39. background-position: -123px 0;
  40. width: 41px;
  41. height: 69px;
  42. cursor: pointer;
  43. transform: translateY(-50%);
  44. }
  45. .dots {
  46. position: absolute;
  47. bottom: 15px;
  48. right: 20px;
  49. width: 160px;
  50. }
  51. .dots>span {
  52. display: inline-block;
  53. box-sizing: border-box;
  54. width: 11px;
  55. height: 11px;
  56. border: 3px solid rgba(204, 204, 204, 0.2);
  57. border-radius: 15px;
  58. cursor: pointer;
  59. }
  60. .dots>span:not(:last-child) {
  61. margin-right: 5px;
  62. }
  63. /* 小圆点的颜色 */
  64. .dots .square {
  65. background: #f46;
  66. }