CSDN自定义CSS【转】

来源:互联网 发布:中国乘用车销量数据 编辑:程序博客网 时间:2024/06/05 15:22

可以在博客的配置页面的自定义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, idpersonalnav, 个人导航列表
#csdnblog_header ul#personalnav
{
    //blog
个人导航栏风格设置
}
4
ulidblogsearchsty,搜索栏
#csdnblog_header ul#blogsearchsty
{
    //blog
搜索框风格设置
    //
如果不想显示,可以使用:
    //display:none
}
5
ulidmenu,菜单栏
#csdnblog_header ul#menu
{
    //blog
菜单风格设置
    //
如果不想显示,可以使用:
    //display:none
}

自定义侧边栏的CSS
侧边栏主dividcsdnblog_sidebar,中间被一层classgutterdiv包裹,最里面一层div的的classaboutauthor。里面剩下的就是一个个的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,其classdefault_contents, 这个div包含两个子元素
1
h6 classpubtime, 用来显示文章发表的时间。
修改其css的方法为
.default_contents h6.pubtime
{
    //
你想要的样式
}

2
divclassuser_article,显示文章内容,又包括三部分
2.1
 h1classtitle_txt,显示文章标题
2.2
p, 显示文章内容
2.3
p classarticalinfo,显示文章信息
想修改整篇文章区域的总体样式可以这样:
.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

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

原创粉丝点击