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

时间：2022-12-08 16:46:14

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

 /* 初始化样式 */

 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;}

 button, input, textarea { border: 1px solid #CCC; border-radius: 3px; font-family: inherit; padding: 0.428571rem;}

 dayTitle postTitle a{ text-decoration: none;}

 h1, h2, h3, h4, h5, h6 { clear: both;}

 ol, ul { list-style: outside none none;}

 a:focus { outline: thin dotted;}

 a { outline: medium none;color: #21759B; text-decoration: none;}

 article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block;}

 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;}

 /* 标题样式 */

 #blogTitle h1 a, #blogTitle h2 a {color: #515151;display: inline-block;text-decoration: none;}

 #blogTitle h1, #blogTitle h2 {text-align: left;}

 #blogTitle h1 {font-size: 1.85714rem;line-height: 1.84615;margin-bottom: 0px;}

 #blogTitle h2 {font-weight: normal;font-size: 0.928571rem;line-height: 1.84615;color: #757575;}

 #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;}

 #main{padding-top:2.57143rem;padding-bottom:2em;}

 /* 左边文章列表样式 */

 #mainContent{ float: left;width: 65.1042%; }

 .day,.entrylistItem{ padding-bottom: 2.57143rem;word-wrap: break-word;-moz-hyphens: auto;}

 .dayTitle{ font-size: 0.928571rem;line-height: 1.84615;color: #757575;clear: both;display:none; }

 .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;}

 .postCon,.entrylistPostSummary{ line-height: 1.71429;margin-top: 1em; }

 .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;}

 .entrylist{ font-size: 1.8rem;line-height: 1.2;font-weight: normal;border-bottom: 1px solid #D0D0D0;background-color: transparent;line-height: 1.84615; }

 .c_b_p_desc{ font-size:16px; }

 .PostListTitle{font-size: 1.8rem;}

 /* 右边导航列表样式 */

 #sideBar{ float: right;width: 26.0417%; }

 .catListTag,.mySearch,.catListPostCategory,.catListArticleCategory,#topview_posts_wrap{-moz-hyphens: auto;margin-bottom: 2.57143rem;word-wrap: break-word;}

 #blog-sidecolumn h3{ margin-bottom: 0.857143rem; }

 #blog-sidecolumn li,#blog-sidecolumn p{font-size: 0.928571rem;line-height: 1.84615; white-space: nowrap;overflow: hidden;}

 .catListTag,.mySearch{-moz-hyphens: auto;margin-top: 2.57143rem;margin-bottom: 2.57143rem;word-wrap: break-word;}

     /* 搜索按钮样式 */

 .input_my_zzk{ width: 53.6667%; }

 .btn_my_zzk{ cursor: pointer;padding: 0.428571rem 0.714286rem;font-size: 0.785714rem;line-height: 1.42857;font-weight: normal;

 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); }

 /* 底部样式 */

 #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;}

 /* 不显示的部分 */

 #navList{ display:none; }

 #site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{ display:none; }

 /* 导航样式 */

 .main-navigation ul.nav-menu,

     .main-navigation div.nav-menu > ul {

         border-bottom: 1px solid #ededed;

         border-top: 1px solid #ededed;

         display: inline-block !important;

         text-align: left;

         width: 100%;

     }

     .main-navigation ul {

         margin:;

         text-indent:;

     }

     .main-navigation li a,

     .main-navigation li {

         display: inline-block;

         text-decoration: none;

     }

     .main-navigation li a {

         border-bottom:;

         color: #6a6a6a;

         line-height: 3.692307692;

         text-transform: uppercase;

         white-space: nowrap;

     }

     .main-navigation li a:hover {

         color: #000;

     }

     .main-navigation li {

         margin: 0 40px 0 0;

         margin: 0 2.857142857rem 0 0;

         position: relative;

     }

     .main-navigation li ul {

         display: none;

         margin:;

         padding:;

         position: absolute;

         top: 100%;

         z-index:;

     }

     .main-navigation li ul ul {

         top:;

         left: 100%;

     }

     .main-navigation ul li:hover > ul {

         border-left:;

         display: block;

     }

     .main-navigation li ul li a {

         background: #efefef;

         border-bottom: 1px solid #ededed;

         display: block;

         font-size: 11px;

         font-size: 0.785714286rem;

         line-height: 2.181818182;

         padding: 8px 10px;

         padding: 0.571428571rem 0.714285714rem;

         width: 180px;

         width: 12.85714286rem;

         white-space: normal;

     }

     .main-navigation li ul li a:hover {

         background: #e3e3e3;

         color: #444;

     }

     .main-navigation .current-menu-item > a,

     .main-navigation .current-menu-ancestor > a,

     .main-navigation .current_page_item > a,

     .main-navigation .current_page_ancestor > a {

         color: #636363;

         font-weight: bold;

     }

/* 初始化样式 */

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;}

button, input, textarea { border: 1px solid #CCC; border-radius: 3px; font-family: inherit; padding: 0.428571rem;}

dayTitle postTitle a{ text-decoration: none;}

h1, h2, h3, h4, h5, h6 { clear: both;}

ol, ul { list-style: outside none none;}

a:focus { outline: thin dotted;}

a { outline: medium none;color: #21759B; text-decoration: none;}

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block;}

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;}

/* 标题样式 */

#blogTitle h1 a, #blogTitle h2 a {color: #515151;display: inline-block;text-decoration: none;}

#blogTitle h1, #blogTitle h2 {text-align: left;}

#blogTitle h1 {font-size: 1.85714rem;line-height: 1.84615;margin-bottom: 0px;}

#blogTitle h2 {font-weight: normal;font-size: 0.928571rem;line-height: 1.84615;color: #757575;}

#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;}

#main{padding-top:2.57143rem;padding-bottom:2em;}

/* 左边文章列表样式 */

#mainContent{ float: left;width: 65.1042%; }

.day,.entrylistItem{ padding-bottom: 2.57143rem;word-wrap: break-word;-moz-hyphens: auto;}

.dayTitle{ font-size: 0.928571rem;line-height: 1.84615;color: #757575;clear: both;display:none; }

.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;}

.postCon,.entrylistPostSummary{ line-height: 1.71429;margin-top: 1em; }

.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;}

.entrylist{ font-size: 1.8rem;line-height: 1.2;font-weight: normal;border-bottom: 1px solid #D0D0D0;background-color: transparent;line-height: 1.84615; }

.c_b_p_desc{ font-size:16px; }

.PostListTitle{font-size: 1.8rem;}

/* 右边导航列表样式 */

#sideBar{ float: right;width: 26.0417%; }

.catListTag,.mySearch,.catListPostCategory,.catListArticleCategory,#topview_posts_wrap{-moz-hyphens: auto;margin-bottom: 2.57143rem;word-wrap: break-word;}

#blog-sidecolumn h3{ margin-bottom: 0.857143rem; }

#blog-sidecolumn li,#blog-sidecolumn p{font-size: 0.928571rem;line-height: 1.84615; white-space: nowrap;overflow: hidden;}

.catListTag,.mySearch{-moz-hyphens: auto;margin-top: 2.57143rem;margin-bottom: 2.57143rem;word-wrap: break-word;}

    /* 搜索按钮样式 */

.input_my_zzk{ width: 53.6667%; }

.btn_my_zzk{ cursor: pointer;padding: 0.428571rem 0.714286rem;font-size: 0.785714rem;line-height: 1.42857;font-weight: normal;

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); }

/* 底部样式 */

#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;}

/* 不显示的部分 */

#navList{ display:none; }

#site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{ display:none; }

/* 导航样式 */

.main-navigation ul.nav-menu,

    .main-navigation div.nav-menu > ul {

        border-bottom: 1px solid #ededed;

        border-top: 1px solid #ededed;

        display: inline-block !important;

        text-align: left;

        width: 100%;

    }

    .main-navigation ul {

        margin:;

        text-indent:;

    }

    .main-navigation li a,

    .main-navigation li {

        display: inline-block;

        text-decoration: none;

    }

    .main-navigation li a {

        border-bottom:;

        color: #6a6a6a;

        line-height: 3.692307692;

        text-transform: uppercase;

        white-space: nowrap;

    }

    .main-navigation li a:hover {

        color: #000;

    }

    .main-navigation li {

        margin: 0 40px 0 0;

        margin: 0 2.857142857rem 0 0;

        position: relative;

    }

    .main-navigation li ul {

        display: none;

        margin:;

        padding:;

        position: absolute;

        top: 100%;

        z-index:;

    }

    .main-navigation li ul ul {

        top:;

        left: 100%;

    }

    .main-navigation ul li:hover > ul {

        border-left:;

        display: block;

    }

    .main-navigation li ul li a {

        background: #efefef;

        border-bottom: 1px solid #ededed;

        display: block;

        font-size: 11px;

        font-size: 0.785714286rem;

        line-height: 2.181818182;

        padding: 8px 10px;

        padding: 0.571428571rem 0.714285714rem;

        width: 180px;

        width: 12.85714286rem;

        white-space: normal;

    }

    .main-navigation li ul li a:hover {

        background: #e3e3e3;

        color: #444;

    }

    .main-navigation .current-menu-item > a,

    .main-navigation .current-menu-ancestor > a,

    .main-navigation .current_page_item > a,

    .main-navigation .current_page_ancestor > a {

        color: #636363;

        font-weight: bold;

    }

相关文章