css.css 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  1. /*-----------去除默认样式-------------------------------------*/
  2. body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
  3. dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
  4. pre, /* text formatting elements 文本格式元素 */
  5. fieldset, button, input, textarea, lengend /* form elements 表单元素 */
  6. th, td { /* table elements 表格元素 */
  7. margin: 0;
  8. padding: 0;
  9. border: none;
  10. color: #333;
  11. }
  12. body,
  13. button, input, select, textarea {
  14. /* for ie */
  15. /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
  16. font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
  17. /* 用 ascii 字符表示,使得在任何编码下都无问题 */
  18. }
  19. button, input, select, textarea {
  20. font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
  21. }
  22. /*chrome表单自动填充去掉input黄色背景解决方案
  23. 可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的黄色背景;如:*/
  24. input:-webkit-autofill {
  25. -webkit-box-shadow: 0 0 0px 1000px white inset;
  26. border: 1px solid #fff !important;
  27. }
  28. /*只要在样式里面加一句去掉css去掉iPhone、iPad的默认按钮样式就可以了!~*/
  29. input[type="button"], input[type="submit"], input[type="reset"] {
  30. -webkit-appearance: none;
  31. }
  32. /* 定义placeholder文字颜色 */
  33. ::-webkit-input-placeholder { /* WebKit browsers */
  34. color: #b9b9b9;
  35. }
  36. :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  37. color: #b9b9b9;
  38. }
  39. ::-moz-placeholder { /* Mozilla Firefox 19+ */
  40. color: #b9b9b9;
  41. }
  42. :-ms-input-placeholder { /* Internet Explorer 10+ */
  43. color: #b9b9b9;
  44. }
  45. select {
  46. border: solid 1px #000; /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
  47. /*很关键:将默认的select选择框样式清除*/
  48. appearance: none;
  49. -moz-appearance: none;
  50. -webkit-appearance: none;
  51. /*在选择框的最右侧中间显示小箭头图片*/
  52. background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
  53. /*为下拉小箭头留出一点位置,避免被文字覆盖*/
  54. padding-right: 14px;
  55. }
  56. /*清除ie的默认选择框样式清除,隐藏下拉箭头*/
  57. select::-ms-expand {
  58. display: none;
  59. }
  60. textarea {
  61. -webkit-appearance: none;
  62. }
  63. /* 重置表格元素 */
  64. table {
  65. border-collapse: collapse;
  66. border-spacing: 0;
  67. width: 100%;
  68. /*text-align: center;*/
  69. }
  70. table td {
  71. word-break: break-all;
  72. word-wrap: break-word;
  73. }
  74. img {
  75. border: none;
  76. display: block;
  77. }
  78. /* for ie6 */
  79. fieldset, img {
  80. border: none;
  81. }
  82. /* 重置文本格式元素 */
  83. a {
  84. text-decoration: none;
  85. }
  86. a:hover {
  87. text-decoration: underline;
  88. }
  89. /* 重置列表元素 */
  90. ul, ol {
  91. list-style: none;
  92. }
  93. /* 重置 hr */
  94. hr {
  95. border: none;
  96. height: 1px;
  97. }
  98. address, cite, dfn, em, var {
  99. font-style: normal;
  100. }
  101. /* 将斜体扶正 */
  102. code, kbd, pre, samp, tt {
  103. font-family: "Courier New", Courier, monospace;
  104. }
  105. /* 统一等宽字体 *//* 小于 12px 的中文很难阅读,让 small 正常化 */
  106. small {
  107. font-size: 12px;
  108. }
  109. abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */
  110. border-bottom: 1px dotted;
  111. cursor: help;
  112. }
  113. q:before, q:after {
  114. content: '';
  115. }
  116. /* 重置表单元素 */
  117. legend {
  118. color: #000;
  119. }
  120. /*
  121. 移动端项目:font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;
  122. pc端(含Mac)项目:font-family:Tahoma,Arial,”Helvetica Neue“,”Hiragino Sans GB”,Simsun,sans-self;
  123. 移动和pc端项目:font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,”Hiragino Sans GB”,Simsun,sans-self;*/
  124. /*渐变:
  125. background:-webkit-linear-gradient(top,#d82c3e,#ff6450);
  126. background:-moz-linear-gradient(top,#d82c3e,#ff6450);
  127. background:-ms-linear-gradient(top,#d82c3e,#ff6450);
  128. background:-o-linear-gradient(top,#d82c3e,#ff6450);
  129. */
  130. /*************************************************************************************************/
  131. frameset{
  132. overflow-x: hidden;
  133. }
  134. .content-bg{
  135. padding-left: 25px;
  136. padding-right: 25px;
  137. padding-top: 60px;
  138. }
  139. /*分类标题样式*/
  140. #content{
  141. width:100%;background: #FFFFFF;height: 100%;
  142. }
  143. .content-bg .title{
  144. position: absolute;
  145. height: 60px;
  146. line-height: 60px;
  147. top: 0;
  148. left: 25px;
  149. overflow: hidden;
  150. }
  151. .content-bg .title > div {
  152. float: left;
  153. width: 4px;
  154. height: 20px;
  155. background: #868f95;
  156. margin-top: 20px;
  157. }
  158. .content-bg .title > p:first-of-type {
  159. padding-left: 10px;
  160. }
  161. .content-bg .title > p {
  162. float: left;
  163. padding-left: 5px;
  164. font-size: 16px;
  165. }
  166. /*分类标题样式结束*/
  167. @media screen and (max-width:1066px){
  168. .content-bg{
  169. width: 1066px!important;
  170. }
  171. #content{
  172. width: 1066px!important;
  173. }
  174. }
  175. /*登陆页样式*/
  176. .login-bg {
  177. background: url(../img/login-bg.png) center center no-repeat;
  178. width: 100%;
  179. height: 900px \9;
  180. height: 100vh;
  181. display: block;
  182. -webkit-background-size: cover;
  183. -moz-background-size: cover;
  184. -o-background-size: cover;
  185. background-size: cover;
  186. }
  187. .login-main {
  188. width: 400px;
  189. height: 500px;
  190. position: fixed;
  191. top: 50%;
  192. left: 50%;
  193. margin-top: -260px;
  194. margin-left: -200px;
  195. z-index: 5;
  196. }
  197. .login-main > img {
  198. width: 200px;
  199. margin-bottom: 110px;
  200. margin-left: 110px;
  201. }
  202. .login-main > div {
  203. width: 400px;
  204. background: rgba(255, 255, 255, 0.1);
  205. position: relative;
  206. }
  207. .head {
  208. position: absolute;
  209. top: -50px;
  210. left: 150px;
  211. width: 100px;
  212. height: 100px;
  213. border-radius: 50px;
  214. overflow: hidden;
  215. }
  216. .login-copyright {
  217. position: fixed;
  218. bottom: 30px;
  219. width: 100%;
  220. text-align: center;
  221. color: #fff;
  222. opacity: 0.5;
  223. font-size: 16px;
  224. z-index: -1;
  225. }
  226. .user {
  227. background: url("../img/user.png") no-repeat;
  228. background-position-x: 0%;
  229. background-position-y: 0%;
  230. background-position: 0 8px;
  231. margin-top: 70px;
  232. }
  233. .password {
  234. background: url("../img/password.png") no-repeat;
  235. background-position-x: 0%;
  236. background-position-y: 0%;
  237. background-position: 0 8px;
  238. margin-top: 30px;
  239. }
  240. .user, .password {
  241. width: 265px;
  242. margin-left: 50px;
  243. margin-right: 50px;
  244. border-bottom: solid 1px #fff;
  245. height: 34px;
  246. padding-left: 35px;
  247. line-height: 34px;
  248. }
  249. .login-btn {
  250. background: #4ccfff;
  251. width: 300px;
  252. height: 34px;
  253. margin: 50px 50px 30px;
  254. border-radius: 5px;
  255. color: #fff;
  256. }
  257. /*分页*/
  258. .page {
  259. padding: 20px 20px 0 20px;
  260. overflow: hidden;
  261. }
  262. .page>div {
  263. float: left;
  264. line-height: 34px;
  265. }
  266. .page>ul {
  267. float: right;
  268. overflow: hidden;
  269. }
  270. .page>ul>li {
  271. float: left;
  272. margin-left: 10px;
  273. padding: 0 10px;
  274. height: 32px;
  275. line-height: 32px;
  276. border-radius: 5px;
  277. border: solid 1px #ccc;
  278. }
  279. .page-s {
  280. color: #fff;
  281. background: #5589dc;
  282. border: none !important;
  283. }
  284. .font02 {
  285. border: none !important;
  286. padding: 0 !important;
  287. }
  288. .input02 {
  289. width: 50px;
  290. overflow: hidden;
  291. margin-left:5px !important;
  292. /*margin-right:10px !important;*/
  293. }
  294. .input02>input {
  295. width: 100%;
  296. height: 100%;
  297. text-align: center;
  298. line-height: 32px;
  299. }