demo.css 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. /**
  2. * Reset Global CSS
  3. * ------------------------------ */
  4. blockquote{margin:10px 0;padding:5px 8px;border:1px solid #ddd;background:#f3f3f3;color:#999;font-family:Consolas,'Lucida Console',Monaco,Courier,'Courier New';font-size:12px;}
  5. code{margin:0 3px;padding:0 5px;border:1px solid #ddd;border-radius:3px;background:#f8f8f8;font-family:Consolas,'Lucida Console',Monaco,Courier,'Courier New';}
  6. pre{position:relative;margin:10px 0;padding:0;color:#333;word-wrap:break-word;}
  7. pre code{display:block;overflow-x:auto;position:relative;margin:0;padding:30px 20px 10px;border:1px solid #ddd;border-radius:3px;background:#f7f7f0;font-family:Consolas,'Lucida Console',Monaco,Courier,'Courier New';font-size:12px;}
  8. pre code:before{content:'Code Examples';position:absolute;top:10px;left:10px;color:#bbb;font:12px/1 Arial;text-shadow:1px 1px 0 #fff;}
  9. pre code.html:before{content:'HTML Code';}
  10. pre code.css:before{content:'CSS Code';}
  11. pre code.js:before{content:'JavaScript Code';}
  12. pre code.php:before{content:'PHP Code';}
  13. pre code ol{list-style:decimal inside;}
  14. a,a:hover{color:#4a89dc;text-decoration:none;}
  15. a:hover{text-decoration:underline;}
  16. /**
  17. * Layout
  18. * ------------------------------ */
  19. fieldset{margin:20px 0;padding:20px;border:1px solid #ccc;border-radius:5px;}
  20. fieldset legend{margin-bottom:-10px;padding:0 10px;color:#888;font-weight:bold;font-size:16px;line-height:2;}
  21. fieldset:first-child{margin-top:0;}
  22. /**
  23. * 布局
  24. * ------------------------------ */
  25. .wrap{position:relative;}
  26. .wrap:after{visibility:hidden;display:block;font-size:0;content:'';clear:both;height:0;}
  27. .side{float:left;width:280px;}
  28. .side:before{content:'';position:absolute;top:0;left:0;width:280px;height:100%;background:#f5f7fa;box-shadow:3px 0 6px rgba(0,0,0,0.3);z-index:-1;}
  29. .main{overflow:hidden;padding:0 30px 60px 30px;}
  30. .main h2,
  31. .main h3,
  32. .main h4{margin:0.5em 0;font-weight:bold;font-size:24px;line-height:1.5;}
  33. .main h2{margin:15px 0;line-height:30px;}
  34. .main h3{font-size:18px;}
  35. .main h4{font-size:14px;}
  36. /**
  37. * Logo
  38. * ------------------------------ */
  39. .logo{padding:10px 15px;background-color:#4a89dc;color:#fff;}
  40. .logo h1{display:inline-block;font-size:24px;line-height:40px;vertical-align:top;}
  41. .logo em{margin-left:1em;font-weight:normal;font-style:normal;font-size:14px;line-height:40px;vertical-align:top;}
  42. .logo a{color:#fff;}
  43. .logo a:hover{color:#e6e9ed;text-decoration:none;}
  44. /**
  45. * 关于
  46. * ------------------------------ */
  47. .about{padding:10px 15px;border-bottom:1px solid #ccd1d9;}
  48. .about h2{font-size:16px;line-height:1.5;}
  49. .about ul{overflow:hidden;margin-top:5px;line-height:24px;}
  50. .about li{float:left;position:relative;}
  51. .about li + li{margin-left:10px;padding-left:10px;}
  52. .about li + li:before{content:'';position:absolute;top:15%;bottom:15%;left:0;width:1px;border-left:1px solid #ccc;}
  53. .about li.br{clear:left;margin-top:10px;margin-left:0;padding:0;border-left:none;}
  54. .about li.br ~ li{margin-top:10px;}
  55. /**
  56. * 导航
  57. * ------------------------------ */
  58. .nav{margin-top:10px;padding-bottom:100px;}
  59. .nav dl{list-style-type:none;line-height:30px;}
  60. .nav dl + dl{margin-top:10px;}
  61. .nav dt{position:relative;padding-left:15px;font:bold 14px/30px Arial,'\5fae\8f6f\96c5\9ed1';}
  62. .nav dd{border-top:1px solid #ccd1d9;}
  63. .nav dd a{display:block;position:relative;padding:5px 0 5px 30px;line-height:24px;text-transform:capitalize;
  64. /*transition:color 0.2s;*/
  65. }
  66. .nav dd a:before{content:'';position:absolute;top:50%;left:16px;width:0;height:0;margin-top:-5px;border:5px solid transparent;border-left-color:#f5f7fa;
  67. /*transition:border-left-color 0.2s ease-out;*/
  68. }
  69. .nav dd a:after{content:attr(title);display:block;overflow:hidden;color:#aab2bd;font-size:12px;white-space:nowrap;text-overflow:ellipsis;
  70. transition:color 0.2s ease-out;
  71. }
  72. .nav dd a:hover{color:#3bafda;text-decoration:none;}
  73. .nav dd a:hover:before{border-left-color:#3bafda;}
  74. .nav dd a:hover:after{color:#656d78;}
  75. .nav dd.n{background:#e6e9ed;}
  76. .nav dd.n a{color:#3bafda;}
  77. .nav dd.n a:after{color:#656d78;}
  78. .nav dd.n a:before{top:0;left:0;height:100%;margin:0;border:none;border-left:8px solid #3bafda;}
  79. .nav dl.mini dd a{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
  80. .nav dl.mini dd a:after{display:none;}
  81. .example{position:relative;}
  82. .example + .example{margin-top:40px;}
  83. .example + .example:before{content:'';position:absolute;top:-20px;left:0;width:100%;height:1px;background-color:#ddd;}
  84. /**
  85. * 表单
  86. * ------------------------------ */
  87. .form_long dl.row dt{width:10em;}
  88. .form_long dl.row dd{margin-left:11em;}