博客园页面css样式

#sideBar,#blog_post_info_block
 {
    display: none;
}
#under_post_news
 {
    display: none;
}

/*评论框大小*/

#tbCommentBody.comment_textarea{
    width:890px;
}

/*尾部间距*/

#footer
 {
   text-align:center;
   border-top:2px solid #2F4F4F;
   margin-left:25px;
   margin-right:25px;
   padding-top:10px;
   padding-bottom:10px;
}

/*居中间距*/

#mainContent .forFlow {
    margin-left:20px;
    margin-right:20px;
    margin-top:10px;
    float: none;
    width: auto;

}
/*评论框边框*/

#comment_form_container,#blog-comments-placeholder
{
background-color:#f5f5f5;
border-radius:6px 6px 6px 6px;
padding:20px;
}

#comment_nav,#homepage1_HomePageDays_DaysList_ctl05_ImageLink
{
 display: none;
}

.postBody {
    border-bottom: 2px solid #2F4F4F;
}

.day {
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    margin-bottom:5px;
}

.postSeparator {
display: none;
}

.postTitle {
    border-left: 5px solid #2F4F4F;
    font-size: 110%px;
}

.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    padding-left: 10px;
}

#cb_post_title_url.postTitle2
{
    font-size: 120%;
color:#2F4F4F;
}

.dayTitle a:link
{
    display:none;
}

#mainContent a{
    color:#2F4F4F;
}

#mainContent a:hover{
    color:#03A89E;
}
#main {
font-size:15px;
font-family:微软雅黑;
 padding-left: 0px;
 padding-right: 0px;
}
#home {
opacity: 0.95;
width:1280px;
background-color:#f5f5f5;
border-radius:6px 6px 6px 6px;
box-shadow:0 0 20px black;
}
.feedbackCon {
 background: url('http://images2015.cnblogs.com/blog/370709/201612/370709-20161230031921867-127780074.png') no-repeat 5px 0px;
}

.day {
  color:#333333;
}

 样式二

#home {
    margin: 0 auto;
    width: 80%;/*原始65*/
    min-width: 980px;/*页面顶部的宽度*/
    background-color: rgba(245, 245, 245, 0.7);
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
    background: rgba(12, 100, 129, 1) url('http://images.cnblogs.com/cnblogs_com/Penn000/1013849/o_123.jpg') fixed no-repeat;
    background-position: 50% 5%;
    background-size: cover;
}
#blogTitle {
    height: 100px;  /*高度*/
    clear: both;
    background-color: rgba(245, 245, 245, 0);
}
#blogTitle h1 {
    font-size: 36px;
    font-weight: bold;
    line-height: 1.8em;/*原始 1.6em*/
    margin-top: 10px;/*原始 15px */
    color: #548B54;
}
#blogTitle h2 {
    font-weight: normal;
    font-size: 17px;/*原始 16px ;font-size: 1.0rem;*/
    line-height: 1.8;
    color: #111;
    font-weight: bold;
    text-align: right;
    float: right;
}
#navigator{
    background-color: rgba(33, 160, 139, 0.9);
}
#navList a:link, #navList a:visited, #navList a:active{
    color: #eee;
    font-size: 18px;
    font-weight: bold;
}
.blogStats{
    color: #eee;
}
.postTitle {
    border-left: 8px solid rgba(33, 160, 139, 0.68);
    margin-left: 10px;
    margin-bottom: 10px;
    font-size: 20px;
    float: right;
    width: 100%;
    clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #21759b;
    transition: all 0.4s linear 0s;
}
.postTitle a:hover {
    margin-left: 30px;
    color: #0f3647;
    text-decoration: none;
}
.postCon {
    float: right;
    line-height: 1.5em;
    width: 100%;
    clear: both;
    padding: 10px 0;
}

.day .postTitle a {
    padding-left: 10px;
}
.day {
    background: rgba(255, 255, 255, 0.5);
}
/*文章附加信息*/
.postDesc {
    background: url(images/posted_time.png) no-repeat 0 1px;
    color: #757575;
    float: left;
    width: 100%;
    clear: both;
    text-align: left;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 13px;
    padding-right: 20px;/*5px  padding-left: 90px;posted 发表时间左边距离*/
    margin-top: 20px;
    line-height: 1.8;
    padding-bottom: 35px;
}

.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
{
    background: rgba(255, 255, 255, 0.5);
    margin-bottom: 35px;
    word-wrap: break-word;
}

.CalTitle{
    background: rgba(255, 255, 255, 0);
}
.catListTitle{
    background-color: rgba(33, 160, 139, 0.9);
}

#topics{
    background: rgba(255, 255, 255, 0.5);
}

.c_ad_block{
    display: none;
}

#tbCommentBody{
    width: 100%;
    height: 200px;
    background: rgba(255, 255, 255, 0.5);
}

#q{background: rgba(255, 255, 255, 0);}

.CalNextPrev{background: rgba(255, 255, 255, 0);}

 

时间: 2024-10-28 00:02:50

博客园页面css样式的相关文章

javascript实现博客园页面右下角返回顶部按钮

 这篇文章主要介绍了使用javascript实现博客园页面右下角返回顶部按钮的思路及源码,非常不错,这里推荐给小伙伴们     博客园中很多博友的博客中在Page右下角都有个图标,不论屏幕怎么拉伸,都始终停留在右下角.点击后页面置顶.后面想想写一个Demo来实现这种效果吧. 一. 图标右下角固定. 1.SS 里面提供了4中布局方式. 其中fixed表示绝对定位元素.所以我们选择使用fixed来实现图标固定.   absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进

javascript实现博客园页面右下角返回顶部按钮_javascript技巧

博客园中很多博友的博客中在Page右下角都有个图标,不论屏幕怎么拉伸,都始终停留在右下角.点击后页面置顶.后面想想写一个Demo来实现这种效果吧.      一. 图标右下角固定. 1.SS 里面提供了4中布局方式. 其中fixed表示绝对定位元素.所以我们选择使用fixed来实现图标固定. absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "right"

微信小程序实现博客园文章阅读功能

在微信小程序开发中,我们可以根据不同的业务场景,开发不同的业务应用,可以基于自身域名服务接口,也可以基于第三方的域名接口进行处理(如果被禁用除外),本篇随笔介绍使用小程序来实现我博客(http://wuhuacong.cnblogs.com)的文章阅读功能,这个小程序主要用来介绍使用介绍基于Javascript的正则表达式的处理应用,和常规在C#里面使用正则表达式有一些差异,因此可以作为后续使用正则表达式处理业务数据的一个练兵吧. 1.Request接口合法域名配置 一般情况下,我们知道微信的R

博客园样式漫谈——从0到1改变你的博客风格!

之前也有很多人写过这个话题的博客了,但是我觉得大家都千篇一律--贴上一堆CSS的代码,对于新手来说,可能直接拷贝过去CSS代码,能改变下博客的样式,但是知其然不知其所以然,想要自己修改样式,仍然无从下手. 本篇就通过博客布局.CSS基本的方法.JQuery的使用.调试技巧.响应式布局扩展 等几个方面讲述下修改博客样式的经验. 博客布局 博客园的前端结构很规整,因此基本上所有的博客都是一样的.大致可以如下面的Html结构所示: <html> <header> 1 默认的样式文件 2

关于博客园代码样式的调整

我一直在自己的博客中使用的是自定义的syntaxHighlighter代码着色.参考:http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/ 结果最近发现我的代码着色变成了: 发现没有,代码间距变的很大,样式很丑.通过查看源代码发现: 博客园的公共css增加了这一行: 1 <div class="cnblogs_Highlighter"> 这是罪魁祸首.解决办法就是在设置里面: 增加这一行就搞定了. 我的现在的样

PHP仿博客园个人博客数据库与界面设计

自学PHP大半年多了,断断续续地,但是最终还是坚定了我的想法,将PHP继续下去,所以写这个PHP的博客是为了找个稳定的 PHP工作,不求工资多高,但求一收留之地.我能看懂大部分英语文档,人不蠢,爱学习,有兴趣地可以联系下!有诚意的来吧!qq:240382473 我会分3-5次发布所有关键代码和文档说明,博客后台所有的样式均套用博客园! 说明: 1. 不完全采用MVC架构,但是理念就是这样的.因为还不能写出很稳定的MVC架构. 2.几乎不采用JQUERY AJAX 因为不是特别熟悉,运用起来还不自

小技巧:如何在(博客园)TinyMCE编辑器模式下同时插入Flash和Sliverlight以及代码运行框

如标题,已经知道的同学们就不用往下看了,以免浪费时间,本文内容是为博客园新手准备的.   众所周知,博客园发布博文时提供了二种html编辑器:CuteEditor 和 TinyMCE.(其实还有一种纯文本方式,不过很少有用人它,本文就不讨论它了)   TinyMCE相对在代码着色方面更出色,排版出来的文章也更好看,所以博客园推荐大家使用它,但是这东西有一个致命的缺点:如果用它直接插入Sliverlight(Xap),保存后会自动识别为Flash,这令银光侠们苦恼不已,昨天我向博客园团队反馈了,得

PHP仿博客园 个人博客(1) 数据库与界面设计_php实例

自学PHP大半年多了,断断续续地,但是最终还是坚定了我的想法,将PHP继续下去,所以写这个PHP的博客是为了找个稳定的 PHP工作,不求工资多高,但求一收留之地.我能看懂大部分英语文档,人不蠢,爱学习,有兴趣地可以联系下!有诚意的来吧!qq:240382473 我会分3-5次发布所有关键代码和文档说明,博客后台所有的样式均套用博客园! 说明: 1. 不完全采用MVC架构,但是理念就是这样的.因为还不能写出很稳定的MVC架构. 2.几乎不采用JQUERY AJAX 因为不是特别熟悉,运用起来还不自

打造博客园(cnblogs)超级自定义界面_其它综合

定制博客界面的核心方法是通过引用我们自己上传的外部JS,使外部JS的代码能在当前博客页面上执行,从而用这个JS修改页面DOM结构(加入新的界面元素,加入引用自定义的CSS,加入新的界面交互功能),然后我们就可以在自己写的这个外部JS里任意发挥了. 在博客园中的博客页面中引用外部JS的方法: 进入博客设置页面->设置->子标题,在这里,你可以输入你博客的一些子标题的内容,同时,你其实还可以输入如下html:<script src="XXXX">XXXX代表你的JS