CSDN自訂CSS

來源:互聯網
上載者:User

可以在部落格的配置頁面的自訂css欄中填入css樣式代碼來自定也blog的風格

csdn blog的頁面架構基本是由div實現的,整個頁面主要由三個div組成,它們的id分別是:
csdnblog_header, csdnblog_sidebar, csdnblog_content。
所以,定義它們的主體樣式可以這樣:
#csdnblog_header
{
    //頭部的風格
}
#csdnblog_sidebar
{
    //側邊欄的風格
}
#csdnblog_content
{
    //主體內容的風格
}
這三個div又被兩個div包裹起來了,它們的id分別是csdnblog_allwrap, csdnblog_midwrap
這兩個還可以定義整個頁面的整體樣式
#csdnblog_allwrap
{
    //你想要的風格
}
#csdnblog_midwrap
{
    //你想要的風格
}

頁面的頭部由以下幾部分組成
1、h1,顯示blog的使用者自訂標題
#csdnblog_header h1
{
    //標題風格設定
}
2、h2,顯示使用者自訂的blog描述
#csdnblog_header h2
{
    //blog描述風格設定
}
3、ul, id為personalnav, 個人導航列表
#csdnblog_header ul#personalnav
{
    //blog個人導覽列風格設定
}
4、ul,id為blogsearchsty,搜尋欄
#csdnblog_header ul#blogsearchsty
{
    //blog搜尋方塊風格設定
    //如果不想顯示,可以使用:
    //display:none
}
5、ul,id為menu,功能表列
#csdnblog_header ul#menu
{
    //blog菜單風格設定
    //如果不想顯示,可以使用:
    //display:none
}

自訂側邊欄的CSS
側邊欄主div的id為csdnblog_sidebar,中間被一層class為gutter的div包裹,最裡面一層div的的class為aboutauthor。裡面剩下的就是一個個的dl了
修改起風格可以這樣:
#csdnblog_sidebar div.gutter div.aboutauthor
{
}
更進一步的話,可以:
#csdnblog_sidebar div.gutter div.aboutauthor dl
{
}
#csdnblog_sidebar div.gutter div.aboutauthor dl dt
{
}
#csdnblog_sidebar div.gutter div.aboutauthor dl dd
{
}

自訂文章的CSS
每一篇文章都是一個div,其class為default_contents, 這個div包含兩個子項目
1、h6, class為pubtime, 用來顯示文章發表的時間。
修改其css的方法為
.default_contents h6.pubtime
{
    //你想要的樣式
}

2、div,class為user_article,顯示文章內容,又包括三部分
2.1、 h1,class為title_txt,顯示文章標題
2.2、p, 顯示文章內容
2.3、p, class為articalinfo,顯示文章資訊
想修改整篇文章地區的總體樣式可以這樣:
.default_contents div.user_article
{
    //你想要的樣式
}

修改文章標題css樣式的方法為
.default_contents div.user_article h1.title_txt
{
    //你想要的樣式
}
其實,直接
.title_txt
{
    //你想要的樣式
}
也可以修改

修改文章資訊的方法為
.default_contents div.user_article p.articalinfo
{
    //你想要的樣式
}
其實,直接
.articalinfo
{
    //你想要的樣式
}

**********************************************************

轉載自http://blog.csdn.net/pyhsky/archive/2010/10/01/5917923.aspx

**********************************************************

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.