贴出自己修改的css代码
应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;
}
![htmlor [at] gmail.com](http://static.blog.htmlor.com/myimages/htmlor_gmail.gif)

3条评论 »
火木
2006-09-03 22:20
想知道你的 favicon 怎么弄上去的,呵呵
htmlor
2006-09-03 22:57
查看这个页面的源文件,查找 shortcut icon ,这一句就是增加favicon的。
后台管理里自定义一个sidebar,然后加上这句就行了。
火木
2006-09-03 23:17
谢谢,搞定了
评论feed