qietu.css 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. /*reset*/
  2. html{-webkit-text-size-adjust:none; /*解决chrome浏览器下字体不能小于12px*/}
  3. body{ color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif;}
  4. a{outline:none; text-decoration:none;} a:hover{ text-decoration:underline;}
  5. html{zoom:1;}html *{outline:0;zoom:1;} html button::-moz-focus-inner{border-color:transparent!important;}
  6. body{overflow-x: hidden; font-size:12px;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{/*border-collapse:collapse;border-spacing:0;*/} fieldset,a img{border:0;} address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;} li{list-style:none;} caption,th{text-align:left;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} q:before,q:after{content:'';}
  7. input[type="submit"], input[type="reset"], input[type="button"], button { -webkit-appearance: none; /*去掉苹果的默认UI来渲染按钮*/} em,i{ font-style:normal;}
  8. /*common*/
  9. .clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden; }.clearfix {display:block;}.clear{ clear:both;}
  10. .colwrapper { overflow:hidden; zoom:1 /*for ie*/; margin:5px auto; }
  11. .strong{ font-weight: bold;} .left{ float: left;} .right{ float: right;} .center{ margin:0 auto; text-align:center;}
  12. .show{ display:block; visibility:visible;}.hide{ display: none; visibility:hidden;}
  13. .block{ display:block;} .inline{ display:inline;}
  14. .break{ word-wrap:break-word;overflow:hidden; /*word-break:break-all;*/}
  15. .tal{ text-align:left} .tar{ text-align:right;}
  16. /*文字两侧对齐*/
  17. .justify {
  18. text-align:justify;
  19. text-justify:distribute-all-lines;/*ie6-8*/
  20. text-align-last:justify;/* ie9*/
  21. -moz-text-align-last:justify;/*ff*/
  22. -webkit-text-align-last:justify;/*chrome 20+*/
  23. }
  24. .toe{
  25. /*超出省略号*/
  26. word-break:keep-all;
  27. white-space:nowrap;
  28. overflow:hidden;
  29. text-overflow:ellipsis;
  30. }
  31. @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/
  32. .justify:after{
  33. content:".";
  34. display: inline-block;
  35. width:100%;
  36. overflow:hidden;
  37. height:0;
  38. }
  39. }
  40. a{ color:inherit; text-decoration: none;}
  41. a:hover{ color:#3e6ed4; text-decoration: none;}
  42. body{font-family: "Microsoft YaHei",sans-serif;}
  43. .css3{
  44. /*transition: all 0.3s ease-in-out 0s;*/
  45. -webkit-transform:translate3d(0, -20px, 0);
  46. -ms-transform:translate3d(0, -20px, 0);
  47. transform:translate3d(0, -20px, 0);
  48. -webkit-transition-property:opacity, -webkit-transform;
  49. transition-property:opacity, transform;
  50. -webkit-transition-duration:1000ms;
  51. transition-duration:1000ms;
  52. -webkit-transition-timing-function:cubic-bezier(0.25, 0.46, 0.33, 0.98);
  53. transition-timing-function:cubic-bezier(0.25, 0.46, 0.33, 0.98);
  54. -webkit-transition-delay:800ms;
  55. transition-delay:800ms
  56. }
  57. .css3.animated{
  58. -webkit-transform:translate3d(0, 0, 0);
  59. -ms-transform:translate3d(0, 0, 0);
  60. transform:translate3d(0, 0, 0);
  61. }
  62. @media screen and (max-width: 650px) {
  63. }
  64. @media screen and (max-width: 480px) {
  65. }
  66. /*手机下汉堡菜单*/
  67. .gh {
  68. height:34px;
  69. width:34px;
  70. margin-right:30px;
  71. position:absolute;
  72. right: 0; top: 20px;
  73. transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s;
  74. -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s;
  75. -ms-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1) 0s;
  76. cursor:pointer;
  77. display: none;
  78. }
  79. .gh span {
  80. background-color: #fff;
  81. display: block;
  82. height: 2px;
  83. margin-top: -2px;
  84. position: relative;
  85. top: 50%;
  86. transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
  87. -webkit-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
  88. -ms-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
  89. width: 100%;
  90. }
  91. .gh span:after, .gh span:before {
  92. background-color: #fff;
  93. content: "";
  94. display: block;
  95. height: 2px;
  96. left: 0;
  97. position: absolute;
  98. transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
  99. -webkit-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
  100. -ms-transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1) 0s;
  101. width:100%;
  102. }
  103. .gh span:after {
  104. top:10px;
  105. }
  106. .gh span:before {
  107. top:-10px;
  108. }
  109. #mobile-menu-toggle{
  110. display: none;
  111. }
  112. #mobile-menu-toggle:checked + .gh span:after,
  113. #mobile-menu-toggle:checked + .gh span:before {
  114. top: 0;
  115. }
  116. #mobile-menu-toggle:checked + .gh span:before {
  117. transform: translateY(0px) rotate(-45deg);
  118. -webkit-transform: translateY(0px) rotate(-45deg);
  119. -ms-transform: translateY(0px) rotate(-45deg);
  120. }
  121. #mobile-menu-toggle:checked + .gh span:after {
  122. transform: translateY(0px) rotate(45deg);
  123. -webkit-transform: translateY(0px) rotate(45deg);
  124. -ms-transform: translateY(0px) rotate(45deg);
  125. }
  126. #mobile-menu-toggle:checked + .gh span {
  127. background-color: transparent !important;
  128. }
  129. #mobile-menu-toggle:checked + .gh + .nav{
  130. max-height: 1000px;
  131. }
  132. .nav{
  133. }
  134. .gh+ .nav{
  135. /*height: auto;
  136. background: #2f6ea2;
  137. overflow: hidden;
  138. transition: 0.4s;
  139. padding: 0; max-height: 0;*/
  140. }