Posted By

CKOink on 04/09/11


Tagged


Versions (?)

Css plus Reset


 / Published in: HTML
 

  1. /*===================== Css ================*/
  2. body {
  3.  
  4. font-family: Arial, Helvetica, sans-serif;
  5.  
  6. background: #f1f1f1;
  7.  
  8. padding: 0;
  9.  
  10. margin: 0;
  11.  
  12. color: #222;
  13.  
  14. font-size: 62.5%;
  15.  
  16.  
  17.  
  18. }
  19.  
  20.  
  21.  
  22. header {
  23.  
  24. width: 960px;
  25.  
  26. margin: 0px auto;
  27.  
  28. display: block;
  29.  
  30.  
  31.  
  32. }
  33.  
  34. #logo {
  35.  
  36. padding: 35px 0px 35px 40px;
  37.  
  38. background: #fff;
  39.  
  40.  
  41.  
  42. -moz-border-radius: 0.8em;
  43.  
  44. -webkit-border-radius: 0.8em;
  45.  
  46.  
  47.  
  48. }
  49.  
  50. #logo a:active {
  51.  
  52. background: transparent !important;
  53.  
  54. }
  55.  
  56.  
  57.  
  58.  
  59.  
  60. nav {
  61.  
  62. width: 950px;
  63.  
  64. margin: 0px auto;
  65.  
  66. overflow: hidden;
  67.  
  68. font-size: 2.0em;
  69.  
  70. font-weight: bold;
  71.  
  72. padding: 0px 0px 0px 10px;
  73.  
  74.  
  75.  
  76. display: block;
  77.  
  78. }
  79.  
  80.  
  81.  
  82. nav ul {
  83.  
  84. padding: 0;
  85.  
  86. margin: 0;
  87.  
  88. }
  89.  
  90.  
  91.  
  92. nav ul li {
  93.  
  94. list-style: none;
  95.  
  96. float: left;
  97.  
  98. padding: 0px 35px 0px 10px;
  99.  
  100. }
  101.  
  102. nav a {
  103.  
  104. text-decoration: none;
  105.  
  106. color: #000 !important;
  107.  
  108. display: block;
  109.  
  110. padding: 20px;
  111.  
  112. }
  113.  
  114. nav a:hover {
  115.  
  116. color: #444;
  117.  
  118. background: #fff;
  119.  
  120. }
  121.  
  122.  
  123.  
  124.  
  125.  
  126. #content {
  127.  
  128. width: 960px;
  129.  
  130. margin: 0px auto;
  131.  
  132.  
  133.  
  134. display: -webkit-box;
  135.  
  136. -webkit-box-orient: horizontal;
  137.  
  138.  
  139.  
  140. font-size: 1.4em;
  141.  
  142.  
  143.  
  144. }
  145.  
  146.  
  147.  
  148. footer {
  149.  
  150. display: block;
  151.  
  152. }
  153.  
  154. #main-footer {
  155.  
  156. width: 960px;
  157.  
  158. margin: 0px auto;
  159.  
  160. padding: 15px;
  161.  
  162. font-size: 1.8em;
  163.  
  164. font-weight: bold;
  165.  
  166. text-align: center;
  167.  
  168. }
  169.  
  170.  
  171.  
  172.  
  173.  
  174. .hfeed, x:-moz-any-link, x:only-child {
  175.  
  176. float: left;
  177.  
  178. }
  179.  
  180.  
  181.  
  182. aside, x:-moz-any-link, x:only-child {
  183.  
  184. float: right;
  185.  
  186. }
  187.  
  188.  
  189.  
  190. article {
  191.  
  192. text-align: justify;
  193.  
  194. line-height: 1.5em;
  195.  
  196. color: #222;
  197.  
  198.  
  199.  
  200. display: block;
  201.  
  202. }
  203.  
  204.  
  205.  
  206. #main-content, .hfeed {
  207.  
  208. padding: 10px 20px 20px 40px;
  209.  
  210. width: 500px;
  211.  
  212. background: #fff;
  213.  
  214.  
  215.  
  216. -moz-border-radius-bottomleft: 0.8em;
  217.  
  218. -webkit-border-bottom-left-radius: 0.8em;
  219.  
  220. -moz-border-radius-topleft: 0.8em;
  221.  
  222. -webkit-border-top-left-radius: 0.8em;
  223.  
  224.  
  225.  
  226. display: block;
  227.  
  228.  
  229.  
  230. }
  231.  
  232.  
  233.  
  234. aside {
  235.  
  236. padding: 10px 20px 20px 40px;
  237.  
  238. width: 340px;
  239.  
  240. background: #fff;
  241.  
  242.  
  243.  
  244. -webkit-border-bottom-right-radius: 0.8em;
  245.  
  246. -moz-border-radius-bottomright: 0.8em;
  247.  
  248. -webkit-border-top-right-radius: 0.8em;
  249.  
  250. -moz-border-radius-topright: 0.8em;
  251.  
  252.  
  253.  
  254. display: block;
  255.  
  256.  
  257.  
  258. }
  259.  
  260. aside ul {
  261.  
  262. list-style: none;
  263.  
  264. padding: 0px 0px 0px 6px;
  265.  
  266. }
  267.  
  268.  
  269.  
  270. aside ul li {
  271.  
  272. line-height: 1.5em;
  273.  
  274. font-size: 1.2em;
  275.  
  276. border-bottom: 1px dotted #d9d9d9;
  277.  
  278. }
  279.  
  280. aside ul li a {
  281.  
  282. padding: 10px 0px 10px 10px;
  283.  
  284. display: block;
  285.  
  286. font-weight: bold;
  287.  
  288. }
  289.  
  290. aside ul li a:hover {
  291.  
  292. background: #f1f7f9;
  293.  
  294. }
  295.  
  296.  
  297.  
  298. /* Some Headings for You */
  299.  
  300. h1 { font-size: 3.0em; }
  301.  
  302. h2 { font-size: 2.2em; }
  303.  
  304. h3 { font-size: 1.6em; }
  305.  
  306. h4 { font-size: 1.2em; }
  307.  
  308. h5 { font-size: 1.0em; }
  309.  
  310. h6 { font-size: 0.8em; }
  311.  
  312.  
  313.  
  314. hgroup h3, hgroup h3 a { color: #9aa8ad !important; }
  315.  
  316. hgroup h1, hgroup h1 a { color: #51add3 !important; }
  317.  
  318. h3 a { text-decoration: underline; }
  319.  
  320. h1, h2, h3, h4, h5, h6 { line-height: 0.5em; }
  321.  
  322.  
  323.  
  324. a {
  325.  
  326. color: #2a708e;
  327.  
  328. text-decoration: none;
  329.  
  330. }
  331.  
  332.  
  333.  
  334. a img {
  335.  
  336. border: 0;
  337.  
  338. }
  339.  
  340.  
  341.  
  342. a:visited { color: #104258; }
  343.  
  344. a:active { background: #eaf7fc; }
  345.  
  346. a:hover { color: #0c1e2f; }
  347.  
  348.  
  349.  
  350.  
  351.  
  352. hr {
  353.  
  354. border-bottom: 0px;
  355.  
  356. border-left: 0px;
  357.  
  358. border-right: 0px;
  359.  
  360. border-top: 1px dotted #d9d9d9;
  361.  
  362. }
  363.  
  364.  
  365.  
  366. .floatleft {
  367.  
  368. float: left;
  369.  
  370. }
  371.  
  372.  
  373.  
  374. .floatright {
  375.  
  376. float: right;
  377.  
  378. }

Report this snippet  

You need to login to post a comment.