更换了blog的样式

原创 2006年06月11日 15:52:00

     一直认为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;
}

版权声明:本文为博主原创文章,未经博主允许不得转载。

在android4.2中,Google更换了android的蓝牙协议栈,从Bluez换成Bluedroid,我也是初涉这个方面,顺便记录一下。 http://source.android.com/d

在android4.2中,Google更换了android的蓝牙协议栈,从Bluez换成Bluedroid,我也是初涉这个方面,顺便记录一下。 http://source.android.com/d...

Alienware TactX 更换了德国樱桃微动DG6

此前鼠标单击变双击了,更换了德国樱桃微动DG6,从卖家http://item.taobao.com/item.htm?id=8261075784  中拿到微动,15元买的焊锡,10元买的吸锡器。动手搞...
  • jaminwm
  • jaminwm
  • 2012年10月27日 23:38
  • 4541

ConcurrentHashMap源码剖析(JDK1.7实现,JDK1.8更换了实现)

转至:http://www.importnew.com/21781.html ConcurrentHashMap是Java5中新增加的一个线程安全的Map集合,可以用来替代HashTable。对...
  • Dax1n
  • Dax1n
  • 2017年03月25日 21:35
  • 457

自定义CSDN Blog的CSS样式

原文传送门:http://blog.csdn.NET/dux003/archive/2009/11/08/4786371.aspx   csdn blog css自定义设置 可以在博客的配置页面...
  • GIS_BT
  • GIS_BT
  • 2017年02月13日 11:48
  • 92

Blog13@linux延迟、定时任务介绍及临时文件时间更改

摘要:延迟、定时任务介绍及临时文件时间更改

【《代码整洁之道》精读与演绎】之一 让代码比你来时更干净http://blog.csdn.net/poem_qianmo/article/details/52079996

原文地址:http://blog.csdn.net/poem_qianmo/article/details/52079996 “我们就是一群代码猴子,上蹿下跳,自以为领略了编程的真谛。可惜当我...

easyui dialog和messager样式更改

  • 2017年06月15日 11:17
  • 878B
  • 下载

鼠标样式更改为vista

  • 2010年02月22日 23:49
  • 39KB
  • 下载

iOS花式更改系统自带UINavigationBar导航栏样式,让你拥有更纯净,更强自定义的导航栏!!!It's amazing

在开发过程中,如果你用的是传统的样式顶部20px的statusbar加上下面44高度的navigationBar的话, 这样的产品经理真的是太好了,很简单,也很传统,但是现在越来越多的人自定义导航栏,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:更换了blog的样式
举报原因:
原因补充:

(最多只允许输入30个字)