更换了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;
}

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

人脸识别考勤操作指南

人脸识别考勤操作指南(刷卡+人脸) 人脸识别考勤操作指南(人脸)
  • ycpyang2008
  • ycpyang2008
  • 2013年06月08日 23:13
  • 793

今天换了一个BLOG

嘿嘿,今天还是回到CSDN这个家庭,以前来过一段时间后就没有再来。今天还是捡起心情回来,换了以前的ID名。也挂起了这个BLOG,把以前存放在另外一个BLOG的文章转回这里……今天只转个人原创文章,以后...
  • bpfish
  • bpfish
  • 2004年08月19日 10:33
  • 720

CSS FTP上传网页图解教程

FTP上传图解教程-CuteFTP、Leap FTP2、FlashFXP 之间使用方法基本相同、只是界面上不同。推荐使用FlashFXP 一、利用FTP软件上传文件 - CuteFTP ...
  • qachenzude
  • qachenzude
  • 2012年08月10日 17:55
  • 823

blog换了spaces.msn.com/members/openhero

换工作以后,blog也换了也不是因为换工作的原因更多的,或许大家都用msn的blog或许,现在的心情已经不在是暑假那几天不愉快的情况了现在好多了清醒多了,不会为一点点小事去烦心或许是自己真正算是离开学...
  • OpenHero
  • OpenHero
  • 2005年11月28日 21:33
  • 2531

网站更换域名空间时需要注意什么?

 网站换域名、换IP都是站长司空见惯的事,如何在更换的同时把损失减少到最少,对注重SEO优化的站长就很重要了。小编本身有3年的个人建站经验给大家说说网站更换的一些注意事项。 一、网站域名更换注...
  • u014780643
  • u014780643
  • 2014年05月30日 14:09
  • 524

python更改或者查看当前工作目录

网上已经有很多人发了,我只是为了自己以后使用方便,所以从新再写一遍。 更改当前工作目录: 使用的事os库,例如更改到桌面,直接使用import os os.chdir(r"C:\Users\adm...
  • u014779006
  • u014779006
  • 2016年01月19日 21:24
  • 176

点击更多文字,显示更多文字样式。再次点击更多文字之外的元素任意某处,变回原来样式

点击更多文字,显示更多文字样式。再次点击更多文字之外的元素任意某处,变回原来样式...
  • hexiaoniao
  • hexiaoniao
  • 2017年06月26日 11:15
  • 259

修改后的Blog样式

div{    font-size: 12px;}.posttitle{  padding: 5px 0px 5px 0px;} a.posttitle:link, a.posttitle:visit...
  • runmin
  • runmin
  • 2004年06月23日 09:31
  • 891

目前blog的样式

 .headermaintitle{...}{font: 25px Verdana, Tahoma, sans-serif !important;line-height: 160% !importan...
  • fancylea
  • fancylea
  • 2008年01月13日 22:15
  • 784

设置eclipse的编辑器主题样式,让代码样式更好看

今天是9月30日,O(∩_∩)O哈哈~ 地址: http://blog.csdn.net/hujkay 作者:Jekkay Hu(34538980@...
  • hujkay
  • hujkay
  • 2013年09月30日 12:44
  • 6971
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:更换了blog的样式
举报原因:
原因补充:

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