我的博客样式

此文长期更新,具体根据我博客的样式判定.

架构: 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;
  width: 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{
  width: 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;
  width: 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{
  width: 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-width: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{
  width:100%;
}
#mainContent{
  width:80%;
}

当然了,下次要加上特殊页面的排版要更唯美些.

todo: * BOOK pages typography

posted @ 2014-08-24 19:28  zball  阅读(363)  评论(3编辑  收藏  举报