app.css 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. .slider {
  2. position: relative;
  3. width: 1200px;
  4. margin: 0 auto 20px;
  5. -webkit-user-select: none;
  6. -khtml-user-select: none;
  7. -moz-user-select: -moz-none;
  8. -o-user-select: none;
  9. user-select: none;
  10. }
  11. .frame {
  12. position: relative;
  13. width: 1200px;
  14. margin: 0 auto;
  15. overflow: hidden;
  16. white-space: nowrap;
  17. padding-top: 20px;
  18. }
  19. .frame li {
  20. position: relative;
  21. display: inline-block;
  22. width: 280px;
  23. height: 200px;
  24. }
  25. .frame li img{ width: 100%;height: 100%;}
  26. .frame li div.text{z-index: 3; background: rgba(0,0,0,0.4); height: 35px; line-height: 35px; color: #fff; text-align: center; position: absolute; left: 0px; bottom: 0px; width: 100%; font-size: 15px;}
  27. .slides {
  28. display: inline-block;
  29. }
  30. .multislides li{
  31. width: 280px;
  32. height: 200px;
  33. margin-right: 26px;
  34. }
  35. .multislides li:last-child {
  36. margin-right: 0;
  37. }
  38. .prev, .next {
  39. position: absolute;
  40. top: 50%;
  41. margin-top: -10px;
  42. display: block;
  43. cursor: pointer;
  44. background: rgba(0,0,0,0.5);
  45. height: 80px;
  46. width: 25px;
  47. text-align: center;
  48. }
  49. .next img,.prev img{ position: relative; top: 50%; margin-top: -20px;}
  50. .next {
  51. right: 0;
  52. }
  53. .prev {
  54. left: 0;
  55. }