今天正式從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.tkk7.com/wintys/customcss.aspx
/*Copyright (c) Winty
*http://www.tkk7.com/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
天堂露珠 閱讀(209)
評論(0) 編輯 收藏 所屬分類:
Miscellaneous