代码改变世界

blog界面自己写了css，参考了网站设计,想要的自己拿

2015-01-23 14:14  @疯狂的迈步  阅读(210)  评论(0)  编辑  收藏  举报

junhey这就把界面的代码公布下来，可以自己修改额~（ps:麻烦加个友链http://www.cnblogs.com/junhey/ 谢谢）

  1 /* 初始化样式 */
  2 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0px;    padding: 0px;    border: 0px none;    font-size: 100%;    vertical-align: baseline;}
  3 button, input, textarea { border: 1px solid #CCC; border-radius: 3px; font-family: inherit; padding: 0.428571rem;}
  4 dayTitle postTitle a{ text-decoration: none;}
  5 h1, h2, h3, h4, h5, h6 { clear: both;}
  6 ol, ul { list-style: outside none none;}
  7 a:focus { outline: thin dotted;}
  8 a { outline: medium none;color: #21759B; text-decoration: none;}
  9 article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block;}
 10 body{ font-size: 1rem;font-family: Helvetica,Arial,sans-serif;text-rendering: optimizelegibility;color: #444; margin-top: 2em;margin-bottom: 3.42857rem;background-color: #E6E6E6;}
 11 /* 标题样式 */
 12 #blogTitle h1 a, #blogTitle h2 a {color: #515151;display: inline-block;text-decoration: none;}
 13 #blogTitle h1, #blogTitle h2 {text-align: left;}
 14 #blogTitle h1 {font-size: 1.85714rem;line-height: 1.84615;margin-bottom: 0px;}
 15 #blogTitle h2 {font-weight: normal;font-size: 0.928571rem;line-height: 1.84615;color: #757575;}
 16 #home{ padding: 0px 2.85714rem;box-shadow: 0px 2px 6px rgba(100, 100, 100, 0.3); margin: 0px auto;max-width: 68.5714rem;overflow: hidden;background-color: #FFF;}
 17 #main{padding-top:2.57143rem;padding-bottom:2em;}
 18 /* 左边文章列表样式 */
 19 #mainContent{ float: left;width: 65.1042%; }
 20 .day,.entrylistItem{ padding-bottom: 2.57143rem;word-wrap: break-word;-moz-hyphens: auto;}
 21 .dayTitle{ font-size: 0.928571rem;line-height: 1.84615;color: #757575;clear: both;display:none; }
 22 .postTitle,.entrylistPosttitle,.postTitl2{ font-size: 1.57143rem;line-height: 1.2;font-weight: normal;border-bottom: 1px solid #D0D0D0;background-color: transparent; line-height: 1.84615;}
 23 .postCon,.entrylistPostSummary{ line-height: 1.71429;margin-top: 1em; }
 24 .postDesc,.entrylistItemPostDesc,.postDesc2{ font-size: 0.928571rem;clear: both;color: #757575;line-height: 1.84615;font-family: Helvetica,Arial,sans-serif;text-rendering: optimizelegibility; word-wrap: break-word; -moz-hyphens: auto;}
 25 
 26 .entrylist{ font-size: 1.8rem;line-height: 1.2;font-weight: normal;border-bottom: 1px solid #D0D0D0;background-color: transparent;line-height: 1.84615; }
 27 .c_b_p_desc{ font-size:16px; }
 28 .PostListTitle{font-size: 1.8rem;}
 29 
 30 /* 右边导航列表样式 */
 31 #sideBar{ float: right;width: 26.0417%; }
 32 .catListTag,.mySearch,.catListPostCategory,.catListArticleCategory,#topview_posts_wrap{-moz-hyphens: auto;margin-bottom: 2.57143rem;word-wrap: break-word;}
 33 #blog-sidecolumn h3{ margin-bottom: 0.857143rem; }
 34 #blog-sidecolumn li,#blog-sidecolumn p{font-size: 0.928571rem;line-height: 1.84615; white-space: nowrap;overflow: hidden;}
 35 
 36 .catListTag,.mySearch{-moz-hyphens: auto;margin-top: 2.57143rem;margin-bottom: 2.57143rem;word-wrap: break-word;}
 37     /* 搜索按钮样式 */
 38 .input_my_zzk{ width: 53.6667%; }
 39 .btn_my_zzk{ cursor: pointer;padding: 0.428571rem 0.714286rem;font-size: 0.785714rem;line-height: 1.42857;font-weight: normal;
 40 color: #7C7C7C;background-color: #E6E6E6;background-repeat: repeat-x;background-image: -moz-linear-gradient(center top , #F4F4F4, #E6E6E6);border: 1px solid #D2D2D2;border-radius: 3px;box-shadow: 0px 1px 2px rgba(64, 64, 64, 0.1); }
 41 
 42 
 43 /* 底部样式 */
 44 #footer{border-top: 1px solid #EDEDED;clear: both;font-size: 0.857143rem;max-width: 68.5714rem;margin-top: 1.71429rem;margin-left: auto;margin-right: auto;padding: 1.71429rem 0px;}
 45 /* 不显示的部分 */
 46 #navList{ display:none; }
 47 #site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{ display:none; }
 48 /* 导航样式 */
 49 .main-navigation ul.nav-menu,
 50     .main-navigation div.nav-menu > ul {
 51         border-bottom: 1px solid #ededed;
 52         border-top: 1px solid #ededed;
 53         display: inline-block !important;
 54         text-align: left;
 55         width: 100%;
 56     }
 57     .main-navigation ul {
 58         margin: 0;
 59         text-indent: 0;
 60     }
 61     .main-navigation li a,
 62     .main-navigation li {
 63         display: inline-block;
 64         text-decoration: none;
 65     }
 66     .main-navigation li a {
 67         border-bottom: 0;
 68         color: #6a6a6a;
 69         line-height: 3.692307692;
 70         text-transform: uppercase;
 71         white-space: nowrap;
 72     }
 73     .main-navigation li a:hover {
 74         color: #000;
 75     }
 76     .main-navigation li {
 77         margin: 0 40px 0 0;
 78         margin: 0 2.857142857rem 0 0;
 79         position: relative;
 80     }
 81     .main-navigation li ul {
 82         display: none;
 83         margin: 0;
 84         padding: 0;
 85         position: absolute;
 86         top: 100%;
 87         z-index: 1;
 88     }
 89     .main-navigation li ul ul {
 90         top: 0;
 91         left: 100%;
 92     }
 93     .main-navigation ul li:hover > ul {
 94         border-left: 0;
 95         display: block;
 96     }
 97     .main-navigation li ul li a {
 98         background: #efefef;
 99         border-bottom: 1px solid #ededed;
100         display: block;
101         font-size: 11px;
102         font-size: 0.785714286rem;
103         line-height: 2.181818182;
104         padding: 8px 10px;
105         padding: 0.571428571rem 0.714285714rem;
106         width: 180px;
107         width: 12.85714286rem;
108         white-space: normal;
109     }
110     .main-navigation li ul li a:hover {
111         background: #e3e3e3;
112         color: #444;
113     }
114     .main-navigation .current-menu-item > a,
115     .main-navigation .current-menu-ancestor > a,
116     .main-navigation .current_page_item > a,
117     .main-navigation .current_page_ancestor > a {
118         color: #636363;
119         font-weight: bold;
120     }