随笔 - 117  文章 - 72  trackbacks - 0

声明:原创作品(标有[原]字样)转载时请注明出处,谢谢。

常用链接

常用设置
常用软件
常用命令
 

订阅

订阅

留言簿(7)

随笔分类(130)

随笔档案(123)

搜索

  •  

积分与排名

  • 积分 - 154340
  • 排名 - 389

最新评论

    今天正式从CSDN搬家到blogjava了。CSDN早就注册了,速度一直不行。早就想换了。blogjava最近才注册,但是blogjava的图片和附件都有空间限制。发现blogjava访问速度比CSDN快多了,于是就搬过来了。也不喜欢blogjava的语法着色,不想用,于是也定制了一个CSS专门用于发代码。
    搬家过来,首先得把我的blogjava博客装饰一下。还是喜欢在CSDN用的Skin。于是就原样地把CSDN的Skin搬过来。这么一装饰,我的blogjava博客和CSDN博客长得几乎是一样了。不信可以先访问我的CSDN博客比较一下(http://blog.csdn.net/wintys)。
    早就想通过CSS定制页面把blogjava装饰一下,可是直到现在才开始做。下面就班门弄斧向大家介绍一下我的定制步骤。
    1、点博客右上角的"设置"。然后在设置里找到"通过CSS定制页面"。
    2、把自己想加入的CSS统统写在这里就OK了。
    哈哈,上面的步骤谁都知道!CSS又是怎么写出来的呢?我用的是Firefox + Firebug + Stylish。通过Firebug找出自己要设置DOM元素的ID或者class,然后用Stylish编写相应页面CSS。用Stylish方便之处在于,不用每次刷新blogjava页面,写好CSS之后,只要点击预览就可以看到效果了。当然在CSDN上找出背景色及背景图片用的也是Firebug,而不是直接查看源代码。如果你用过Firebug你自然知道它的方便之处了,没有用过的赶紧下一个来玩玩,使用起来很简单。在Stylish中将一切CSS写完之后,才将它们都复制到"通过CSS定制页面"里面去。保存,刷新首页即可。要注意,最后要把所涉及的图片都传到blogjava里来哦,不要链接CSDN的图片哦。因为CSDN慢,blogjava快,等blogjava的内容加载完了,CSDN的图片还没加载上,那就不好看了。
    看过,blogjava 定制CSS的 帮助文档 ,还是用自己的方法更得心应手一点。仅供大家参考。
    还有我的CSS只是在Firefox下测试过的,在IE中运行发现有些许不一致,但无大碍。也懒得在IE中重新调试了,再说平时也不用IE。IE真是令人烦,不完全支持Web标准,每次CSS写完了都得在IE中重调。所以现在索性不用IE了。

附上我自己定制的CSS(写的很乱,没有整理优化 ,有时间再改改):
最新修改的CSS见:http://www.blogjava.net/wintys/customcss.aspx
/*Copyright (c) Winty
 *http://www.blogjava.net/wintys/
 *wintys@gmail.com
 *2009-03-16
 *
 *任何人都可以使用我定制的CSS。
 *如需使用请保留版权信息 ,并在我的博客上留言支持一下。谢谢!
 *我使用的是blogjava中的Skin: arrow改过来的。不同的Skin可能不一定适用。
 */

body{font-size:medium !important;}
.mycode {
  margin: 10px;
  padding: 10px;
  background: #DDEDFB;
  border: 1px solid #428EDE; 
  text-align: left;
  WORD-WRAP: break-word;
}
/****************************/
/****************************/
/**以下是页面CSS设置 **/
/*全局设置*/
a:hover{
 color:#FF6600 !important;
}

/*页首设置*/
/*******************/
/*首部*/
.header{
  background:#FFFFFF url(images/blog_topbg.gif) repeat fixed center top !important;
}

/*首部主标题*/
a#Header1_HeaderTitle{
  font-size:50px !important;
}

/*首部导航栏*/
#mylinks{
  /*csdn nav*/
  background:#FFFFFF url(images/blog_navbg.gif) repeat scroll center top !important;
}
/*导航链接*/
a.menu{
  color:#FFF !important;
  border:1px solid #B3E3FF;
  padding: 3px;
  text-decoration:none;
  margin:4px;
}
a.menu:hover{
  border:1px solid #00FF00;
}

/*顶部随笔文章统计栏*/
div#mytopmenu{
  background:#FFFFFF url(images/blog_navbg.gif) repeat scroll center top !important;
  margin:0px !important;
  padding: 4px;
  color:#FFF;
}
div.blogStats{
  font-size:12px !important;
}

/*文章内容区设置*/
/***********************/
/*文章div*/
div.day{
  border-bottom:1px solid #7DC9D7 !important;
}
.postTitle2{
  color:#336699;
}
div.postDesc{
  font-size:10px;
}
div.dayTitle{/*csdnurl*/
  background-image:url(images/blog_selenderbg.png) !important;
  height:25px !important;
}
div.dayTitle a{
  color:#FFF !important;
  text-decoration:none;
}
div.dayTitle a:hover{
  color:#FF6600 !important;
}



/*页脚设置*/
/****************************/
div.footer , a.footerlink{
  background-image:none !important;
  color:#336699 !important;
}
a.footerlink:hover{
  color:#FF6600 !important;
}

/*左侧设置*/
/**********************************/
/*文章分类 和 文章档案*/
.catListTitle {
  background:#FFFFFF url(images/blog_sidebarico.gif) no-repeat scroll center center !important;
  color:#369 !important;
  height:23px !important;
  padding-top:0px !important;
}

/*h3标题:留言簿等*/
#leftcontentcontainer h3{
   background:#FFFFFF url(images/blog_sidebarico.gif) no-repeat scroll center center !important;
  color:#369 !important;
  height:23px !important;
  padding-top:0px !important;
}
/*左边分割线*/
#leftcontent{
 border-right:1px solid #7DC9D7 !important;
}
/*左侧背景*/
#leftcontentcontainer{
  background-color:#E9F9FF;
}

/****************************/
/****************************/

posted on 2009-03-16 16:31 天堂露珠 阅读(205) 评论(0)  编辑  收藏 所属分类: Miscellaneous

只有注册用户登录后才能发表评论。


网站导航: