bass.css 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. /**
  2. * @名称:base.css
  3. * @作用:1.初始化浏览器样式
  4. * 2.设置通用样式
  5. */
  6. html{
  7. color: black;
  8. width: 100%;
  9. }
  10. /*重置各元素边距,为什么不用*号?有哪些元素不需要重置边距以及规定盒子模型*/
  11. body,div,
  12. dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
  13. pre,code,form,fieldset,legend,input,textarea,
  14. p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,
  15. footer,header,hgroup,menu,nav,section {
  16. margin:0;
  17. padding:0;
  18. }
  19. *{
  20. box-sizing: border-box;
  21. }
  22. /* 要注意表单元素并不继承父级 font 的问题 */
  23. body,button,input,select,textarea {
  24. font:12px/1.5 Microsoft YaHei,tahoma,arial,\5b8b\4f53;
  25. }
  26. input,select,textarea {
  27. font-size:100%;
  28. }
  29. /* 去掉 table cell 的边距并让其边重合 */
  30. table {
  31. border-collapse:collapse;
  32. border-spacing:0;
  33. }
  34. /* ie bug:th 不继承 text-align */
  35. th {
  36. text-align:inherit;
  37. }
  38. /* 去除默认边框 */
  39. fieldset,img {
  40. border:none;
  41. }
  42. /* ie6 7 8(q) bug 显示为行内表现 */
  43. iframe {
  44. display:block;
  45. }
  46. /* 去掉 firefox 下此元素的边框 */
  47. abbr,acronym {
  48. border:none;
  49. font-variant:normal;
  50. }
  51. /* 一致的 del 样式 */
  52. del {
  53. text-decoration:line-through;
  54. }
  55. address,caption,cite,code,dfn,em,th,var {
  56. font-style:normal;
  57. font-weight:500;
  58. }
  59. /* 去掉列表前的标识,li 会继承 */
  60. ol,ul {
  61. list-style:none;
  62. }
  63. /* 对齐是排版最重要的因素,别让什么都居中 */
  64. caption,th {
  65. text-align:left;
  66. }
  67. /* 来自yahoo,让标题都自定义,适应多个系统应用 */
  68. h1,h2,h3,h4,h5,h6 {
  69. font-size:100%;
  70. font-weight:500;
  71. }
  72. /*在<q></q>标签之间的文字两头加上引号(")*/
  73. q:before,q:after {
  74. content:'';
  75. }
  76. /* 统一上标和下标 */
  77. sub,sup {
  78. font-size:75%;
  79. line-height:0;
  80. position:relative;
  81. vertical-align:baseline;
  82. }
  83. sup {
  84. top:-0.5em;
  85. }
  86. sub {
  87. bottom:-0.25em;
  88. }
  89. /* 让链接在 各种状态下不显示下划线 */
  90. a{
  91. color:#333
  92. }
  93. a:hover,a:visited,a:active,a:link {
  94. text-decoration: none!important
  95. }
  96. /* 默认不显示下划线,保持页面简洁 */
  97. ins,a {
  98. text-decoration:none;
  99. }
  100. /* 去除 ie6 & ie7 焦点点状线 */
  101. a:focus,*:focus {
  102. outline:none;
  103. }
  104. /* 清除浮动 */
  105. .clearfix:before,.clearfix:after {
  106. content:"";
  107. display:table;
  108. }
  109. .clearfix:after {
  110. clear:both;
  111. overflow:hidden;
  112. }
  113. .clearfix {
  114. zoom:1; /* for ie6 & ie7 */
  115. }
  116. .clear {
  117. clear:both;
  118. display:block;
  119. font-size:0;
  120. height:0;
  121. line-height:0;
  122. overflow:hidden;
  123. }
  124. /* 设置显示和隐藏,通常用来与 js 配合 */
  125. .hide {
  126. display:none;
  127. }
  128. .block {
  129. display:block;
  130. }
  131. /* 设置浮动,减少浮动带来的 bug
  132. 设置了float:left的元素允许它的右边存在任何元素同行显示(内联还是块元素)
  133. 但左边是运行任何元素与其同行显示的,哪怕其它元素的代码在前,除非也加上float:left;
  134. 而设置了display:inline的元素允许它的前后存在其它的内联元素同行显示。
  135. 如果代码在其前面的块元素要同行显示,则让前面的元素浮动或者设为display:inline;代码
  136. 在其后的块元素(无论是否浮动),均不能同行显示,除非设置display:inline;
  137. 此外,给块级元素设上display:inline是解决IE6中双倍浮动的方法;
  138. */
  139. .fl,.fr {
  140. display:inline;
  141. }
  142. .fl {
  143. float:left;
  144. }
  145. .fr {
  146. float:right;
  147. }
  148. input::-webkit-outer-spin-button,
  149. input::-webkit-inner-spin-button{
  150. -webkit-appearance: none !important;
  151. margin: 0;
  152. }
  153. input[type="number"]{-moz-appearance:textfield;}
  154. .pointer{
  155. cursor: pointer;
  156. }