今天正式從CSDN搬家到blogjava了。CSDN早就注冊(cè)了，速度一直不行。早就想換了。blogjava最近才注冊(cè)，但是blogjava的圖片和附件都有空間限制。發(fā)現(xiàn)blogjava訪問速度比CSDN快多了，于是就搬過來了。也不喜歡blogjava的語法著色，不想用，于是也定制了一個(gè)CSS專門用于發(fā)代碼。
搬家過來，首先得把我的blogjava博客裝飾一下。還是喜歡在CSDN用的Skin。于是就原樣地把CSDN的Skin搬過來。這么一裝飾，我的blogjava博客和CSDN博客長(zhǎng)得幾乎是一樣了。不信可以先訪問我的CSDN博客比較一下(
http://blog.csdn.net/wintys)。
早就想通過CSS定制頁面把blogjava裝飾一下，可是直到現(xiàn)在才開始做。下面就班門弄斧向大家介紹一下我的定制步驟。
1、點(diǎn)博客右上角的"設(shè)置"。然后在設(shè)置里找到"通過CSS定制頁面"。
2、把自己想加入的CSS統(tǒng)統(tǒng)寫在這里就OK了。
哈哈，上面的步驟誰都知道！CSS又是怎么寫出來的呢?我用的是Firefox + Firebug + Stylish。通過Firebug找出自己要設(shè)置DOM元素的ID或者class，然后用Stylish編寫相應(yīng)頁面CSS。用Stylish方便之處在于，不用每次刷新blogjava頁面，寫好CSS之后，只要點(diǎn)擊預(yù)覽就可以看到效果了。當(dāng)然在CSDN上找出背景色及背景圖片用的也是Firebug，而不是直接查看源代碼。如果你用過Firebug你自然知道它的方便之處了，沒有用過的趕緊下一個(gè)來玩玩，使用起來很簡(jiǎn)單。在Stylish中將一切CSS寫完之后，才將它們都復(fù)制到"通過CSS定制頁面"里面去。保存，刷新首頁即可。要注意，最后要把所涉及的圖片都傳到blogjava里來哦，不要鏈接CSDN的圖片哦。因?yàn)镃SDN慢，blogjava快，等blogjava的內(nèi)容加載完了，CSDN的圖片還沒加載上，那就不好看了。
看過，blogjava 定制CSS的
幫助文檔 ，還是用自己的方法更得心應(yīng)手一點(diǎn)。僅供大家參考。
還有我的CSS只是在Firefox下測(cè)試過的，在IE中運(yùn)行發(fā)現(xiàn)有些許不一致，但無大礙。也懶得在IE中重新調(diào)試了，再說平時(shí)也不用IE。IE真是令人煩，不完全支持Web標(biāo)準(zhǔn)，每次CSS寫完了都得在IE中重調(diào)。所以現(xiàn)在索性不用IE了。
附上我自己定制的CSS(寫的很亂，沒有整理優(yōu)化 ,有時(shí)間再改改):
最新修改的CSS見:
http://www.aygfsteel.com/wintys/customcss.aspx
/*Copyright (c) Winty
*http://www.aygfsteel.com/wintys/
*wintys@gmail.com
*2009-03-16
*
*任何人都可以使用我定制的CSS。
*如需使用請(qǐng)保留版權(quán)信息 ，并在我的博客上留言支持一下。謝謝!
*我使用的是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設(shè)置 **/
/*全局設(shè)置*/
a:hover{
color:#FF6600 !important;
}
/*頁首設(shè)置*/
/*******************/
/*首部*/
.header{
background:#FFFFFF url(images/blog_topbg.gif) repeat fixed center top !important;
}
/*首部主標(biāo)題*/
a#Header1_HeaderTitle{
font-size:50px !important;
}
/*首部導(dǎo)航欄*/
#mylinks{
/*csdn nav*/
background:#FFFFFF url(images/blog_navbg.gif) repeat scroll center top !important;
}
/*導(dǎo)航鏈接*/
a.menu{
color:#FFF !important;
border:1px solid #B3E3FF;
padding: 3px;
text-decoration:none;
margin:4px;
}
a.menu:hover{
border:1px solid #00FF00;
}
/*頂部隨筆文章統(tǒng)計(jì)欄*/
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;
}
/*文章內(nèi)容區(qū)設(shè)置*/
/***********************/
/*文章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;
}
/*頁腳設(shè)置*/
/****************************/
div.footer , a.footerlink{
background-image:none !important;
color:#336699 !important;
}
a.footerlink:hover{
color:#FF6600 !important;
}
/*左側(cè)設(shè)置*/
/**********************************/
/*文章分類 和 文章檔案*/
.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標(biāo)題:留言簿等*/
#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;
}
/*左側(cè)背景*/
#leftcontentcontainer{
background-color:#E9F9FF;
}
/****************************/
/****************************/
posted on 2009-03-16 16:31
天堂露珠 閱讀(213)
評(píng)論(0) 編輯 收藏 所屬分類:
Miscellaneous