demo.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. html, body, div, span, applet, object, iframe,
  2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3. a, abbr, acronym, address, big, cite, code,
  4. del, dfn, em, img, ins, kbd, q, s, samp,
  5. small, strike, strong, sub, sup, tt, var,
  6. b, u, i, center,
  7. dl, dt, dd, ol, ul, li,
  8. fieldset, form, label, legend,
  9. table, caption, tbody, tfoot, thead, tr, th, td,
  10. article, aside, canvas, details, embed,
  11. figure, figcaption, footer, header, hgroup,
  12. menu, nav, output, ruby, section, summary,
  13. time, mark, audio, video {
  14. margin: 0;
  15. padding: 0;
  16. border: 0;
  17. font: inherit;
  18. font-size: 100%;
  19. vertical-align: baseline;
  20. }
  21. html {
  22. line-height: 1;
  23. }
  24. ol, ul {
  25. list-style: none;
  26. }
  27. table {
  28. border-collapse: collapse;
  29. border-spacing: 0;
  30. }
  31. caption, th, td {
  32. text-align: left;
  33. font-weight: normal;
  34. vertical-align: middle;
  35. }
  36. q, blockquote {
  37. quotes: none;
  38. }
  39. q:before, q:after, blockquote:before, blockquote:after {
  40. content: "";
  41. content: none;
  42. }
  43. a img {
  44. border: none;
  45. }
  46. article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  47. display: block;
  48. }
  49. @media screen and (min-width:801px){
  50. html{
  51. font-size:14.75px;
  52. }
  53. body{
  54. width: 100%;
  55. height: 947px;
  56. background: url(../images/index_bg.png);
  57. background-size:100% 100%;
  58. }
  59. .turntable-bg {
  60. width: 650px;
  61. height: 600px;
  62. margin: 0 auto;
  63. position: relative;
  64. top:200px;
  65. background: url("../images/3.png");
  66. }
  67. .turntable-bg .mask {
  68. width: 454px;
  69. height: 451px;
  70. position: absolute;
  71. left: 116px;
  72. top: 60px;
  73. }
  74. .turntable-bg .pointer {
  75. width: 174px;
  76. height: 228px;
  77. position: absolute;
  78. left: 50%;
  79. top: 50%;
  80. margin-left: -67px;
  81. margin-top: -144px;
  82. z-index: 8;
  83. }
  84. .turntable-bg .rotate {
  85. width: 450px;
  86. height: 450px;
  87. position: absolute;
  88. left: 116px;
  89. top: 60px;
  90. }
  91. }
  92. @media screen and (max-width:800px){
  93. html{
  94. font-size:14.75px;
  95. }
  96. body{
  97. background: url(../images/index_bg.png);
  98. }
  99. .turntable-bg {
  100. width: 350px;
  101. height: 325px;
  102. margin: 0 auto;
  103. position: relative;
  104. top:20px;
  105. background: url("../images/3.png");
  106. background-size:100% 100%;
  107. }
  108. .turntable-bg .mask {
  109. width: 54px;
  110. height: 51px;
  111. position: absolute;
  112. left: 116px;
  113. top: 60px;
  114. /*z-index:9;*/
  115. }
  116. .turntable-bg .pointer {
  117. width: 74px;
  118. height: 100px;
  119. position: absolute;
  120. /*border:1px solid red;*/
  121. left: 180px;
  122. top: 150px;
  123. margin-left: -39px;
  124. margin-top: -50px;
  125. z-index: 8;
  126. }
  127. .turntable-bg .rotate {
  128. width: 250px;
  129. height: 250px;
  130. position: absolute;
  131. left: 60px;
  132. top: 30px;
  133. }
  134. .jjc{
  135. width: 500px;
  136. height: 500px;
  137. background: url(images/paoma1.gif);
  138. background-size: 100%100%;
  139. position: absolute;
  140. top: -250px;
  141. left: 500%;
  142. font-size: 35px;
  143. line-height: 700px;
  144. text-align: center;
  145. color: #fff;
  146. display: none;
  147. }
  148. }