花了一段时间看css把这个新blog个性化了一番——还好这里和csdn用的是一个blog系统,省了不少事情。

 这里写的是我在yesky上的blog(已弃用)的个性化设置心得,能量有限,仅仅是找了一晚上资料的结果,还请不要见笑。

现改到这个样子,看起来还挺合心意,以后准备事情况在作定夺,可能会加上背景换一个title的图片,然后加上一个可用的计数器和google,也有可能加入google的广告——这里可以插入代码真是很不错的,给人积极性亚——要是能提供“相片册”,支持连接外部图片,然后上传图片中提供对swf文件的支持就更好了。

在页面中可以打开源文件,这样就可以看到所调用的css文件的地址了。从系统中调用的默认css文件在这里:blog.yesky.com/Blog/Skins/Cogitation/style.css;然后在管理/选项/设置/定制CSS选择器中输入要更改的css属性框,这样系统会用自定义的属性框覆盖默认的,已完成个性化。个性化的css部分在这里:blog.yesky.com/Blog/用户名/customcss.aspx,用文本编辑器打开就可以了,当然专用软件更好。

我用的是Cogitation样式,这里对这个文件进行以下注解——我也是现买现用,因为以后可能还用的着,不想自己刚才的3个小时白白浪费掉,所以这里简单注解一下。

........发现“插入代码”功能不好用——或者我还不会用——也没有help。。。。。空欢喜了。。。。。

//body值得可能是主体内容吧——不确定
body {
 font-size : 12px;
 font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
 margin : 0px;
 word-break:break-all;
}
//——不确定

td
{
 font-size : 12px;
 font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}
//指的是超连接文字相关的属性。

a:visited,
a:active,
a:link { 
 color: Navy;
 text-decoration : none;
}

a:hover {
 text-decoration : underline;
}
//h1,h2,h3,h4,h5号字号的定义,和这些字号的超链接效果定义。

h1 {
 margin : 0px;
 margin-top : 10px;
 margin-bottom : 5px;
 font-size : 18px;
}

h1 a:visited,
h1 a:active,
h1 a:link {
 color : #000;
}

h1 a:hover {
 color : #47F;
 text-decoration : none;
}

h2 {
 margin-top : 10px;
 margin-bottom : 3px;
 font-size : 13px;
}

h3 {
 font-size : 12px;
}

h5 {
 margin: 0px;
 padding: 0px;
}
//——不确定是什么文字的定义

p {
 margin: 10px 0px;
}
页面底部版权的定义

#authors ul {
 list-style : none;
 padding : 0px;
 margin : 0px 5px;
}
//左边news项的定义

div.News
{
 font-size: 11px;
 font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
 padding: 5px;
 padding-left: 10px;
}
——顶上的一个东西,还不知道具体指哪

.HeaderTitle
{
 font-size : 1.5em;
 margin: 0px;
}
//指的是“龙龙眯起来”的定义

.HeaderTitles
{
 padding-top: 10px;
 padding-left: 10px;
 padding-right: 10px;
 padding-bottom: 10px;
 width: 100%;
}

.HeaderTitles a:visited,
.HeaderTitles a:active,
.HeaderTitles a:link,
.HeaderTitles a:hover
{
 color: White;
 text-decoration : none;
 font-size: 18px;
 font-weight: normal;
}
//应该是顶部的那个聚合,管理什么的部分

.HeaderBar
{
 font-weight: normal;
 font-size: 11px;
 border-collapse: collapse;
 background-image: url(images/BlueTabBack.gif);
   background-repeat:repeat-x;
}

.HeaderBar a:visited,
.HeaderBar a:active,
.HeaderBar a:link
{
 color: WhiteSmoke;
 text-decoration: none;
 font-weight: normal;
}
——不明

.HeaderBarTab
{
 background-image: url(images/BlueTabFace.gif);
   background-repeat:repeat-x;
   border-collapse: collapse;
   padding: 0px;
}
//就是顶上的那个统计,右边那个

.BlogStatsBar
{
 text-align:right;
 font-weight: normal;
 font-size: 11px;
 color: Silver;
 border-collapse:collapse;
}
//日期,每个post下边那个吧

p.date img {
 vertical-align : middle;
}

p.date {
 font-size : 11px;
 font-weight : bold;
 margin-bottom : 0px;
 padding-top: 2px;
 padding-right: 0px;
 padding-bottom: 4px;
 text-align: right;
}
——不明

blockquote {
 font-style : italic;
}
//顾名思义,每个post的题目链接

div.postTitle a:visited,
div.postTitle a:active,
div.postTitle a:link
{
 color: Navy;
 text-decoration : none;
}
//每个post框的样式

div.post
{
 border-right: gainsboro 2px solid;
 border-top: gainsboro 2px solid;
 border-left: gainsboro 2px solid;
 border-bottom: gainsboro 2px solid;
}
//post题目的样式

div.postTitle
{
 padding-left: 3px;
 font-weight: bolder;
 font-size: 13px;
 padding-bottom: 3px;
 padding-top: 3px;
 border-bottom: gainsboro 1px solid;
 background-color: whitesmoke;
}
//
每个文章和回复的内容文字属性

div.postText
{
 padding-right: 10px;
 padding-left: 3px;
 font-size: 13px;
 padding-bottom: 5px;
 padding-top: 10px;
}
//post底部那个小框的样式

div.postFoot
{
 background-color: WhiteSmoke;
 border-top: gainsboro 1px solid;
 font-size: 11px;
 padding-right: 3px;
 padding-left: 3px;
 padding-bottom: 1px;
 padding-top: 1px;
 text-align: right;
}
//顶上的样式,那个深蓝色图片的样式

#top
{
 background-image: url(images/BlueTabBackground.gif);
   background-repeat: repeat;
 color : WhiteSmoke;
 border-top : 4px solid Black;
 border-bottom : 4px solid Black;
 padding: 0px;
 margin: 0px;
}
//应该是管理呀什么的中间那些分界线——不确定

#tagline {
 font-size : 16px;
 margin : 0px;
 color: White;
}
//左边的菜单和相应的h,链接的定义

#leftmenu {
 position : absolute;
 left : 0px;
 width : 180px;
 height:auto;
 background-color: WhiteSmoke;
 padding-top: 0px;
}

#leftmenu h3 {
 font-size : 11px;
 margin : 0px;
 margin-top : 10px;  
 padding-bottom: 2px;
 padding-left: 3px;
 border-top: solid 1px Gainsboro;
}

#leftmenu ul {
 list-style: none;
 margin : 0px;
 padding-left : 5px;
 margin-left : 5px;
 margin-bottom : 10px;
 font-size : 11px;
}

#leftmenu a
{
 padding: 1px;
 text-decoration: none;
}

#leftmenu a:active,
#leftmenu a:visited,
#leftmenu a:link
{}

#leftmenu a:hover
{
 font-style:italic;
}
//右边主体的定义

#main {
 margin-left : 180px; 
 background-color : White;
 padding : 10px;
 border-left : 1px solid #555;
 border-bottom : 4px solid Black;
}

#footer {
 margin : 0px; 
 padding-top : 5px;
 text-align : center;
 font-size : 10px;
}
//回复框的定义

#CommentForm
{
 font-size : 11px;
 font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}

input, textarea
{
 font-size: 11px;
 font-family : Verdana, Geneva, Arial, Helvetica, sans-serif; 
}

.CommentForm
{
 font-size : 11px;
 font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
}

.Button
{
 border: 1px solid SteelBlue;
 background-color: gainsboro;
}
//那个日历的定义

.Cal
{
 border : 1px solid #186AA2;
 width:100%;
 font-family:Arial;
 font-size: 12px;
 margin-top:0px;
 margin-bottom:10px;
 height:180px;
 background-color:WhiteSmoke;
 padding : 0px;
   
}

.CalTitle
{
 background-color : #014E82;
 border-color:#ADF;
 font-family:Arial;
 font-size: 13px;
 font-weight:normal;
 color : #000; 
 margin-left : 0px;
 padding : 0px;
 height:100%;
  
}


.CalOtherMonthDay
{
 color:#808080;
 
}

.CalSelector
{
 
}

.CalNextPrev
{
 
}

.CalDayHeader
{
 background-color:#186AA2;
 color : #000; 
 
}

.CalSelectedDay
{
 
}

.CalWeekendDay
{
 
}

.CalTodayDay
{
 /*background-color:#93C49C;*/
 color:Red;
}


通过google可以找到许多关于css的教程,我看得是这里的:http://www.hongen.com/pc/homepage/css/css0101.htm
这里主要用到的就是css的属性这方面的内容,因为只有知道了每个“:”后便都可以填什么,才可以进行自定义——用专用编辑器的就不要说了,呵呵。自然,你还可以用一些高级内容,作更玄的效果——见识过一些这方面的高手是如何牛叉的。。。。。

关于天气预报(我也还有些用不好),计数器,搜索,在网上,google上,可以找到好多内容。因为csdn和这里的用的是同一个Blog系统,而且启动较早,又是编程高手群居的地方(呵呵,也只能这么想了),所以,建议在google搜索的时候使用site:csdn.com来搜,会方便一些,那里有一些人已经总结了好多blog个性化定义的方法,呵呵。

Q :能告知天气预报怎么做的嘛?
A:<br>
<b>&nbsp今日天气</b>
<br>
<center>
<iframe width=157 height=240 frameborder=0 scrolling=NO src='http://appnews.qq.com/cgi-bin/news_qq_search?city='></iframe>
</center>
<br>


代码如上。本来还可以做到直接显示你所在的城市的,但是需要做换一下城市代码,这个我还不会,也不知道城市代码,所以知识默认的深圳。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值