自定义CSDN博客CSS样式

news/2025/2/8 14:35:05 标签: css, header, div, class, blog, menu
class="baidu_pl"> <class="tags" href="/tags/DIV.html" title=div>div id="article_content" class="article_content clearfix"> <class="tags" href="/tags/DIV.html" title=div>div id="content_views" class="htmledit_views"> <class="tags" href="/tags/DIV.html" title=div>div class="blogstory">

可以在博客的配置页面的自定义class="tags" href="/tags/CSS.html" title=css>css栏中填入class="tags" href="/tags/CSS.html" title=css>css样式代码来自定也blog的风格

csdn blog的页面架构基本是由class="tags" href="/tags/DIV.html" title=div>div实现的,整个页面主要由三个class="tags" href="/tags/DIV.html" title=div>div组成,它们的id分别是:
csdnblog_class="tags" href="/tags/HEADER.html" title=header>header, csdnblog_sidebar, csdnblog_content。
所以,定义它们的主体样式可以这样:
#csdnblog_class="tags" href="/tags/HEADER.html" title=header>header
{
    //头部的风格
}
#csdnblog_sidebar
{
    //侧边栏的风格
}
#csdnblog_content
{
    //主体内容的风格
}
这三个class="tags" href="/tags/DIV.html" title=div>div又被两个class="tags" href="/tags/DIV.html" title=div>div包裹起来了,它们的id分别是csdnblog_allwrap, csdnblog_midwrap
这两个还可以定义整个页面的整体样式
#csdnblog_allwrap
{
    //你想要的风格
}
#csdnblog_midwrap
{
    //你想要的风格
}

页面的头部由以下几部分组成
1、h1,显示blog的用户自定义标题
#csdnblog_class="tags" href="/tags/HEADER.html" title=header>header h1
{
    //标题风格设置
}
2、h2,显示用户自定义的blog描述
#csdnblog_class="tags" href="/tags/HEADER.html" title=header>header h2
{
    //blog描述风格设置
}
3、ul, id为personalnav, 个人导航列表
#csdnblog_class="tags" href="/tags/HEADER.html" title=header>header ul#personalnav
{
    //blog个人导航栏风格设置
}
4、ul,id为 blogsearchsty,搜索栏
#csdnblog_class="tags" href="/tags/HEADER.html" title=header>header ul#blogsearchsty
{
    //blog搜索框风格设置
    //如果不想显示,可以使用:
    //display:none
}
5、 ul,id为menu,菜单栏
#csdnblog_class="tags" href="/tags/HEADER.html" title=header>header ul#menu
{
    //blog菜单风格设置
    //如果不想显示,可以使用:
    //display:none
}

自定义侧边栏的CSS
侧边栏主class="tags" href="/tags/DIV.html" title=div>div的id为csdnblog_sidebar,中间被一层class为gutter的class="tags" href="/tags/DIV.html" title=div>div包裹,最里面 一层class="tags" href="/tags/DIV.html" title=div>div的的class为aboutauthor。里面剩下的就是一个个的dl了
修改起风格可以这样:
#csdnblog_sidebar class="tags" href="/tags/DIV.html" title=div>div.gutter class="tags" href="/tags/DIV.html" title=div>div.aboutauthor
{
}
更进一步的话,可以:
#csdnblog_sidebar class="tags" href="/tags/DIV.html" title=div>div.gutter class="tags" href="/tags/DIV.html" title=div>div.aboutauthor dl
{
}
#csdnblog_sidebar class="tags" href="/tags/DIV.html" title=div>div.gutter class="tags" href="/tags/DIV.html" title=div>div.aboutauthor dl dt
{
}
#csdnblog_sidebar class="tags" href="/tags/DIV.html" title=div>div.gutter class="tags" href="/tags/DIV.html" title=div>div.aboutauthor dl dd
{
}

自定义文章的CSS
每一篇文章都是一个class="tags" href="/tags/DIV.html" title=div>div,其class为default_contents, 这个class="tags" href="/tags/DIV.html" title=div>div包含两个子元素
1、 h6, class为pubtime, 用来显示文章发表的时间。
修改其class="tags" href="/tags/CSS.html" title=css>css的方法为
.default_contents h6.pubtime
{
    //你想要的样式
}

2、class="tags" href="/tags/DIV.html" title=div>div,class为user_article,显示文章内容,又包括三部分
2.1、 h1,class为title_txt,显示文章标题
2.2、p, 显示文章内容
2.3、p, class为articalinfo,显示文章信息
想修改整篇文章区域的总体样式可以这样:
.default_contents class="tags" href="/tags/DIV.html" title=div>div.user_article
{
    //你想要的样式
}

修改文章标题class="tags" href="/tags/CSS.html" title=css>css样式的方法为
.default_contents class="tags" href="/tags/DIV.html" title=div>div.user_article h1.title_txt
{
    //你想要的样式
}
其实,直接
.title_txt
{
    //你想要的样式
}
也可以修改

修改文章信息的方法为
.default_contents class="tags" href="/tags/DIV.html" title=div>div.user_article p.articalinfo
{
    //你想要的样式
}
其实,直接
.articalinfo
{
    //你想要的样式
}

class="right articalinfo"> 

class="tags" href="/tags/DIV.html" title=div>div> class="tags" href="/tags/DIV.html" title=div>div> class="tags" href="/tags/DIV.html" title=div>div> <class="tags" href="/tags/DIV.html" title=div>div id="treeSkill">class="tags" href="/tags/DIV.html" title=div>div>

http://www.niftyadmin.cn/n/1741210.html

相关文章

正则表达式口诀

试作“正则表达式助记口诀” 又名“正则打油诗”&#xff0c;版本0.1&#xff0c;绝对原创&#xff0c;仿冒必究&#xff0c;&#xff1a;&#xff09; 注&#xff1a;本文仅为学习正则时为了便于记忆而作&#xff0c;不能代替系统而全面的学习过程&#xff0c;错漏之 处&…

Effective C#读后感

Effective C#读后感 待续。。。

net托管资源和非托管资源

对于托管的资源的回收工作&#xff0c;是不需要人工干预回收的&#xff0c;而且你也无法干预他们的回收&#xff0c;所能够做的只是了解.net CLR如何做这些操作。也就是说对于您的应用程序创建的大多数对象&#xff0c;可以依靠 .NET Framework 的垃圾回收器隐式地执行所有必要…

C#编程指南

C#编程指南 在这我想把C#的一些编程要点简略的提一提&#xff0c;同时也会结合着《Effective C#》说一说。 待续。。。 参考&#xff1a; 1.http://msdn.microsoft.com/en-us/library/67ef8sbd%28vVS.80%29.aspx

程序员的哲学

我认为哲学的核心包括&#xff0c;世界时物质的&#xff0c;物质是运动的&#xff0c;世界是处于广泛联系之中的&#xff0c;矛盾是推动事物发展的原动力。 一&#xff0c;终身学习 既然干了这一行&#xff0c;知识更新快&#xff0c;学习压力大那是必然的&#xff0c;你所要做…

C#中的多线程(转)

C#中的多线程-线程同步基础 (控制线程数量) 同步要领 下面的表格列展了.NET对协调或同步线程动作的可用的工具&#xff1a; 简易阻止方法 构成 目的 Sleep 阻止给定的时间周期 Join 等待另一个线程完成 锁系统 构成 目的 跨进程&#xff1f; 速度 lock 确保…

终止线程两个函数:ExitThread 和 TerminateThread

终止线程两个函数&#xff1a;ExitThread 和 TerminateThread 1 若要终止线程的运行&#xff0c;可以使用下面四种的方法&#xff1a; 线程函数退出循环来返回 &#xff08;最佳方法 &#xff09;。 通过调用ExitThread 函数&#xff0c;线程将自行撤消&#xff08;尽…

软件工程领域经典书籍

1.《The Mythical Man-Month》&#xff0c;国内译作《人月神话》&#xff1b; 2. 《Peopleware》&#xff0c;国内译作《人件》&#xff1b; 3.《Object- Oriented Software Engineering》&#xff0c;国内译作《面向对象软件工程》。