htmlor’s blog

应ak47的要求，贴出自己在Almost Spring模板基础上修改的css代码。这个css分两部分，第一部分中和、抵消原css的影响，第二部分才是实现样式的正主儿。如果要做新模板，只第二部分就够了。

第一部分：

/* counteract old styles */
p{
  line-height:normal;
}
#wapper,
#header,
#content,
#sidebar,
#footer{
  display:block;
  margin:0;
  padding:0;
}
#footer p{
  padding:0;
  background-color:transparent;
  border-top-width:0;
}
#sidebar h2{
  display:block;
  padding:0;
  background:transparent;
}
#sidebar h2 a{
  color:#06d;
}
#sidebar h2 a:hover{
  background:#06d;
  color:#fff;
}
#sidebar ul ul{
  border-top-width:0;
  background-color:transparent;
}
#sidebar ul ul li{
  padding:0;
  border-bottom-width:0;
}
#sidebar ul ul li a{
  display:inline;
  margin:0;
  padding:0;
  width:auto;
}
#sidebar ul ul li a:hover{
  background-color:#06d;
}
.posttitle a{
  float:none;
  padding:0;
  background:transparent;
}
.posttitle a:link,
.posttitle a:visited{
  color:#06d;  
}
.posttitle a:hover,
.posttitle a:active{
  background:#06d;
  color:#fff;
}
.postmeta{
  padding-top:0;
  background:transparent;
}
.permalink,
.commentslink{
  margin:0;
  padding:0;
  background:transparent;
}
#commentlist{
  border-bottom-width:0;
}
#commentlist li{
  border-top-width:0;
  background-color:transparent;
}
/* end */

第二部分：

/* my styles */
body{
  margin:0;
  background:#fff;
}
body,
table,
ul,
ol,
input,
select,
textarea{
  color:#000;
  font-size:12px;
  font-family:"lucida sans unicode";
}
h1,
h2,
h3{
  color:#000;
  font-family:"lucida sans unicode";
}
a:link{
  color:#06d;
  text-decoration:none;
}
a:visited{
  color:#36a;
  text-decoration:none;
}
a:hover,
a:active{
  background-color:#06d;
  color:#fff;
  text-decoration:none;
}
img{
  border-width:0;
}
form{
  margin:0;
  padding:0;
}

/* layout */
#wrapper{
  width:75% !important;
  width:900px;
  min-width:900px;
}
#header{
  clear:both;
  width:100%;
}
#content{
  float:left;
  width:75%;
}
.post{
  clear:both;
}
#sidebar{
  float:right;
  width:23%;
}
#footer{
  clear:both;
  width:100%;
}
#wapper,
#header,
#content,
#sidebar,
#footer{
  overflow:hidden;
}

/* main */
#wrapper{
  margin:auto;
}
#header{
  margin-bottom:20px;
  padding:20px 0;
  background:url(/htmlor/files/2006/07/u10_big.jpg) no-repeat right bottom;
  border-bottom:1px dashed #ccc;
}
#content{
}
#sidebar{
  background:#f0f0f0;
}
#footer{
  border-top:1px dashed #ccc;
}
#header h1{
  margin:0;
  color:#000;
  font-size:24px;
}
#header h1 a{
  display:block;
  width:195px;
  height:35px;
  background:url(/htmlor/files/2006/08/blogtitle.gif) no-repeat left top;
  color:#fff;
  font-size:1px;
}
#content h2{
  margin:0 0 1em 0;
  font-size:12px;
}
/* article body */
.post{
  margin:0 0 2em 0;
}
#content .post .posttitle{
  margin:0 0 0.5em 0;
  color:#f60;
  font-size:16px;
  letter-spacing:0.25em;
}
.post .postmeta{
  margin:0 0 1em 0;
  color:#666;
  font-size:10px;
  font-family:verdana;
}
.post .postentry{
}
#content .post .postentry h2{
  margin:1.5em 0 1em 0;
  color:#000;
  font-size:14px;
}
.post .postentry h3{
  margin:1.5em 0 1em 0;
  color:#f60;
  font-size:14px;
}
.post .postentry p{
  margin:0 0 1em 0;
  line-height:1.5em;
  font-size:14px;
}
.post .postentry table{
  font-size:14px;
}
.post .postentry ul,
.post .postentry ol{
  margin:0 0 1em 2em;
  padding:0;
  line-height:1.5em;
  font-size:14px;
}
.post .postentry ul{
  list-style:square;
}
.post .postentry blockquote{
  width:90%;
  margin:0 0 1em 2em;
  padding:0 10px;
  border-left:5px solid #ddd;
  font-family:arial;
}
.post .postentry pre{
  margin:0 auto 1em auto;
  padding:10px;
  background:#f0f0f0;
  border:1px dashed #ddd;
  white-space:pre;
  font-size:12px;
  font-family:"courier new";
}
.post .postentry code,
.post .postentry kbd{
  color:#000;
  font-size:12px;
  font-family:"courier new";
}
.post .postentry cite{
  font-size:12px;
  font-style:normal;
  font-family:"lucida sans unicode";
}
.post .postfeedback{
  margin:0;
  font-size:10px;
  font-family:verdana;
}
.post .postfeedback .permalink{

  margin-right:10px;
}
.post .postfeedback .commentslink{
}
/* display comments */
#comments{
  margin:0 0 1em 0;
  color:#f60;
  font-size:12px;
}
#commentlist{
  margin:0 0 1em 0;
  padding:0;
}
#commentlist li{
  margin:0;
  padding:0.7em 0;
  border-bottom:1px solid #eee;
  font-size:12px;
}
#commentlist li.alt{
  background:#f0f0f0 !important;
  padding:0.7em 0.5em;
}
#commentlist li .commenttitle{
  margin:0;
  font-size:12px;
}
#commentlist li .commentmeta{
  margin:0 0 0.7em 0;
  color:#666;
  font-size:10px;
  font-family:verdana;
}
#commentlist li p{
  margin:0;
}
.small{
  text-align:right;
  margin:0 0 1em 0;
}
/* post comment */
#postcomment{
  margin:0 0 1em 0;
  color:#f60;
  font-size:12px;
}
#commentform{
  margin:0 0 2em 0;
}
#commentform p{
  margin:0 0 0.5em 0;
}
#commentform input,
#commentform textarea{
  border:1px solid #ddd;
  background:#f0f0f0;
}
#commentform textarea{
  width:99%;
}
#commentform #submit{
  width:120px;
  height:25px;
  cursor:pointer;
  background:#f60;
  border-width:0;
  color:#fff;
}
/* sidebar */
#sidebar ul{
  margin:10px;
  padding:0;
  list-style-type:none;
}
#sidebar ul h2{
  margin:0 0 0.5em 0;
  font-size:12px;
}
#sidebar ul ul{
  margin:0 0 1.5em 1.3em;
  line-height:1.5em;
  color:#666;
  list-style:square;
}
#sidebar ul ul li img{
  vertical-align:middle;
}
#footer p{
  text-align:center;
  margin:1em 0 2em 0;
  color:#666;
  font-size:10px;
  font-family:verdana;
}