博客园美化

侧栏字体更改

 1 .catListTitle {
 2 font-weight: bold;
 3 line-height: 1.2;
 4 margin-top: 21px;
 5 margin-bottom: 10.5px;
 6 border-left:10px solid #008000;
 7 padding: 10px 0 10px 14px;
 8 text-align: left;
 9 font-family: 微软雅黑;
10 }
11 #profile_block {
12 font-family: 微软雅黑;
13 }
14 #navigator {
15 font-family: 微软雅黑;
16 }
17 * {
18 font-family: 微软雅黑;
19 }

主页面大小调整

 1 body
 2 {
 3    text-align:center;
 4  }
 5
 6 #home
 7 {
 8    margin: 0px auto;
 9    text-align:left;
10    max-width:1060px;
11 }

背景图片

1 body {
2 color: #000;
3 background: url("http://images2015.cnblogs.com/blog/459873/201509/459873-20150919175458742-1697781612.jpg") fixed;
4 background-size: cover;
5 background-repeat: no-repeat;
6 font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
7 font-size: 12px;
8 min-height: 101%;
9 }

标题

• 绿色背景标题

 1 /*标题2*/
 2 #cnblogs_post_body h2 {
 3     color: #fff;
 4     padding-left: 15px;
 5     background-color: #00CED1 !important;
 6     text-shadow: 2px 2px 3px #222222;
 7     font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
 8     margin-bottom: 5px;
 9 }
10 /*标题3*/
11 #cnblogs_post_body h3 {
12     color: #00CED1;
13     border-left: 13px solid #00CED1;
14     padding: 5px;
15     background-color: #f5f5f5;
16 }

• 红色背景标题

/*标题2*/
#cnblogs_post_body h2 {
    color: #fff;
    padding-left: 15px;
    background-color: #FF0000 !important;
    text-shadow: 2px 2px 3px #222222;
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    margin-bottom: 5px;
}
/*标题3*/
#cnblogs_post_body h3 {
    color: #000000;
    border-left: 13px solid #FF0000;
    padding: 5px;
    background-color: #f5f5f5;
}

小飞机 页脚Html代码

 1 <style>
 2 #back-top {
 3      position: fixed;
 4      bottom: 10px;
 5      right: 5px;
 6      z-index: 99;
 7 }
 8 #back-top span {
 9      width: 50px;
10      height: 64px;
11      display: block;
12      background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
13 }
14 #back-top a{outline:none}
15 </style>
16 <script type="text/javascript">
17 $(function() {
18     // hide #back-top first
19     $("#back-top").hide();
20     // fade in #back-top
21     $(window).scroll(function() {
22         if ($(this).scrollTop() > 500) {
23             $(‘#back-top‘).fadeIn();
24         } else {
25             $(‘#back-top‘).fadeOut();
26         }
27     });
28     // scroll body to 0px on click
29     $(‘#back-top a‘).click(function() {
30         $(‘body,html‘).animate({
31             scrollTop: 0
32         }, 800);
33         return false;
34     });
35 });
36 </script>
37 <p id="back-top" style="display:none"><a href="#top"><span></span></a></p>

右下角目录博客侧边栏公告(支持HTML代码)(支持JS代码)

传送门

1 <script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
2 <link href="http://files.cnblogs.com/files/ning-wang/marvin.nav.css" rel="stylesheet">
3 <script type="text/javascript" src="http://files.cnblogs.com/files/ning-wang/marvin.nav.js"></script>

制作博客园文章签名

原文地址:https://www.cnblogs.com/sunbines/p/9026662.html

时间: 2024-08-03 10:16:58

博客园美化的相关文章

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

阅读目录: 1. 前言 2. 定制自己的博客 0. 美化整体效果 1. 准备工作 2. 自定义个性化导航栏 3. 添加顶部博主信息 4. 添加顶部滚动公告 5. 为博客文章添加目录导航 6. 添加分享功能按键 7. 定制推荐和反对按键的炫酷样式 8. 添加快速返回顶部的功能按键 9. 添加打赏功能按键 10. 添加页面放大缩小功能按键 11. 添加Github图标及链接 12. 添加公告栏图片 13. 添加公告栏文字信息 14. 添加公告栏个性时钟 15. 为公告栏添加访客来源统计 16. 为公

博客园美化资源网站链接

详谈如何定制自己的博客园皮肤(禁用css模板级别) 博客美化汇总 NSDog 博客园美化教程大集合----极致个性化你的专属博客(超详细,看这篇就够了) 博客园美化教程第二篇----极致个性化你的专属博客(为博客添加背景音乐插件,调整页面布局等) 原文地址:https://www.cnblogs.com/CH520/p/9813646.html

博客园美化首页随笔展示美化

博客园美化首页随笔展示美化 一.css .postDesc-img { position: absolute; padding-bottom: 0; float: right; right: 0; bottom: 0; z-index: -1; } .cnblogs-post-body h3 { text-decoration: none; font-size: 10px; line-height: 1px; } .cnblogs-post-body h2 { color: red; font-

博客园美化夜间模式

博客园美化夜间模式 一.点击控制样式 主要看思路,自己增删改查,里面样式只针对我的博客 一.触发点击 二.修改按钮样式以及对于类名 三.将模式信息存入sessionStorage中 四.更具按钮的类名,自己博客样式进行跟换 <!--夜间模式点击事件js--> <script > let night_close = document.querySelector('.night-close')||document.querySelector('.night-open'); night_

博客园美化博客随笔目录

博客园美化博客随笔目录 基于孤傲苍狼在2014-5-11写的目录代码基础上进行改进 一.js代码 <!--目录--> <script type="text/javascript"> var BlogDirectory = { /* 获取元素位置,距浏览器左边界的距离(left)和距浏览器上边界的距离(top) */ getElementPosition:function (ele) { var topPosition = 0; var leftPosition

博客园美化操作

之所以写这篇文章的原因了主要就是博客园的默认样式太单一,而且很多人都在用,就想与众不同一样,不做大多数 准备工作 想要美化自己的博客园默认界面,首先需要申请js权限 步入正题 当你的这一步做完之后就可以开始给博客化妆了 #########################################页面标题样式================================ #cnblogs_post_body { color: black; font: 0.875em/1.5em "微软雅黑

[美化] 博客园美化历程

目录 开端 具体的css 净化页面 标题的蜜汁动画 改一下主页的比例 另一些改动 侧边栏的html js代码的添加 在没有目录的情况下不显示目录 在url存在 article 的时候不显示版权声明 js附带的css js完整代码 结语 标题上写着美化,但怎么看自己的界面,仿佛每条线都在呐喊着:"实际上是简化吧!" /扶额 在入驻博客园的一周时间里,我使用各种课上时间抽空研究了一下博客园的页面定制CSS代码.HTML和JS这些看了半天也搞不明白的东西,并将原来的模板"Simpl

博客园美化测试

1.博客园博客园 h2 非大是大非发送地方是第三方的规范收费的鬼斧神工的风格十分的 h3 非大是大非发送地方是第三方的规范收费的鬼斧神工的风格十分的鬼斧神工的奉公守法非大是大非发送地方是第三方的规范收费的鬼斧神工的风格十分的鬼斧神工的奉公守法非大是大非发送地方是第三方的规范收费的鬼斧神工的风格十分的鬼斧神工的奉公守法非大是大非发送地方是第三方的规范收费的鬼斧神工的风格十分的鬼斧神工的 P 非大是大非发送地方是第三方的规范收费的鬼斧神工的风格十分的鬼斧神工的奉公守法非大是大非发送地方是第三方的规范

博客园美化——看板娘

一直有人问我左下角的看板娘是怎么加上去的 刚开始看别人的随笔看得一脸懵逼,自己捣鼓个好久才弄好的 于是就想写一篇容易看懂的随笔 1.下载模型相关文件(点击推荐和关注才能下载哦QWQ) 打开压缩包后就是这么一堆东西 2.将文件上传到博客园 只要上传 waifu.css waifu-tips.js live2d.js 3.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head