demo.css 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371
  1. *{margin: 0;padding: 0;list-style: none;}
  2. /*
  3. KISSY CSS Reset
  4. 理念:1. reset 的目的不是清除浏览器的默认样式,这仅是部分工作。清除和重置是紧密不可分的。
  5. 2. reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。
  6. 3. reset 期望提供一套普适通用的基础样式。但没有银弹,推荐根据具体需求,裁剪和修改后再使用。
  7. 特色:1. 适应中文;2. 基于最新主流浏览器。
  8. 维护:玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
  9. */
  10. /** 清除内外边距 **/
  11. body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
  12. dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
  13. pre, /* text formatting elements 文本格式元素 */
  14. form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
  15. th, td /* table elements 表格元素 */ {
  16. margin: 0;
  17. padding: 0;
  18. }
  19. /** 设置默认字体 **/
  20. body,
  21. button, input, select, textarea /* for ie */ {
  22. font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
  23. }
  24. h1, h2, h3, h4, h5, h6 { font-size: 100%; }
  25. address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
  26. code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
  27. small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
  28. /** 重置列表元素 **/
  29. ul, ol { list-style: none; }
  30. /** 重置文本格式元素 **/
  31. a { text-decoration: none; }
  32. a:hover { text-decoration: underline; }
  33. /** 重置表单元素 **/
  34. legend { color: #000; } /* for ie6 */
  35. fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */
  36. button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
  37. /* 注:optgroup 无法扶正 */
  38. /** 重置表格元素 **/
  39. table { border-collapse: collapse; border-spacing: 0; }
  40. /* 清除浮动 */
  41. .ks-clear:after, .clear:after {
  42. content: '\20';
  43. display: block;
  44. height: 0;
  45. clear: both;
  46. }
  47. .ks-clear, .clear {
  48. *zoom: 1;
  49. }
  50. .main {
  51. padding: 30px 100px;
  52. width: 960px;
  53. margin: 0 auto;
  54. }
  55. .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
  56. .helps{margin-top:40px;}
  57. .helps pre{
  58. padding:20px;
  59. margin:10px 0;
  60. border:solid 1px #e7e1cd;
  61. background-color: #fffdef;
  62. overflow: auto;
  63. }
  64. .icon_lists{
  65. width: 100% !important;
  66. }
  67. .icon_lists li{
  68. float:left;
  69. width: 100px;
  70. height:180px;
  71. text-align: center;
  72. list-style: none !important;
  73. }
  74. .icon_lists .icon{
  75. font-size: 42px;
  76. line-height: 100px;
  77. margin: 10px 0;
  78. color:#333;
  79. -webkit-transition: font-size 0.25s ease-out 0s;
  80. -moz-transition: font-size 0.25s ease-out 0s;
  81. transition: font-size 0.25s ease-out 0s;
  82. }
  83. .icon_lists .icon:hover{
  84. font-size: 100px;
  85. }
  86. .markdown {
  87. color: #666;
  88. font-size: 14px;
  89. line-height: 1.8;
  90. }
  91. .highlight {
  92. line-height: 1.5;
  93. }
  94. .markdown img {
  95. vertical-align: middle;
  96. max-width: 100%;
  97. }
  98. .markdown h1 {
  99. color: #404040;
  100. font-weight: 500;
  101. line-height: 40px;
  102. margin-bottom: 24px;
  103. }
  104. .markdown h2,
  105. .markdown h3,
  106. .markdown h4,
  107. .markdown h5,
  108. .markdown h6 {
  109. color: #404040;
  110. margin: 1.6em 0 0.6em 0;
  111. font-weight: 500;
  112. clear: both;
  113. }
  114. .markdown h1 {
  115. font-size: 28px;
  116. }
  117. .markdown h2 {
  118. font-size: 22px;
  119. }
  120. .markdown h3 {
  121. font-size: 16px;
  122. }
  123. .markdown h4 {
  124. font-size: 14px;
  125. }
  126. .markdown h5 {
  127. font-size: 12px;
  128. }
  129. .markdown h6 {
  130. font-size: 12px;
  131. }
  132. .markdown hr {
  133. height: 1px;
  134. border: 0;
  135. background: #e9e9e9;
  136. margin: 16px 0;
  137. clear: both;
  138. }
  139. .markdown p,
  140. .markdown pre {
  141. margin: 1em 0;
  142. }
  143. .markdown > p,
  144. .markdown > blockquote,
  145. .markdown > .highlight,
  146. .markdown > ol,
  147. .markdown > ul {
  148. width: 80%;
  149. }
  150. .markdown ul > li {
  151. list-style: circle;
  152. }
  153. .markdown > ul li,
  154. .markdown blockquote ul > li {
  155. margin-left: 20px;
  156. padding-left: 4px;
  157. }
  158. .markdown > ul li p,
  159. .markdown > ol li p {
  160. margin: 0.6em 0;
  161. }
  162. .markdown ol > li {
  163. list-style: decimal;
  164. }
  165. .markdown > ol li,
  166. .markdown blockquote ol > li {
  167. margin-left: 20px;
  168. padding-left: 4px;
  169. }
  170. .markdown code {
  171. margin: 0 3px;
  172. padding: 0 5px;
  173. background: #eee;
  174. border-radius: 3px;
  175. }
  176. .markdown pre {
  177. border-radius: 6px;
  178. background: #f7f7f7;
  179. padding: 20px;
  180. }
  181. .markdown pre code {
  182. border: none;
  183. background: #f7f7f7;
  184. margin: 0;
  185. }
  186. .markdown strong,
  187. .markdown b {
  188. font-weight: 600;
  189. }
  190. .markdown > table {
  191. border-collapse: collapse;
  192. border-spacing: 0px;
  193. empty-cells: show;
  194. border: 1px solid #e9e9e9;
  195. width: 95%;
  196. margin-bottom: 24px;
  197. }
  198. .markdown > table th {
  199. white-space: nowrap;
  200. color: #333;
  201. font-weight: 600;
  202. }
  203. .markdown > table th,
  204. .markdown > table td {
  205. border: 1px solid #e9e9e9;
  206. padding: 8px 16px;
  207. text-align: left;
  208. }
  209. .markdown > table th {
  210. background: #F7F7F7;
  211. }
  212. .markdown blockquote {
  213. font-size: 90%;
  214. color: #999;
  215. border-left: 4px solid #e9e9e9;
  216. padding-left: 0.8em;
  217. margin: 1em 0;
  218. font-style: italic;
  219. }
  220. .markdown blockquote p {
  221. margin: 0;
  222. }
  223. .markdown .anchor {
  224. opacity: 0;
  225. transition: opacity 0.3s ease;
  226. margin-left: 8px;
  227. }
  228. .markdown .waiting {
  229. color: #ccc;
  230. }
  231. .markdown h1:hover .anchor,
  232. .markdown h2:hover .anchor,
  233. .markdown h3:hover .anchor,
  234. .markdown h4:hover .anchor,
  235. .markdown h5:hover .anchor,
  236. .markdown h6:hover .anchor {
  237. opacity: 1;
  238. display: inline-block;
  239. }
  240. .markdown > br,
  241. .markdown > p > br {
  242. clear: both;
  243. }
  244. .hljs {
  245. display: block;
  246. background: white;
  247. padding: 0.5em;
  248. color: #333333;
  249. overflow-x: auto;
  250. }
  251. .hljs-comment,
  252. .hljs-meta {
  253. color: #969896;
  254. }
  255. .hljs-string,
  256. .hljs-variable,
  257. .hljs-template-variable,
  258. .hljs-strong,
  259. .hljs-emphasis,
  260. .hljs-quote {
  261. color: #df5000;
  262. }
  263. .hljs-keyword,
  264. .hljs-selector-tag,
  265. .hljs-type {
  266. color: #a71d5d;
  267. }
  268. .hljs-literal,
  269. .hljs-symbol,
  270. .hljs-bullet,
  271. .hljs-attribute {
  272. color: #0086b3;
  273. }
  274. .hljs-section,
  275. .hljs-name {
  276. color: #63a35c;
  277. }
  278. .hljs-tag {
  279. color: #333333;
  280. }
  281. .hljs-title,
  282. .hljs-attr,
  283. .hljs-selector-id,
  284. .hljs-selector-class,
  285. .hljs-selector-attr,
  286. .hljs-selector-pseudo {
  287. color: #795da3;
  288. }
  289. .hljs-addition {
  290. color: #55a532;
  291. background-color: #eaffea;
  292. }
  293. .hljs-deletion {
  294. color: #bd2c00;
  295. background-color: #ffecec;
  296. }
  297. .hljs-link {
  298. text-decoration: underline;
  299. }
  300. pre{
  301. background: #fff;
  302. }