一直认为blog样式的更改会是很麻烦的,可是经过这次的学习,发现原来也是很简单的,当然,这要你首先会一点html和css的基础知识.直奔主题吧,下面来讲讲我更改blog样式的过程.
我的几个blog,无论是csdn的,还是donews的,都是采用asp.net weblogs的dottext系统,这个系统是由Scott Watermasysk制作的,后来好像是被MS收购去了,如果想更深入的了解你的blog的话,最好是去看他的源代码,可是我不懂.net,这个且不表了.这个系统提供了用户自己修改css的功能,你可以在后台管理--->选项--->配置中找到用户自军定义css的选项,在这里可以输入自己定义的样式.
在输入样式之前,你需要确定一件事情,那就是网页中各个标签的id都是怎么定义的.dottext提供了几个默认的模板,你可以在配置中选择.不同的配置,页面中标签的定义是不同的,如果你打算自己来改样式的话,一般可以选择lighty这个模板,这个模板改起来相对要好一点.
选好了模板之后,你打你的blog首页,你就可以通过查看源代码来看网页中的标签了.现在,你就可以进行最重要的css代码编写的过程了.
下面是我写的一个css的简单的样式,通过自己不断的尝试,就可以做出各种风格的页面来.但是由于受到dottext系统的限制,我们不能改为三栏的页面,这算是一个遗憾吧.
body{margin:0px;
background: #fff url("") repeat-x;
font-family:ms shell dlg;}
#classnavbar {
display: none;
}
#nadframe {
display:none;
}
h1 {margin:0px;
background:url("") no-repeat;
height:23px;padding-right:35px;
font-family: ms shell dlg;
font-size:24px;font-weight:bold;
border-bottom:1px dotted #111;
}
h1 a:link,h1 a:active,h1 a:hover{color:#444}
#Header1_HeaderTitle{color:#339900;float:left;padding:0px 0px 10px 50px;text-align:left;width:100%}
#main {
width: 74%;
position: absolute;
margin-top: 0px;
border-right: 1px dotted #000000;
padding-top: 20px;
margin-bottom: 10px;
padding-bottom: 40px;
background:#fff;
}
#rightmenu {
float: right;
margin-left: 76%;
margin-top: 10px;
padding-left: 0px;
background-color: transparent;
position: absolute;
word-wrap:break-word;
font-size: 10pt;
}
#footer {
clear: both;
width: 100%;
border-top: none;
font-size: 8pt;
padding-top: 5px;
text-align: center;
position: relative;
visibility: hidden;
}
a:visited,
a:active,
a:link {
color: #80CE00;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration : underline;
}
blockquote {
background: #F9F9F9;
border: 1px solid #F4F4F4;
color: #5B5B5B;
font-size: 10pt;
font-style: normal;
line-height: 150%;
padding: 0px 11px 0px 11px;
}
h1 a:visited,
h1 a:active,
h1 a:link {
}
h1 a:hover {
}
.post {
padding-left: 40px;
padding-right: 0px;
font-size: 14px;
line-height:200%
}
h5{font-size:14px;font-family:bold}
.postTitle {
border-bottom: 1px dotted #D6D6D6;
color: #000000;
font-size: 14px;
font-weight: bold;
margin:0px 30px 0px 30px;
}
.postText {
font-size: 14px;
line-height:180%
text-align:right;
margin:0px 30px 0px 30px;
}
h3 {
font-size: 14px;
border-bottom: 1px dotted #D6D6D6;
color: #000000;
background-color: transparent;
}
.listitem {width:180px;
border-bottom: 1px dotted #E4E4E4;
padding-bottom: 3px;
padding-top: 3px;
}
input,
label {
color: Gray;
font-family: Verdana;
font-size: 10pt;
}
input.text {
width: 381px;
}
li {
font-size: 10pt;
font-style: normal;
}
h2{padding: 0px 0px 0px 20px;margin:0}
.dateTitle {
color: #ccc;
font-size: 14px;
font-weight: bold;
padding: 0px 0px 0px 20px;
margin:0px 0px 0px 40px;
height:26px;
border-bottom:1px dotted #ccc;
}
p.date img {
vertical-align: middle;
}
.postFoot {
border-bottom: 1px dotted #D6D6D6;
color: #D3D3D3;
text-align: right;
font-size: 9pt;
margin:0px 30px 0px 30px;
}
span.highlight {
background-color: transparent;
}
td {
font-size: 10pt;
}
textarea {
color: #000000;
font-size: 10pt;
height: 200px;
width: 300px;
}
#MyLinks1_XMLLink {
visibility: hidden;
display: none;
}
#MyLinks1_Syndication {
visibility: hidden;
display: none;
}
.CommentForm {
border-top: 1px solid #D6D6D6;
padding-top: 20px;
color: #A9A9A9;
padding-left: 70px;
padding-right: 40px;
margin:0px 30px 0px 30px;
}
#comments {
color: #888;
padding-left: 70px;
padding-right: 40px;
font-size: 10pt;
}
#relatedlinks ul {
list-style: none;
margin-left: 10px;
padding: 0px;
}
#rightmenu h3 {
width:100px;
background-color: transparent;
border: none;
border-bottom: 1px dotted #D6D6D6;
color: #111;
font-size: 12px;
margin: 10px 20px 0px 0px;
padding: 2px 5px;
}
#rightmenu ul {
border: none;
list-style: none;
margin: 0px;
padding: 5px;
font-size: 9pt;
line-height:150%;
}
#rightmenu li {
font-size: 9pt;
}
#tagline {
color:#444;
font-size: 12px;
position : absolute;
top : 30px;
left : 250px;
margin : 0px;
margin-right : 0px;
font-family:ms shell dlg;
}
.block_title{font-size:14px;font-weight:bold}
.code{float:left;width:90%;padding:10px;border:1px dotted #d9d9d9;background:#f4f4f4;}
.postFoot{clear:both;padding-top:6px}
br{clear:both;}
i {
font-style: normal;
color: Green;
}