此文长期更新,具体根据我博客的样式判定.
架构: BlackLowKey
页面CSS:
div.prob{ box-shadow:0 0 4px #ccf; padding: 2px; text-align:left; border-radius:6px; } div.prob h2{ font-size:30px !important; font-family:Courier New,微软雅黑; font-weight:normal !important; text-align:center; text-shadow:0 0 1px #888; } div.prob h3{ font-size:20px !important; font-family:Courier New,微软雅黑; font-weight:normal !important; border-left:4px solid #39f; text-shadow:0 0 1px #aaa; padding-left:3px; } pre.indent,div.indent{ text-indent:2em; font-family:Courier New,宋体; text-shadow:0 0 1px #aaa; } div.prob pre.indent,div.prob div.indent{ font-size:16px; } .mono{ font-family:Monaco,Consolas,Ubuntu Mono; padding:5px; border:1px solid #ccc; border-radius:5px; background:#eee; text-shadow:0 0 1px #666; } *::selection{ background:#acf; } body,#navigator{ background:#0068c9; } #blogTitle h1 a, #blogTitle h2, #navList a:link, #navList hover, #navList a:visited, #navList a:active{ text-shadow:none; border:none !important; } .headermaintitle{ font-size:40px; } #navList { height: 60px; float: left; margin-left: 0; 800px; } #navList li { float: left; height: 60px; } #navList li a{ margin-left: 6px; } #navList li:hover { background:rgba(255,255,255,0.4); } a:hover,.postCon a:hover{ text-decoration:none !important; border-bottom:2px solid #acf; } .postCon a:link, .postCon a:visited, .postCon a:active { text-decoration: none; border-bottom: 2px dashed #acf; color:#39f; padding-left:0px; margin-left: 2px; } .postTitle,div.newsItem .catListTitle { font-size: 14px; font-weight: bold; padding: 10px 100px 10px 20px; background: #E5F0FC; line-height: 1.5em; clear: both; border:none; border-left: 5px solid #1fa6e6; } .newsItem { background: #ECF5FF; padding: 0 0 5px 0; margin-bottom: 2em; } .cnblogs_Highlighter *{ font-family:Monaco,Ubuntu Mono,Consolas !important; } .CalNextPrev{ 20px !important; height: 20px !important; background: #acf; padding: 0 !important; font-size: 16px !important; text-align: center !important; } .CalNextPrev:hover{ background: #39f; } .CalNextPrev a:hover,.CalNextPrev:hover a{ color:white; } .CalTitle{ background:#acf; border:none; } .Cal tbody tr:nth-child(2){ background:#cdf; } .Cal tbody tr:nth-child(1) td{ padding:0px !important; } .CalDayHeader{ border:none; } .Cal tbody tr:nth-child(n-2) td{ background:#eef; } .CalOtherMonthDay{ background:#def !important; } .CalWeekendDay{ background:#4df !important; } .CalTodayDay{ background:#aaf !important; color:white; font-weight:bold; } input[type="text"]{ margin:0px; border:1px solid transparent; border-bottom:1px solid #acf; } input[type="text"]:hover{ margin:0px; border:1px solid #e7e7e7; border-bottom:1px solid #acf; } input[type="text"]:focus{ box-shadow:0 0 2px #aaf; border:1px solid transparent; border-bottom:1px solid #acf; } input:focus{ outline:none; } input[type="button"] { margin: 0px; border: none; background: #29af3f; color: white; font-weight: bold; } input[type="button"] { margin: 0px; border: none; background: #198F2D; color: white; font-weight: bold; } .catListEssay h3, .catListLink h3, .catListNoteBook h3, .catListTag h3, .catListPostCategory h3, .catListPostArchive h3, .catListArticleArchive h3, .catListImageCategory h3, .mySearch h3, .catListComment h3, .catListView h3, .catListFeedback h3, #blog-sidecolumn .catListTitle { font-size: 14px; font-weight: bold; padding: 10px 100px 10px 20px; background: #E5F0FC; line-height: 1.5em; clear: both; border:none; border-left: 5px solid #1fa6e6; } .topicListFooter { background: #6EEBCD; margin: 0px; height: 20px; line-height: 20px; } .topicListFooter a { display:inline-block; background: #6EEBCD; margin: 0px; height: 20px; line-height: 20px; } .topicListFooter a:hover { display:inline-block; background: #3AB194; margin: 0px; height: 20px; line-height: 20px; color:white; font-weight:bold; } #comment_nav a { padding-left: 0px; }
宽屏版。。
pre{ font-family:Courier New; } div.prob{ box-shadow:0 0 4px #ccf; padding: 2px; text-align:left; border-radius:6px; } div.prob h2{ font-size:30px !important; font-family:Courier New,微软雅黑; font-weight:normal !important; text-align:center; text-shadow:0 0 1px #888; } div.prob h3{ font-size:20px !important; font-family:Courier New,微软雅黑; font-weight:normal !important; border-left:4px solid #39f; text-shadow:0 0 1px #aaa; padding-left:3px; } pre.indent,div.indent,p.indent,blockquote.indent{ text-indent:2em !important; font-family:Courier New,宋体; text-shadow:0 0 1px #aaa; } div.prob pre.indent,div.prob div.indent,div.prob blockquote.indent{ font-size:16px; } blockquote.indent{ border-left: 3px solid #999; padding-left:2px; font-weight:bold; color:#444; } blockquote.indent.noindent{ text-indent:0px; } .mono,textarea,.syntaxhighlighter code{ font-family:Monaco,Consolas,Ubuntu Mono; padding:5px; border:1px solid #ccc; border-radius:5px; background:#eee; text-shadow:0 0 2px rgba(200,200,200,0.6); } *::selection{ background:#acf; } body,#navigator{ background:#0068c9; } #blogTitle h1 a, #blogTitle h2, #navList a:link, #navList hover, #navList a:visited, #navList a:active{ text-shadow:none; border:none !important; } .headermaintitle{ font-size:40px; } #navList { height: 60px; float: left; margin-left: 0; 800px; } #navList li { float: left; height: 60px; } #navList li a{ margin-left: 6px; } #navList li:hover { background:rgba(255,255,255,0.4); } a:hover,.postCon a:hover{ text-decoration:none !important; border-bottom:2px solid #acf; } .postCon a:link, .postCon a:visited, .postCon a:active { text-decoration: none; border-bottom: 2px dashed #acf; color:#39f; padding-left:0px; margin-left: 2px; } .postTitle,div.newsItem .catListTitle { font-size: 14px; font-weight: bold; padding: 10px 100px 10px 20px; background: #E5F0FC; line-height: 1.5em; clear: both; border:none; border-left: 5px solid #1fa6e6; } .newsItem { background: #ECF5FF; padding: 0 0 5px 0; margin-bottom: 2em; } .cnblogs_Highlighter *{ font-family:Monaco,Ubuntu Mono,Consolas !important; } .CalNextPrev{ 20px !important; height: 20px !important; background: #acf; padding: 0 !important; font-size: 16px !important; text-align: center !important; } .CalNextPrev:hover{ background: #39f !important; } .CalNextPrev a:hover,.CalNextPrev:hover a{ color:white; text-decoration:none !important; border:none !important; } .CalTitle{ background:#acf; border:none; } .Cal tbody tr:nth-child(2){ background:#cdf; } .Cal tbody tr:nth-child(1) td{ padding:0px !important; } .CalDayHeader{ border:none; } .Cal tbody tr:nth-child(n-2) td{ background:#eef; } .CalOtherMonthDay{ background:#def !important; } .CalWeekendDay{ background:#4df !important; } .CalTodayDay{ background:#aaf !important; color:white; font-weight:bold; } input[type="text"]{ margin:0px; border:1px solid transparent; border-bottom:1px solid #acf; } input[type="text"]:hover{ margin:0px; border:1px solid #e7e7e7; border-bottom:1px solid #acf; } input[type="text"]:focus{ box-shadow:0 0 2px #aaf; border:1px solid transparent; border-bottom:1px solid #acf; } input:focus,textarea:focus{ outline:none; } input[type="button"] { margin: 0px; border: none; background: #29af3f; color: white; font-weight: bold; } input[type="button"]:hover { margin: 0px; border: none; background: #198F2D; color: white; font-weight: bold; } .catListEssay h3, .catListLink h3, .catListNoteBook h3, .catListTag h3, .catListPostCategory h3, .catListPostArchive h3, .catListArticleArchive h3, .catListImageCategory h3, .mySearch h3, .catListComment h3, .catListView h3, .catListFeedback h3, #blog-sidecolumn .catListTitle { font-size: 14px; font-weight: bold; padding: 10px 100px 10px 20px; background: #E5F0FC; line-height: 1.5em; clear: both; border:none; border-left: 5px solid #1fa6e6; } .topicListFooter { background: #6EEBCD; margin: 0px; height: 20px; line-height: 20px; } .topicListFooter a { display:inline-block; background: #6EEBCD; margin: 0px; height: 20px; line-height: 20px; } .topicListFooter a:hover { display:inline-block; background: #3AB194; margin: 0px; height: 20px; line-height: 20px; color:white; font-weight:bold; } #comment_nav a { padding-left: 0px; } .comment_digg,.comment_bury,.comment_actions a{ padding: 0px !important; margin-left: 5px; } #navList li a{ margin:0px; padding:20px; } .statusB{ display:block; border-4px; padding:2px; border-style:solid; border-radius: 10px; } .statusB.AC{ border-color:green; } .statusB.noAC{ border-color:red; } .statusB.wait{ border-color: rgb(255, 163, 0); background: rgb(255, 232, 142); } /*added*/ #home,#main{ 100%; } #mainContent{ 80%; }
当然了,下次要加上特殊页面的排版要更唯美些.
todo: * BOOK pages typography