效果图:

css代码:
/* base 通用 */ html,body{ width: 100%; height: 100%; } html { margin: 0; padding: 0; } body, div, h1, h2, h3, h4, h5, h6, table, tr,th,td, ol, ul, li, dl, dt, dd, form, p{ padding: 0px; margin: 0px; outline: none; } table{ border-collapse: collapse; empty-cells: show; } ul,li{ list-style: none; } em{font-style: normal;} img{ width: auto; max-width: 100%; border: 0; } input[type=submit]::-moz-focus-inner,input[type=button]::-moz-focus-inner,button::-moz-focus-inner{ border: 0; padding: 0; } /*去除按钮的默认样式*/ input[type=text]{ -webkit-appearance:none; outline:none } textarea:focus,textarea:hover{ outline:none; } select:focus{ outline:none; } input:hover, input:focus, input::-moz-focus-inner,input::-moz-focus-inner{ outline:none; /* border-color: inherit; */ } button,input[type=button]{ opacity: .9; filter: alpha(opacity=90); } button:hover,input[type=button]:hover{ opacity: .75; filter: alpha(opacity=75); text-decoration: none!important; } /*通用 */ body cnb-layout{ font-size: 14px!important; background:#f5f5f5!important; margin: 0; padding: 0; } input[type=text], textarea,textarea.cnb-input{ font-family: Microsoft Yahei,Helvetica Neue,Helvetica,Arial,sans-serif!important; color:#252525!important; border: 1px solid #EDEDED; } input[type=text]{ height:38px; min-height:38px; padding: 0 8px; } textarea,textarea.cnb-input{ padding: 10px 8px; } select{ min-width: 100px; border: 1px solid #ddd!important; height:38px; appearance:none; -moz-appearance:none; -webkit-appearance:none; background: url("https://images.cnblogs.com/cnblogs_com/webqiand/1381628/o_select.png") no-repeat scroll right center #FFF!important; background-color: #FFF; padding-right: 20px; padding-left:5px; } select:invalid { color: red!important; } option{ padding:30px 2px!important; } iframe, iframe body { background:#FFFFFF!important; } input[type="submit"],button{ width: auto; height: 38px; line-height: 38px; padding: 0 18px!important; background-color: #1AA194!important; border: none!important; font-family: Microsoft Yahei,Helvetica Neue,Helvetica,Arial,sans-serif; font-size:14px; letter-spacing: 0; text-align:center!important; color:#FFFFFF!important; border-radius: 6px; cursor: pointer; opacity: .9; filter: alpha(opacity=90); } /* top Nav */ .top-nav{ font-family: Verdana,Arial,Helvetica,sans-serif; font-size:14px; height: 36px; line-height: normal; background: #f8f8f8; border: none; left: 0; top: 0; right: 0; position: absolute; *width: 100%; margin: auto; color: gray; padding:0 15px!important; overflow: hidden; border-bottom:1px solid #DDD; display: flex; align-items: center; } /* 头部 */ .main .head{ width:100%; height:90px; line-height:90px; background-color: #FFF!important; box-shadow:1px 1px 5px rgba(0,0,0,.1); display:flex; top:36px; left:0; align-items: center; margin-left:0!important; padding:0 20px; margin-top:36px!important; } .nav.grid-right-noGutter{ position: absolute; top: 0px; right: 320px; height: 36px; padding: 0; margin: 0!important; display: flex; align-items: center; } .site-title { height:inherit; padding: 0px 4px 0 80px; display: flex; align-items: center; } .site-title a{ display: block; width: 133px; height:51px; line-height:90px; background-image: url(https://common.cnblogs.com/images/logo/logo20170227.png); background-repeat: no-repeat; background-position: 0% 0px; background-size: 133px auto; overflow: hidden; } .site-title a:hover{ background-color:#FFF; } .site-title a img{ display: none; } .blog-title{ height: inherit; padding:0 20px 0 0!important; display: flex; align-items: center } /* 导航 */ .nav-header{ display:none; } ul.nav-list{ font-family: Verdana,Arial,Helvetica,sans-serif!important; height: 42px!important; overflow: hidden; border: none!important; position: absolute; letter-spacing: 0px; top: 60px; left: 350px; z-index: 1000; } ul.nav-list li{ height: 42px!important; border:none!important; float: left!important; display: block!important; width: auto!important; background-color: transparent!important; } ul.nav-list li a{ font-family: Verdana,Arial,Helvetica,sans-serif!important; display: block!important; height: 42px!important; line-height: 40px!important; border:none!important; padding: 0px 15px!important; background-color: transparent!important; font-size: 16px!important; letter-spacing: 0px; } ul.nav-list li a:hover{ color: #0099CC!important; } ul.nav-list li.active{ border-bottom: 2px solid #0099CC!important; } ul.nav-list a.current_nav:hover{ color: #333!important; } /* 主体部分 */ .main{ margin: 0!important; padding: 0!important; background: #F5f5f5!important; border: none!important; } .content{ margin-top:15px!important; /* background: #FFF!important; */ border-left:none!important; padding: 0 10px; } .page-content{ border-left:none!important; background: #FFF!important; margin-left:10px } .comp-container,.cnb-panel-body{ background: #FFF!important; } .content > .left{ min-width:200px!important; max-width:200px!important; margin-top: 0px!important; border-right: 1px solid #eee; width: 200px!important; background-color: #FFF!important; box-shadow: 0 1px 5px rgba(0,0,0,.1); } /* 侧边栏 */ .left h3{ font-weight: bold; height: 36px!important; line-height: 36px!important; border-color: #f2f2f2!important; border-left: 2px solid #009E94!important; padding: 0 10px; background-color: #FAFAFA!important; color: #333!important; font-size: 14px!important; margin-top: 0px!important; } .left li.ng-star-inserted{ display: block!important; margin: 0!important; padding: 0; height: 32px!important; line-height: 32px!important; font-size: 13px!important; min-width: 130px!important; text-overflow: ellipsis!important; overflow: hidden!important; white-space: nowrap!important; padding-left:10px; } .left li.ng-star-inserted a{ color: #333!important; } input[type=submit]::-moz-focus-inner,input[type=button]::-moz-focus-inner,button::-moz-focus-inner{ border: 0!important; padding: 0!important; } /* 右侧 */ .page-content{ padding:0 8px 20px 8px!important } .page-content .comp-container>.ng-star-inserted{ padding-top: 0px!important; top:0!important; } .cnb-panel-header{ margin: 0px; background-color: #FAFAFA; height: 36px; line-height: 36px; border-top: none; border-bottom: 1px solid #eee; font-size: 15px; } /* 表格 */ .table td, .table th { padding-left: 5px!important; padding-right: 5px!important; } .cnb-table table thead>tr th,table th { padding:0!important; height:40px; line-height:40px; border-top: none; border-bottom: 1px solid #dee2e6; } #post_list tr,#Listing tr,#Edit_dgrItems tr{ text-align: left; height: 40px; line-height: 40px; vertical-align: middle; } .table tbody > tr.content > td{ border-bottom: none!important; } td,td a{ font-size: 14px!important; } td li,td li a{ font-size: 13px!important; } .cnb-table table tbody>tr td{ padding-top: 15px; padding-bottom: 15px; } .cnb-table table{ border-bottom: 1px solid #dee2e6; } .cnb-table table a{ font-size:14px; } /* 分页 */ .page-content .indexes a{ display: inline-block; background-color: #FFFFFF!important; height: 28px!important; padding: 0px 12px!important; margin: 0px 5px!important; line-height: 28px!important; color: #666666!important; border: 1px solid #CCC!important; cursor: pointer!important; border-radius: 2px!important; } .page-content .indexes a:hover{ background-color:#FFFFFF!important; color:#1AA194!important; border: 1px solid #1AA194!important; } .page-content .indexes a.current{ color:#FFFFFF!important; border: 1px solid #1AA194!important; background-color:#1AA194!important; } .Pager >div{ height: 30px; line-height: 30px; margin-right: 20px!important; } /* 底部*/ .footer{ height:70px; border:none!important; box-shadow: 0 1px 5px rgba(0,0,0,.1); text-align: center; padding-top: 0px; display: flex; justify-content: center!important; align-items: center; margin:15px 0 0 0!important; } .footer a{ color: #333; } /* 编辑内容页面 */ .field,.panel--main{ background:#FFF!important; } #tinymce{ background:#FFF!important; } /* 评论页*/ .table tbody > tr:nth-child(odd) { background-color: #f5f5f5!important; } .cnb-table table tbody>tr:nth-child(even) { background-color: #fFF; } /* 设置 */ textarea#header-html { width: 100%; height: 600px; } .placeholder{ width: 200px!important; display: inline-block; border-bottom: 1px solid #dDD!important; padding-bottom: 3px; } .grid-column-noGutter .grid-column { max-width:90%!important; } .grid-column-noGutter .grid-column .col{ margin-top:5px!important; margin-bottom:5px!important; } .grid-column .col-12{ position: fixed; bottom: 0; left: 0; width: 100%; background: #FFF; text-align: right; padding-right: 50px; height: 50px; display: flex; align-items: center; justify-content: flex-end; padding-bottom: 0; border-top:1px solid #DDd; } /* 选项 */ fieldset{ border:1px solid #DDD!important; }
旧版css代码:
@-moz-document domain("i.cnblogs.com") {
/*------------ 博客园后台 css开始 -------------*/
/* 通用 */
html {
margin: 0;
padding: 0;
background:#EEEEEE;
}
body,body#Articles{
font-size: 14px!important;
background:#EEEEEE;
margin: 36px 0 5px 0;
padding: 0;
}
iframe {
background:#FFFFFF!important;
}
input[type=text],textarea{
font-family: Microsoft Yahei,Helvetica Neue,Helvetica,Arial,sans-serif!important;
color:#252525!important;
border: 1px solid #ededed!important;
min-height:32px;
}
select{
min- 100px;
border: 1px solid #ddd!important;
height:32px;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background: url("https://images.cnblogs.com/cnblogs_com/webqiand/1381628/o_select.png") no-repeat scroll right center transparent;
background-color: #FFF;
padding-right: 20px;
padding-left:5px;
}
option{
padding:30px 2px;
}
input[type="submit"]{
auto;
height: 38px;
line-height: 38px;
padding: 0 18px;
background-color: #1AA194!important;
border: none!important;
font-family: Microsoft Yahei,Helvetica Neue,Helvetica,Arial,sans-serif;
font-size:14px;
letter-spacing: 0;
text-align:center!important;
color:#FFFFFF!important;
border-radius: 6px;
cursor: pointer;
opacity: .9;
filter: alpha(opacity=90);
}
input[type="submit"]:hover{
opacity: .7;
filter: alpha(opacity=70);
}
#post_list tr,#Listing tr,#Edit_dgrItems tr{
text-align: left;
height: 40px;
line-height: 40px;
vertical-align: middle;
}
img{
border:none!important;
}
td,td a{
font-size: 14px!important;
}
td li,td li a{
font-size: 13px!important;
}
/* 公共css */
/* 去除背景和边框 */
#main {
border: 1px solid transparent;
background-color: transparent;
}
#main,#BodyTable {
margin-top:0;
border: none;
background:#EEEEEE!important;
color: #333;
position: relative;
}
td#Header {
border: none;
}
table#BodyTable {
border: none;
}
form {
background:#EEEEEE!important;
}
/* 顶部 */
#blog_top_nav_block, #top_nav{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size:14px;
height: 36px;
line-height: normal;
background: #f8f8f8;
border: none;
left: 0;
top: 0;
right: 0;
position: absolute;
* 100%;
margin: auto;
color: gray;
padding:0 5px;
overflow: hidden;
}
#top_nav #left,#blog_top_nav_block #site_nav {
height: 36px;
line-height: 36px;
overflow: hidden;
}
#blog_top_nav_block a {
margin-left: 9px;
margin-right: 9px;
padding: 0px;
font-size: 14px !important;
}
#site_nav a:first-child{
margin-left:14px;
}
#site_nav{
padding-left:2px;
}
#span_userinfo a {
margin-left: 3px;
margin-right: 3px;
}
#right, #login_area{
height:36px;
line-height: 36px;
overflow: hidden;
}
#main_nav,#SiteNav{
position: absolute;
z-index: 10;
height:36px;
line-height: 36px;
padding-top:0;
padding-bottom:0;
}
#main_nav{
top: -36px;
right: 250px;
}
#Header #SiteNav{
top: -34px;
right: 230px;
padding:0;
}
#Header #SiteNav a{
padding: 0 8px;
}
/* 头部 */
td#Header {
border-top: none ;
}
#main_head #SiteTitle,#Header #SiteTitle{
height:90px;
line-height:90px;
padding-top:0;
padding-bottom:0;
background-color: #FFF!important;
box-shadow:1px 1px 5px rgba(0,0,0,.1);
display:flex;
align-items: center;
margin-bottom: 20px;
}
#SiteTitle {
padding: 0 4px 0 80px;
}
#Header #SiteTitle{
position: relative;
z-index:11;
}
#blog_title,#BlogTitle{
font-family: Verdana,Arial,Helvetica,sans-serif!important;;
position: absolute;
right: 20px;
top: 20px;
padding: 0;
margin:0;
height:30px;
font-size: 20px!important;
letter-spacing: 0px;
font-weight: bold!important;
float: none!important;
text-align: right!important;
z-index:941;
}
#BlogTitle{
top: 23px;
}
#SiteTitle a{
display: block;
133px;
height:51px;
line-height:90px;
background-image: url(https://common.cnblogs.com/images/logo/logo20170227.png);
background-repeat: no-repeat;
background-position: 0% 0px;
background-size: 133px auto;
overflow: hidden;
}
#SiteTitle a:hover{
background-color:#FFF;
}
#SiteTitle a img{
display: none;
}
#blog_title a, div#BlogTitle a:link{
font-family: Verdana,Arial,Helvetica,sans-serif!important;
color: #6b86b3;
font-size:18px!important;
}
/* 导航 */
#tab_nav,ul#TopNav {
font-family: Verdana,Arial,Helvetica,sans-serif!important;
height: 42px!important;
overflow: hidden;
border:none!important;
position: absolute;
letter-spacing: 0px;
top: 30px;
left: 350px;
z-index:1000
}
#tab_nav li,#TopNav li{
height: 42px!important;
border:none!important;
float: left!important;
display: block!important;
}
#TopNav li{
auto!important;
}
#tab_nav li a,#TopNav li a{
font-family: Verdana,Arial,Helvetica,sans-serif!important;
display: block!important;
height: 42px!important;
line-height: 40px!important;
border:none!important;
padding: 0px 15px!important;
background-color: transparent!important;
font-size: 16px!important;
letter-spacing: 0px;
}
#tab_nav li a:hover,#TopNav li a:hover{
color: #0099CC!important;
}
#tab_nav li a.current_nav,#TopNav li a.current_nav{
border-bottom: 2px solid #0099CC!important;
}
#tab_nav li a.current_nav:hover,#TopNav li a.current_nav:hover{
color: #333!important;
}
ul#TopNav li{
margin-right:3px;
}
/* 内容 */
#main_body{
margin: 0px 5px;
height: auto;
overflow: hidden;
}
#sub_nav,#SubNav{
display: none;
height: 0px!important;
overflow: hidden!important;
border-color: transparent;
border:none!important;
padding-bottom: 0px!important;
}
td.NavHeaderRow {
color: inherit;
background: none;
}
#post_list table th, table.Listing th{
border-bottom:1px solid #eee;
}
#left_container{
margin-top: 0px!important;
border-right: 1px solid #eee;
250px;
background-color: #FFF!important;
box-shadow: 0 1px 5px rgba(0,0,0,.1);
}
#main_container {
margin-left: 260px;
background-color: #FFF!important;
box-shadow: 0 1px 5px rgba(0,0,0,.1);
}
#main_wrap {
margin-left: -260px;
}
td.NavLeftCell {
250px;
background-color: #FFF!important;
box-shadow: 0 1px 5px rgba(0,0,0,.1);
border-left: 5px solid #EEEEEE!important;
padding-top: 36px!important
}
td#Body,#Edit_Contents {
border-left: 1px solid transparent;
}
td#Body #Main{
background-color: #FFF!important;
margin-right:5px;
margin-left: 10px;
box-shadow: 0 1px 5px rgba(0,0,0,.1);
}
#Editor_Results #Editor_Results_Header{
margin-top:0;
}
td div#LeftNavHeader {
position: absolute;
margin-top: 0px!important;
margin: 0px;
border-right: 1px solid #eee;
228px;
margin-left: 5px;
top: 110px;
height: 36px!important;
}
#content_area{
border-left:none;
padding: 10px 0;
}
#post_list {
margin-top:0;
margin-left:0;
padding: 0;
}
#post_list td.post-title, #post_list th.post-title{
padding:0 15px!important;
}
#Body #Main{
padding:0;
}
#LeftNavHeader,.LeftNavHeader,#left_container h2{
font-weight: bold;
height: 36px!important;
line-height: 36px!important;
border-color: #f2f2f2!important;
border-left: 2px solid #009E94!important;
padding: 0 10px;
background-color: #FAFAFA!important;
color: #333!important;
font-size: 14px!important;
margin-top: 0px!important;
}
#left_container li,.left_nav li {
display: block!important;
margin: 0!important;
padding: 0!important;
height: 32px!important;
line-height: 32px!important;
font-size: 13px!important;
min- 130px!important;
text-overflow: ellipsis!important;
overflow: hidden!important;
white-space: nowrap!important;
}
#left_container li a,.left_nav li a{
color: #333!important;
}
#LeftNavHeader{
padding-top:0;
}
#LeftNavHeader h2{
border-top:none;
}
element.style {
font-weight: bold;
}
#LeftNavHeader, .LeftNavHeader, #left_container h2 {
font-weight: bold;
height: 36px!important;
line-height: 36px!important;
border-color: #f2f2f2!important;
border-left: 2px solid #009E94!important;
padding: 0 10px;
background-color: #FAFAFA!important;
color: #333!important;
font-size: 14px!important;
margin-top: 0px!important;
}
#left_nav h2 {
border-top:none;
}
#Editor_Results_Header,#Edit_Header,#Results_Header,#AddFiles_Header,#Editor_Edit_Header{
margin: 0px;
background-color: #FAFAFA;
height: 36px;
line-height: 36px;
border-top: none;
border-bottom:1px solid #eee;
font-size: 15px;
}
#post_list table ,table.Listing{
border-bottom: none;
}
/* 分页 */
.pager,.Pager{
margin: 10px auto;
}
.pager a,.Pager a{
display: inline-block;
background-color: #FFFFFF!important;
height: 28px!important;
padding: 0px 12px!important;
margin: 0px 5px!important;
line-height: 28px!important;
color: #666666!important;
border: 1px solid #CCC!important;
cursor: pointer!important;
border-radius: 2px!important;
}
.pager a:hover,.Pager a:hover{
background-color:#FFFFFF!important;
color:#00ACF0!important;
border: 1px solid #00ACF0!important;
}
.pager a.current,.Pager a.Current{
color:#FFFFFF!important;
border: 1px solid #00ACF0!important;
background-color:#00ACF0!important;
}
.Pager >div{
height: 30px;
line-height: 30px;
margin-right: 20px!important;
}
/* 底部*/
#footer,#Footer{
height:90px;
border:none!important;
box-shadow: 0 1px 5px rgba(0,0,0,.1);
text-align: center;
padding-top: 40px;
}
#Footer div{
text-align: center;
}
#footer a{
color: #333;
}
table#Footer td {
border-bottom: 1px solid transparent;
}
#Edit_Contents, #Edit_Contents {
background:#FFFFFF!important;
}
/* 链接页 */
#Listing td input[type="submit"]{
padding: 0 8px;
height: 26px;
line-height: 26px;
font-size: 13px;
background-color: transparent!important;
color: #002C99!important;
border: 0px solid #1AA194!important
}
#Editor_Edit_AdvancedPanelOther_Contents{
display: block!important;
}
#Configure #Edit_Contents #Edit_lkbPost{ /*保存按钮 */
z-index:200;
overflow: hidden;
position: fixed;
bottom:100px;
right:10%;
100px;
height: 40px;
}
#Edit{
font-family: Microsoft Yahei,Helvetica Neue,Helvetica,Arial,sans-serif!important;
color:#646464!important;
font-size: 14px!important;
}
#Edit textarea{
98%!important;;
}
#Edit #Edit_Contents div{
100%!important;
}
#Edit .infobox{
border-bottom: 1px solid #ccc;
padding-bottom: 2px!important;
margin-right:5px;
color: #666;
80px!important;
}
#Edit #Edit_txbPageBeginHtml{
/*
#Edit_txbSecondaryCss 为 css框
#Edit_txbPageBeginHtml 为页首Html代码框
#Edit_txbPageEndHtml为页脚Html代码框
*/
height:auto!important;
min-height:600px;
}
/* 新增编辑页面 */
#Editor_Edit_APOptions_Header,#Editor_Edit_Advanced_Header,#Editor_Edit_APOptions_Advancedpanel1_Header,#Editor_Edit_APOptions_APSiteCategory_Header,#Results_Add_Header,#AddImages_Header,#Add_Header,#Editor_Edit_AdvancedPanelOther_Header{
margin: 10px 0px 0px 0px;
background-color: #FAFAFA;
height: 36px;
line-height: 36px;
border: 1px solid #E8E8E8;
}
#edit_title b,#edit_body_tip{
height: 30px;
line-height: 30px;
margin-left: 10px;
}
#Editor_Edit_Advanced_Contents,#edit_container,#Editor_Edit_APOptions_Contents,#Editor_Edit_APOptions_Advancedpanel1_cklCategories,#Editor_Edit_APOptions_Advancedpanel1_Contents{
background-color: #FFF!important;
padding: 0px 10px;
}
.defaultSkin td.mceToolbar,.mceStatusbar,div#Main div.Edit{
background: #FFF!important;
}
iframe html{
background: #FFF!important;
}
#Editor_Edit_txbTitle{
60%!important;
}
body#tinymce{
background-color:#fff;
margin: 0!important;
padding: 10px!important;
}
/* 相册 */
.Header td{
border-bottom: 1px solid #DDD!important;
}
.ImageThumbnailImage{
padding: 5px;
}
}