博客园后台样式
效果图:
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-width : 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" ]{ width : 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 ; * width : 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 ; width : 133px ; height : 51px ; line-height : 90px ; background-image : url (https://common.cnblogs.com/images/logo/logo 20170227 .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{ width : 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 ; width : 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 { width : 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 ; width : 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 h 2 { 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-width : 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 h 2 { border-top : none ; } element.style { font-weight : bold ; } #LeftNavHeader, .LeftNavHeader, #left_container h 2 { 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 h 2 { border-top : none ; } #Editor_Results_Header,#Edit_Header,#Results_Header, #AddF iles_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% ; width : 100px ; height : 40px ; } #Edit{ font-family : Microsoft Yahei, Helvetica Neue, Helvetica , Arial , sans-serif !important ; color : #646464 !important ; font-size : 14px !important ; } #Edit textarea{ width : 98% !important ;; } #Edit #Edit_Contents div{ width : 100% !important ; } #Edit .infobox{ border-bottom : 1px solid #ccc ; padding-bottom : 2px !important ; margin-right : 5px ; color : #666 ; width : 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_Advancedpanel 1 _Header,#Editor_Edit_APOptions_APSiteCategory_Header,#Results_Add_Header, #Add Images_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_Advancedpanel 1 _cklCategories,#Editor_Edit_APOptions_Advancedpanel 1 _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{ width : 60% !important ; } body#tinymce{ background-color : #fff ; margin : 0 !important ; padding : 10px !important ; } /* 相册 */ .Header td{ border-bottom : 1px solid #DDD !important ; } .ImageThumbnailImage{ padding : 5px ; } }