blog界面自己写了css,参考了网站设计,想要的自己拿
2015-01-23 14:14 @疯狂的迈步 阅读(209) 评论(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 }
END
---------------------------------------------------------------------------------------------
欢迎关注 我的微博@疯狂的迈步 我的github@junhey