zoukankan      html  css  js  c++  java
  • 博客开通(附本博客样式)

    博客于今日开通,在这网络资源日益丰富的年代,曾经在这里得到了许多宝贵的资料以及众多经验。想想也该到了分享心得的阶段了,顺便记录下成长的经历,共勉。


    以下为2017/06/26更新内容:

    我的博客园界面打造流程

    • 选择皮肤CodeingLife

        

    • 修改样式(后台设置样式代码如下)

      

    页面定制CSS代码

    /*****调整原有博客页面元素高度位置等等*****/
    #blogTitle {
        height: 0px;
    }
    #blogTitle h1 {
        font-size: 0px;
    }
    #blogTitle h2 {
        font-size: 0px;
    }
    #navigator {
        height: 50px;
            width:100%;/*用于适应各种大小的设备*/
    }
    #navList {
        min-height: 50px;
            margin: 10px 0 0 20px;
            width:100%;/*用于适应各种大小的设备*/
    }
    #navList li {
        float: left;
        line-height: 27px;
    }
    #navList a {
        padding: 0 10px;
            font-size: 23px;
    }
    body {
    background: #D2E8F8
    }
    /*****导航菜单鼠标悬停透明*****/
    #navList a:hover {
        background-color: #00000000;/*背景透明*/
        color: #FF5E52;/*字体颜色*/
    }
    
    #mainContent {
        width: 74%;
        margin: 0 0 0 2%;
    }
    
    #sideBar {       
        margin: 0 0 0 15px;
            width: 22%;
    }
    
    /*****自定义日期栏*****/
    #blog-calendar .Cal, #calendar .Cal {
        line-height: 1.5em;
        border-top: 8px solid #f33324;
        background: #fff;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    
    /*****边侧栏整体宽度*****/
    .sidebar-block {
    }
    
    /*****自定义公告栏的CSS*****/
    #profile_block_my:hover {   
        border: 1px solid #ff5e52;
    }
    #profile_block_my {   
        background: #fff;   
        padding: 20px;   
        color: #7e8c8d;    
        font-size: 13px;   
        line-height: 1.8;    
        margin-top: 0 !important;    
        border: 1px solid #dedede;
    }
    #profile_block_my {  
        margin-top: 5px;    
        line-height: 1.5;    
        text-align: left;
    }
    
    .sidebar-block h3 {    
        padding: 2px 12px;
    }
    
    
    
    /*****“找找看”文本键入框宽度*****/
    #widget_my_zzk {
        padding: 1px 0 1px 1px;
        border-left: 1px solid #dedede;
        border-right: 1px solid #dedede;
        margin: 0 !important;
    }
    #sidebar_search_box input[type="text"] {
        width: 61.3%;
    }
    
    /*****“蓝色底标签的高度调整*****/
    .catListTitle {   
        padding: 1px 20px;
    }
    
    
    
    /*****“使随笔档案等边框栏目内容更为紧凑*****/
    .sidebar-block ul li {
        padding: 0px 12px 0px 12px;
    }
    
    /*****广告的背景设置为与底色背景一致*****/
    #under_post_news {
        background-color: #D2E8F8;
    }
    #under_post_kb {
        background-color: #D2E8F8;
    }
    
    /*****一键返回顶部*****/
    #back-to-top {
        background-color: #FF5E52;
        bottom: 0;
        box-shadow: 0 0 6px #FF5E52;
        color: #fff;
        padding: 10px 7px;
        position: fixed;
        right: 0px;
        cursor: pointer;
    }
    a:hover {
        color: #fff;
    }
    View Code

    侧边栏公告(支持HTML代码)(支持JS代码)

    <!-- 删除原有的profile_block -->
    <script>
    var parent=document.getElementById("blog-news");
    var child=document.getElementById("profile_block");
    parent.removeChild(child);
    </script>
    
    <!-- 添加自己的的profile_block_my -->
    <div id="profile_block_my">&nbsp;&nbsp;&nbsp;称 : <a href="http://home.cnblogs.com/u/xiaoxi666/">xiaoxi666</a><a href="javascript:void(0);" &ensp;
    onclick="follow('b811d974-8da2-e311-8d02-90b11c0b17d6')"><font  size="2" color="skyblue">+关注</font></a><br>
    <!-- 添加自己的GitHub链接 -->
    <div >GitHub : <a href="https://github.com/xiaoxi666"><span class="s3">github.com/xiaoxi666</span></a>
    <!-- 添加邮箱 -->
    <br />E-mail : <a href="mailto:xiaoxi666swap@163.com">xiaoxi666swap@163.com</a>
    </div>
    
    </div>
    
    <!-- 删除原有的google搜索 -->
    <script>
    var parent=document.getElementById("sidebar_search_box");
    var child=document.getElementById("widget_my_google");
    parent.removeChild(child);
    </script>
    
    <!-- 删除“标签” -->
    <script>
    var parent=document.getElementById("blog-sidecolumn");
    var child=document.getElementById("sidebar_toptags");
    parent.removeChild(child);
    </script>
    
    <!-- 删除"最近评论" -->
    <script>
    var parent=document.getElementById("blog-sidecolumn");
    var child=document.getElementById("sidebar_recentcomments");
    parent.removeChild(child);
    </script>
    View Code

    页脚Html代码

    <span id="back-to-top"><a href="#top"><strong>TOP</strong></a></span>
    View Code

    特此记录。


    我的笔名是“小溪”,寓意为“如果有什么东西挡住了你的去路……绕开它!”,这是Jeff Atwood博客中Curtis Armstrong影视节目《再见人生》中的一句台词。避开那些难缠的羁绊,快速前进吧!

    小溪 xiaoxi666

    如果有什么东西挡住了你的去路……绕开它!

    Master programmers think of systems as stories to be told rather than programs to be written. ——《clean code》

    『注:本文来自博客园“小溪的博客”,若非声明均为原创内容,请勿用于商业用途,转载请注明出处http://www.cnblogs.com/xiaoxi666/』
  • 相关阅读:
    周总结
    周总结
    周总结
    读后感
    周总结
    周总结
    周总结
    第一周总结
    大学生失物招领平台使用体验
    快速乘法+快速幂
  • 原文地址:https://www.cnblogs.com/xiaoxi666/p/6293750.html
Copyright © 2011-2022 走看看