投稿
  1. 极客之音首页
  2. 后端开发
  3. Python

博客园页面定制CSS代码 教程

小半 • • Python • 阅读 104

导读：本篇文章讲解 博客园页面定制CSS代码 教程，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

      花了一点时间修改自己的博客背景设置，现在分享一下代码。希望对大家有帮助。我的比较简单，主要代码模板来源于另外一个博主，然后我在基础上进行了部分修改。博主的连接：https://www.cnblogs.com/Jack-Cheng008/p/13049920.html
  
    想要修改成我这样的话  博客园设置：首先博客皮肤选择darkgreentrip
有一个JS权限需要自己申请一下 和博客园申请时差不多  随便写写 半个小时左右申请成功

定制CSS代码 把下面这个拷进去

如果你有一点前端基础 应该知道哪些地方是修改背景图片和一些颜色、边框啥的 就不给你指出来了！！！

#home {
    margin: 0 auto;
    width: 80%;/*原始65*/
    min-width: 980px;/*页面顶部的宽度*/
    background-color: rgba(249, 160, 208, 0.3);
    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('https://img1.baidu.com/it/u=2642858887,2185261566&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800') fixed no-repeat;   /*修改背景图片*/
    background-position: 50% 5%; 
    background-size: cover;
}
#blogTitle {
    height: 100px;  /*高度*/
    clear: both;
    background-color: rgba(252,222,262,0.2);  /*博客标题的背景*/
}

#blogTitle h1 {
    font-size: 30px;
    font-weight: bold;
    line-height: 1.8em;/*原始 1.6em*/
    margin-top: 10px;/*原始 15px */
    color: #FFFFCC;
}
#blogTitle h2 {
    font-weight: normal;
    font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/      
    line-height: 1.8;
    color: #996699;    /*二标题字体颜色*/
    font-weight: bold;
    text-align: right;
    float: right; 
}
#navigator{
    background-color:rgba(252,222,262, 0.2);         /*标题栏下的颜色*/   
}
#navList a:link, #navList a:visited, #navList a:active{
    color:#FFFFCC;
    font-size: 18px;
    font-weight: bold;
}
.blogStats{
    color: #EE6363;
}
.postTitle {
    border-left: 8px solid rgba(132,112,255, 0);
    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:     #996699;
    transition: all 0.4s linear 0s;
}
.postTitle a:hover {
    margin-left: 30px;
    color: #EE6363;
    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.2);
}
/*文章附加信息*/
.postDesc {   
    background: url('https://img2.baidu.com/it/u=2899713182,4254650015&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500') no-repeat 0 1px;  /* 标题框下的图片*/
    color: rgba(108,103,105);
    float: left;
    width: 100%;
    clear: both;
    text-align: left;     
    font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
    font-size: 12px;
    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(194, 91, 245, 0.6);   /*栏目的条纹颜色*/
}

#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);}

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

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

.cnblogs_code_toolbar{
    background: rgba(255, 255, 255, 0);  
}
#main{min-width: 640px;}
.entrylist{
    background: rgba(255, 255, 255, 0.5);  
}

/*以下是侧边栏字体的样式*/
p {
    font-size:24px;
    color:deeppink;
}

中间各个栏目的颜色和字体颜色可自由更换，自行调节。
url后面括号内插入底图链接(记得加引号哦！！！)
　　rgba针对图片，前三个是颜色调节，最后一个数字是透明度调节。color主要针对字体。
效果：
image

将代码插入博客侧边栏公告即可:

<p>大雨过后，有两种人：一种人抬头看天，看到的是雨后彩虹，蓝天白云； 一种人低头看地，看到的是淤泥积水，艰难绝望。<p>

我这个侧边栏没有写太多就写了一段文字 也有可以插入音乐 图片啥的 都可以自己制作 我前端刚开始接触 没有了解太多 copy个别人的先玩着 等回头再自己补充
控制大小颜色的代码是上面代码里面的

/*以下是侧边栏字体的样式    自行修改*/
p {
    font-size:24px;
    color:deeppink;
}

效果：
image

页首HTML代码

<div id="i1" style="color:deeppink;font-size:28px;padding:15px;">
     <center>哪有什么岁月静好，不过是有人替你负重前行！</center></div>
    <script>
       function func(){
           var tag = document.getElementById('i1');
           var content = tag.innerText;
           var f = content.charAt(0);
           var l = content.substring(1,content.length);
           var new_content = l + f;
           tag.innerText = new_content;
           tag.style.cssText += 'text-align:center';
       }
       setInterval('func()',500);
    </script>

这个我在博客最上方添加了一个滚动的一段话 也可以根据自己的想法自己修改,最下面这个是字体的滚动速度 越小越快 我调的500感觉已经很快了
效果：
image

页脚HTML代码里面添加

/* 粒子吸附*/
<script id="c_n_script" src="https://blog-static.cnblogs.com/files/xiaokang01/js.js" color="254, 185, 45" opacity="1" count="200" zindex="-2">
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
} else {
}
</script>

<script type="text/javascript">

这个是背景的一个动态效果 粒子吸附 可以根据需要自己修改粒子颜色
效果：
image

/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("❤你有梦想吗？？？❤","❤你没有！！！❤","❤٩(๑❛ᴗ❛๑)۶ ❤","❤你有女朋友吗？？？❤","❤你没有！！！❤","❤那还不赶紧去努力学习！！！❤","❤┗(•ω•;)┛❤","❤摆烂达人！！！❤","❤(＾＿－)❤","❤世界杯❤","❤(^_−)☆❤","❤废寝忘食学python❤","❤ヾ(@^▽^@)ノ❤","❤炁体源流❤","❤通天箓❤","❤拘灵遣将❤","❤风后奇门❤","❤双全手❤","❤神机百炼❤","❤六库仙贼❤","❤大罗洞观❤");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        2500,
        function() {
            $i.remove();
        });
    });
});
</script>

这个是一个鼠标特效 我找了两个博主的 发现差不多 只是需要自己修改和增加点出来的字样
具体字段如下：
var a = new Array(“❤你有梦想吗？？？❤”,”❤你没有！！！❤”,”❤٩(๑❛ᴗ❛๑)۶ ❤”,”❤你有女朋友吗？？？❤”,”❤你没有！！！❤”);
效果：
image

我不是一个编程大佬 我只是知识的搬运工！！！！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/98760.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！