页面定制CSS代码-博客侧边栏公告-页首Html代码-页脚Html代码

设置代码前说明:首先你得选用博客皮肤darkgreentrip,否则会出错

页面定制CSS代码:

说明:标注颜色位置可自行修改,第12行设置主页底层图片,可自行修改

#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_fr.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(0, 102, 255, 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(0, 94, 255, 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: #005eff;/*文章标题颜色*/
    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(0, 94, 255, 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);}

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

.entrylist{
    background: rgba(255, 255, 255, 0.5);
}

#main{
   min-width: 640px;
}

 博客主页展示(可自行修改部分组件颜色):

博客侧边栏公告代码:

说明:公告栏时钟控件与小老鼠游戏控件可自行删减,换头像可自行修改图片地址

<style>
#back-top {
     position: fixed;
     bottom: 10px;
     right: 5px;
     z-index: 99;
}
#back-top span {
     width: 50px;
     height: 64px;
     display: block;
     background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
}
#back-top a{outline:none}
</style>
<script type="text/javascript">
$(function() {
    // hide #back-top first
    $("#back-top").hide();
    // fade in #back-top
    $(window).scroll(function() {
        if ($(this).scrollTop() > 500) {
            $(‘#back-top‘).fadeIn();
        } else {
            $(‘#back-top‘).fadeOut();
        }
    });
    // scroll body to 0px on click
    $(‘#back-top a‘).click(function() {
        $(‘body,html‘).animate({
            scrollTop: 0
        }, 800);
        return false;
    });
});
<!-- 公告栏头像 -->
</script> <p id="back-top" style="display:none"><a href="#top"><span></span></a></p> <img src="https://www.cnblogs.com/images/cnblogs_com/knny/1550617/t_3d6c20c133%20(2).jpg" alt="一缕暖风" class="img_avatar" width="210px" height="210px" style="border-radius:10%"> <!-- 公告栏时钟控件 --> <embed wmode="transparent" src="https://files.cnblogs.com/files/jingmoxukong/honehone_clock_tr.swf" quality="high" bgcolor="#FDF6E3" width="230" height="110" name="honehoneclock" align="middle" allowscriptaccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> <!-- 小老鼠游戏控件 --> <div className="sidebarMouse"><object type="application/x-shockwave-flash" style="outline:none;" data="https://files.cnblogs.com/files/jingmoxukong/mouse.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2F&amp;up_tailColor=E6DEBE&amp;" width="230" height="160"><param name="movie" value="https://files.cnblogs.com/files/jingmoxukong/mouse.swf?up_bodyColor=f0e9cc&amp;up_feetColor=D4C898&amp;up_eyeColor=000567&amp;up_wheelSpokeColor=DEDEDE&amp;up_wheelColor=FFFFFF&amp;up_waterColor=E0EFFF&amp;up_earColor=b0c4de&amp;up_wheelOuterColor=FF4D4D&amp;up_snoutColor=F7F4E9&amp;up_bgColor=F0E4E4&amp;up_foodColor=cba920&amp;up_wheelCenterColor=E4EB2E&amp;up_tailColor=E6DEBE&amp;"><param name="AllowScriptAccess" value="always"><param name="wmode" value="opaque"></object></div>

  动态时钟控件图示:

   

动态小老鼠游戏控件图示:

页首Html代码:

说明: 连接https://www.cnblogs.com/knny/为跳转的网址,我设置的是我博客的主页地址,开始准备设置github主页的

/*页首的跳转连接,*/
<a href="https://www.cnblogs.com/knny/">
<img style="position: absolute; top: 0; right:0px; border: 0;" src="https://www.cnblogs.com/images/cnblogs_com/knny/1551068/t_jiaobiao2.png">
</a>

页首的网页跳转图标展示:

页脚Html代码:

说明:需要翻到页面底部即可看到右下角小火箭

<!--页脚小火箭返回顶部-->
<script>
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: ‘‘;width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+(255*Math.random())+","+(255Math.random())+","+~~(255Math.random())+")"}var d=[];e.requestAnimationFrame=function()}(),n()}(window,document);
</script>

右小火箭展示:

小女孩设置代码(记得放置不同的地方):

<!--页面定制css 放上这个-->

/* 看板娘 */
canvas#live2dcanvas {
border: 0 !important;
left: 0;
}

<!--页脚Html代码放上这个 -->

/* 看板娘 */
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/L2Dwidget.min.js"></script>
<script type="text/javascript">
L2Dwidget.init();
</script>

 动态小女孩图示:

如果本文对你有帮助,下边的三个按钮都帮我点一点呗~~~

原文地址:https://www.cnblogs.com/knny/p/11551806.html

时间: 2024-10-14 01:16:29

页面定制CSS代码-博客侧边栏公告-页首Html代码-页脚Html代码的相关文章

代码备份 | 博客侧边栏公告(支持HTML代码)(支持JS代码)

博客侧边栏公告(支持HTML代码)(支持JS代码) <div id='btnList'> <a class="ivu-btn ivu-btn-primary" href="https://cn.vuejs.org/v2/api/" target="_blank">Vue</a> <a class="ivu-btn ivu-btn-primary" href="https://

自制博客侧边栏公告网页链接“图标 ”

1.网上搜索网页图标并保存为.bmp文件 这是我用的一个图标搜索网站:http://www.easyicon.net/ 2.将图片文件上传博客,得到并复制地址链接(不会的自己动手搜) 3.博客后台设置侧边栏公告中插入以下代码 <m class="m"> <div><a href="http://weibo.com/u/5379175768" target="_blank"><img src="h

博客侧边栏公告html代码

<embed width="180" height="180" align="middle" wmode="transparent" quality="high" src="http://images.cnblogs.com/cnblogs_com/csharp/clock.swf" pluginspage="http://www.macromedia.com/go/ge

页面定制CSS代码初探:页面变宽 文本自动换行 图片按比缩放

一.初识博客 初写博客,先在设置里选了个喜欢的模板 第一眼就爱上了呢!那极简的风格,我喜欢!!但是,应用后,却发现... 纳尼!模板上右侧那张漂亮的图片呢?!我的怎么什么都没有.没有图片好难看啊,瞬间无爱了,设置里找了下,->博客侧边栏公告 <-,在这里,放了张宽200px的图,好看多了马上,还是有图才不会那么单调~ 二.认识CSS 过了几天,打算写篇博,发现了一个重大的问题,怎么默认的宽度这么窄?那我放图片怎么办,而且,2边留那么多空白不浪费吗,留个5%就够了吧.于是乎,开始了2天的全折腾.

博客园页面定制CSS代码

博客园页面定制CSS代码 1 #home { 2 margin: 0 auto; 3 width: 80%;/*原始65*/ 4 min-width: 980px;/*页面顶部的宽度*/ 5 background-color: rgba(245, 245, 245, 0.7); 6 padding: 30px; 7 margin-top: 50px; 8 margin-bottom: 50px; 9 box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);

十分钟用HTML,CSS让博客园变得高大上

一直很喜欢博客园的主题:coffee,但是看久了,总感觉还是太多不必要的东西,所以就自己整理了下,记录如下: 打开管理,可以看出博客园可以非常方便自由定制html和css滴,真是贴心! 使用工具: Firefox+firebug 1.加一个子标题[对于我这种特别喜欢写注释真是太好啦]: 2.coffee的主题全部统一为一种黄色,看多了就觉得太单调:通过页面定制CSS代码换换换! 因为我只是在coffee上小改,所以 这个还是必须不勾选了. 打开firebug找到标题的背景图地址,然后把它换成你喜

虚拟化代码博客

推荐网站和博客地址 --------------------------------   虚拟化代码博客 QEMU大牛博客:qemu - 韋任的維基百科 http://people.cs.nctu.edu.tw/~chenwj/dokuwiki/doku.php?id=qemu 白水煮鸡蛋 http://blog.csdn.net/hsly_support 很多转载的代码分析文章,但是有的有些过时 http://blog.chinaunix.net/uid/26000137.html OenHa

博客的页面定制CSS

我目前的博客CSS其实也是借用了别家的,来源:https://www.cnblogs.com/Penn000/p/6947472.html 注意使用的模板是:darkgreentrip 复制粘贴使用就好,啊,提醒一下,如果想要换图片的话是这里哦: 红圈处的url改一下就好 #home { margin: 0 auto; width: 80%;/*原始65*/ min-width: 980px;/*页面顶部的宽度*/ background-color: rgba(245, 245, 245, 0.

页面定制CSS代码

博客皮肤:SimpleMemory .catListTitle { margin-top: 21px; margin-bottom: 10.5px; text-align: left; border-left: 10px solid rgba(82, 168, 236, 0.8); padding: 5px 0 5px 10px; background-color: rgba(245,245,245,0.3);}.newsItem, .catListEssay, .catListLink, .c