自定义CSDN博客CSS样式

转自： http://blog.csdn.net/haijiaoxiaowu/archive/2010/01/18/5205700.aspx

上面的博主他也是转的。。。但是他没贴原贴链接。。。T_T

 

【作者：rare】 csdn blog css自定义设置 可以在博客的配置页面的自定义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 { //你想要的样式 }