博客园美化代码备份(代码片段)

ch520 ch520     2023-01-18     482

关键词:


#Header1_HeaderTitle 
font-family: "华文行楷";
font-size: 62px;
font-weight: bold;
padding-top:15px;
padding-bottom:5px;
padding-left:20px;
padding-right:0px;
text-align: center;

Header2_HeaderTitle

font-family: "华文行楷";
font-size: 52px;
padding-top:-15px;
font-weight: bold;
padding-bottom:20px;
padding-left:100px;
padding-right:0px;
text-align: left;

header

height:178px;

/* 博客标题 */

blogTitle

height: 178px;  /*高度*/              
clear: both;

/*******************************************************************/
/导航栏/

navigator

   font-size:28px;
   height:52px;
   background:#55895B;
   text-align:center;
   margin-top:20px;
   margin-bottom:20px;

navList li /* 每一个栏目节点 */
margin:0 10px 0 10px;
line-height:52px;
float:left;
color:white;

navList li a /* 栏目文字的格式 */
padding:0 10px;
text-decoration:none;
line-height:52px;
border:0;
color:#fff;
padding-left: 25px;

navList li:hover

   background:#000000;
   height:52px;

blog_stats

margin:0 10px 0 0;
font-size:16px;
line-height:52px;
float:left;

blog_nav_rss,#blog_nav_rss_image

display:none;

/*********************************************************/
.day
margin:0 30 0px 0;

.dayTitle
display:none;

.postTitle a /标题/
color:#009CB5;
text-decoration:none;

.postTitle
font-size:20px;
font-weight:bold;
color:#009CB5;
font-family: "行楷";
border-left: 3px solid #21759b;
margin-bottom: 10px;
margin-left: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;
*/

.day .postTitle a
padding-left: 10px;
text-decoration:none;

.c_b_p_desc /摘要/
line-height:24px;
color:#888;

.c_b_p_desc a:hover
text-decoration:none;
border-bottom-width:1px;
border-bottom-style:dotted;

.postSeparator
border-bottom: 0.5px solid #DDDDDD;

/**********************************************************/

sidebar_shortcut,.catListPostArchive,.catList这里是UI开头的类的集合。,#sidebar_toptags

display:none;

.catListTitle
font-weight:bold;
font-family: "华文行楷";

/主面板/

mainContent

float:right;
margin-top:0px;
margin-left:0px;
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;

/google搜索框/

google_q,#q

height:22px;
width:120px;
border:solid 1px #ccc;
box-shadow:inset 0 0 3px #ddd;
border-radius:4px;

/搜索按钮/

.btn_my_zzk
font-family:‘Microsoft Yahei‘;
border:none;
height:26px;
width:60px;
padding:1px;
font-size:14px;
cursor:pointer;
position:relative;
vertical-align:middle;
display:inline-block;
background:#55895B;
border-radius:4px;
color:#fff;

.btn_my_zzk:hover
background:#6DA47D;

博客园个人界面美化(初入博客园)(代码片段)

刚入博客园,小白也要有一个“高大上”的个人博客页面啊,鼓捣了一下午,感觉自己棒棒的,叉腰得瑟个人感觉Simple的主页样式很美观,大气,哈哈首先,在博客园后台管理的设置里,申请js代码的权限(默认是没有打... 查看详情

博客园界面美化(代码片段)

博客园界面美化0x00.写在前面皮肤作者:@SevenNight皮肤作者博客:SevenNight修改人:@Ryanjie修改人:Ryanjie前几天无意之中看到了一款特别好看(每个人的眼光都不一样)的博客皮肤“verdant”,皮肤的作者是@SevenNight。当时感觉这款... 查看详情

博客园的美化(代码片段)

前言第一次写博客想从美化页面开始。页首html代码这里引入的是来自https://www.cnblogs.com/jingmoxukong/p/7826982.html的css文件1<!--自定制样式文件-->2<linkrel="stylesheet"href="https://files.cnblogs.com/files/jingmoxukong/cnblog.min.cs 查看详情

[博客美化]博客园syntaxhighlighter代码高亮(代码片段)

...ndowsLiveWriter/OpenLiveWriter代码着色太繁琐了,仅仅为了实现博客代码着色功能就要下载新软件和搞一堆配置。Win10用户只能使用OpenLiveWriter。Web端能干的事干嘛多搞功夫。如果不愿意网页登陆账号只想通过OLW软件编辑全文并且发布... 查看详情

博客园代码高亮美化教程(代码片段)

先简单展示下效果吧:首先需要导入js代码,在侧边栏公告处将以下代码复制进入:<scripttype="text/javascript">!function()varq=null;window.PR_SHOULD_USE_CONTINUATION=!0;(function()functionS(a)functiond(e)varb=e.charCodeAt(0);if(b!==9 查看详情

美化博客园(代码片段)

设置与我联系侧边栏公告代码<atarget="_blank"href="http://wpa.qq.com/msgrd?v=3&amp;uin=xxxxxxxxxxx&amp;site=qq&amp;menu=yes">  <imgalign="absmiddle"border="0"src="http://wpa.qq.com/pa?p=2:xxxxxx 查看详情

博客园美化(代码片段)

闲着没事对博客皮肤做了些美化,主要是css,js写了些小功能css部分:整体采用蓝色简洁风,有些部分我不用,所以没优化,比如标签,日历,相册,头部固定在顶部,侧边栏固定250px;右边内容主体自适应,支持,收藏和关注按... 查看详情

博客园美化-darkgreentrip(代码片段)

1、第一步,样式的形成与博客皮肤的选择有很大关系本文选择darkgreentrip2、代码插入2.1页面定制CSS代码```Objective-C#homemargin:0auto;width:95%;/原始65/min-width:980px;/页面顶部的宽度/background-color:rgba(245,245,245,0.7);padding:30px;margin-top:0px; 查看详情

博客园美化(代码片段)

侧栏字体更改1.catListTitle2font-weight:bold;3line-height:1.2;4margin-top:21px;5margin-bottom:10.5px;6border-left:10pxsolid#008000;7padding:10px010px14px;8text-align:left;9font-family:微软雅黑;1011#profile_blo 查看详情

博客园美化:添加赞赏功能(代码片段)

将以下代码复制粘贴到侧边栏HTML中:<!--tctip支付赞赏/打赏--><scripttype="text/javascript"src="https://blog-static.cnblogs.com/files/zhangshuhao1116/pay.js"></script><!--js文件引入--><script>newtct 查看详情

博客园主题自定义美化(代码片段)

...com/files/JetpropelledSnake/cnblogs.css,然后按ctrl+s,即可将本人博客用到的自定义css下载下来。接着在博客的管理页面,找到文件选项卡,上传刚刚下载的文件: 上传之后,记下该文件的url,如上图中的红框所示。注:上图中的url... 查看详情

博客园美化:添加qq联系按钮(代码片段)

将以下代码复制粘贴到博客侧边栏公告HTML: <!--联系qq--><divalign="center"><atarget="_blank"href="http://wpa.qq.com/msgrd?v=3&uin=744461004&site=qq&menu=yes"><imgalign="absmiddle"borde 查看详情

博客园页面美化(代码片段)

 对以前的我来说,我觉得博客只有自己搭建的才有页面美化,像博客园这样的可能没有。但是,突然有一天在我查资料的时候,发现了一篇很好看的博客,我就留意了一下他的域名,发现竟然是博客园的。就开始决定把自己的... 查看详情

博客园主题美化diy教程(代码片段)

...到友人启发,部署了个静态页面,想着太单调了,要不连博客园的修一修,就去网上翻找了一下,果然给我发现了,但是在DIY的中途,遇到一大堆问题,因为是几年前的源码了,很多链接已经噶了。首先这个DIY页面的作者是这位... 查看详情

博客美化(代码片段)

...r/cnblogs-theme-silence介绍Silence是一款界面简洁、运行高效的博客园主题,主要面向于经常混迹博客园的朋友。简单概括其几个主要特点:专注阅读、精致漂亮的UI;事无巨细的部署文档;兼容移动端浏览器;源码结构清晰、易扩展... 查看详情

博客园美化教程大集合(超详细,看这篇就够了)(代码片段)

阅读目录:  1. 前言  2.定制自己的博客0.美化整体效果1.准备工作2.自定义个性化导航栏3.添加顶部博主信息4.添加顶部滚动公告5.为博客文章添加目录导航6.添加分享功能按键7.定制推荐和反对按键的炫酷样式8.添加快速... 查看详情

博客园主题美化配置(awescnb)(代码片段)

...题为awescnb系列主题中的geek主题 Awescnb文档Awescnb作者博客配置步骤一、准备工作申请js权限(参考链接:https://www.cnblogs.com/maczhen/p/14372738.html) 二、博客配置1.基本配置、代码高亮修改博客默认主题为Custom其他默认 2.博... 查看详情

博客园样式美化ii(代码片段)

前言感谢大家对之前博客园样式美化的认可,我终于更新啦啦啦啦更新内容01|优化首页显示效果优化前:优化后:有没有感觉瞬间立体起来了呢~02|增加管理入口这个很简单,就是导航条上加了个管理的入口原本想设置为只有博... 查看详情