我的博客皮肤

目前使用的是Simple Bule主题修改得到，无需“禁用模板默认CSS”主要实现了下面几个功能，欢迎收藏和点评：

1. 页面定制CSS代码，进行样式修饰，可供参考与自行修改，修改背景色、阅读界面颜色、评论框样式等等，修饰页面中的p标签和h系列标签
2. 博客侧边栏公告，添加了一个头像，点击头像会跳出标语，添加太多影响找寻文章
3. 页首Html代码，右上欢迎词与左上搜索框，搜索框可以有技术含量的哦，可以没服务器，提示词是死的，博主正在嚎啕大哭中。。。
4. 页脚Html代码，实现的功能较多，例如添加链接到菜单栏，添加导航目录，添加每篇博客最后面的注明，添加阅读模式与正常模式等等

页面定制CSS

这里只讲侧边和阅读界面的p和h系列标签

.catListEssay ul li,
.catListLink ul li,
.catListNoteBook ul li,
.catListNoteBook ul li,
.catListTag ul li,
.catListPostCategory ul li,
.catListPostArchive ul li,
.catListArticleArchive ul li,
.catListImageCategory ul li,
.mySearch ul li,
.catListComment ul li,
.catListView ul li,
.catListFeedback ul li
{
    overflow: hidden;/*超过长度隐藏*/

    padding: 5px;/*内部全方位距离*/
    /*上下左右边框*/

    border-top: 1px solid #dadfe1;
    border-right: 1px solid #dadfe1;
    border-bottom: 1px solid #dadfe1;
    border-left: 1px solid #dadfe1;
}

.catListPostCategory li:hover,
.catListFeedback li:hover,
.catList li:hover,
.catListEssay li:hover,
.catListView li:hover
{
    border-left-width: 2px;/*左边框长度*/
    border-left-color: #f60;/*左边框颜色*/
}

.catListPostCategory li a,
.catListFeedback li a,
.catListView li a,
.catListEssay li a,
.catList li a
{
    display: block;/*前后添加换行符*/
    overflow: hidden;/*超过长度隐藏*/

    white-space: nowrap;/*超过长度是否换行*/
    text-decoration: none;/*链接不显示下划线*/
    text-overflow: ellipsis;/*类似于上面的overflow*/

    background-color: white;/*背景颜色*/
}

.postCon p
{
    font-size: 14px;/*设置大小*/

    width: 97.2%;/*设置长度*/
    margin-left: 5px;/*左边距*/
    padding: 1%;/*内部距*/

    color: black;/*颜色*/
    border-radius: 5px;/*框的厚度*/
    background-color: #fffcc4;/*背景色*/
}

#cnblogs_post_body h1
{
    font-size: 23px;/*设置大小*/

    margin-top: 20px;/*外部距上边标签距离*/
    margin-bottom: 20px;/*外部距下边标签距离*/
    padding-left: 19px;/*内部距做边框距离*/

    color: #4169e1;/*颜色*/
    border-left: 15px solid #4169e1;/*左边框*/
    background: #f5f5f5 !important;/*背景色*/
}
/*h2，h3类似，不再详述*/

博客侧边栏公告

贴贴链接、图像、swf动画什么的，可以参考一下我的，贴多了占空间，不方便找文章，建议如果要贴的话记得少贴点，哈哈。我的代码可以直接贴，只需要修改图像地址和大小，里面要引用我的博客内部css和js，要修改的可以自行下载然后修改，下载地址在最后面会给出。

                    <link type="text/css" rel="stylesheet" media="screen" href="http://files.cnblogs.com/files/tufujie/style.css" />
                    
                    
                    <div class="picBox">
                        <ul class="picL" id="picLsy" >
                            <li>
                                <a href ="http://home.cnblogs.com/u/tufujie/" target="_blank"><img src="http://images2015.cnblogs.com/blog/512541/201512/512541-20151228221133120-1394173186.jpg" alt="" width="210px" height="210px" /></a>
                                <div class="text">
                                    <b>欢迎访问我的博客</b>
                                    <p><a href="http://home.cnblogs.com/u/tufujie/" target="_blank" title="Jacksile的主页" >相互学习，传递知识，共同进步！——《Jacksile的博客》</a></p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    
                    
                    <script type="text/javascript" src="http://files.cnblogs.com/files/tufujie/jquery.min.js"></script>
                    <script type="text/javascript" src="http://files.cnblogs.com/files/tufujie/jquery.easing.min.js"></script>
                    <script type="text/javascript">
                        $(document).ready(function(){
                            
                            $("#picLsy li").hover(function(){
                                $(this).find('.text:not(:animated)').animate({top:"0px"}, {easing:"easeInOutExpo"}, 50, function(){});
                            },function () {
                                $(this).find('.text').animate({top:"176px"}, {easing:"easeInOutExpo"}, 50, function(){});
                            });
                            
                        });
                    </script>
                    

页首Html代码

 页首的欢迎词没什么技术含量，主要是搜索框，有点技术含量的哦，里面的提示词可以自行修改！

<style type="text/css">

  #auto_div{
    display: none;
    width: 257px;
    border: 1px #74c0f9 solid;
    background: #FFF;
    position: absolute;
    top: 24px;
    left: 0;
    margin-top: 15px;
    color: #323232;
    /*设置显示在当前页面的上一层*/
    z-index: 1;
  }

  .side_search{
    float: left;
    position: relative;
    height: 31px;
    margin-left: 25px;
    display: inline-block;
  } 
  .side_search:hover{
    -webkit-box-shadow: 0 0 3px #999;
    -moz-box-shadow: 0 0 3px #999
  }
  .search_input {
    width: 210px;
    vertical-align: middle;
    height: 30px;
    line-height: 30px;
    border: 1px solid #999;
    border-radius: 2px 0 0 2px;
    padding: 4px 7px;
    background-color: #fbfbfb;
  }
  .delete_btn{
    background: #fbfbfb;
    margin-left: -6px;
    border: 1px solid #fbfbfb;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    color: red;
    font-weight: bold;
    width: 38px;
    font-size: 25px;
    height: 38px;
    padding-bottom: inherit;
  }

  .search_btn {
    border-radius: 3px 3px 3px 3px;
    background: #4d90fe;
    margin-left: -7px;
    border: 1px solid #4d90fe;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    color: #f3f7fc;
    font-weight: bold;
    width: 100px;
    font-size: 18px;
    height: 41px;
  }

  .search_btn:hover{background:#1874CD} 

  .search_btn2 {
    border-radius: 3px 3px 3px 3px;
    background: #F0CB85;
    border: 1px solid #F0CB85;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    color: #DC143C;
    font-weight: bold;
    width: 100px;
    font-size: 18px;
    height: 41px;
  }

  .search_btn2:hover{background:#DEB887} 

  input, button, textarea, select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
  }

</style>
<script src="http://files.cnblogs.com/files/tufujie/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
        //测试用的数据
        var test_list = ["Java", "Java SE", "Java EE", "SSH", "JavaBean", "Servlet", "JSP", "DB", "MySQL", "Oracle", "HTML/CSS", "JavaScript", "jQuery", "AJAX", "Software", "Sublime Text", "Git", "Visual Studio Code", "Eclipse","Configuration", "System", "Java命名规范", "Java环境变量", "Subline Text快捷键", "Sublime Text主题下载、安装", "Eclipse快捷键", "Eclipse使用个性化设计", "用U盘安装系统", "内容太长，显示其中的一部分"];
        var old_value = "";
        var highlightindex = -1;   //高亮

        //自动完成
        function AutoComplete(auto, search, mylist) {
          if ($("#" + search).val() != old_value || old_value == "") {
                var autoNode = $("#" + auto);   //缓存对象（弹出框）
                var carlist = new Array();
                var n = 0;
                old_value = $("#" + search).val();

                for (i in mylist) {
                  if (mylist[i].indexOf(old_value) >= 0) {
                    carlist[n++] = mylist[i];
                  }
                }
                if (carlist.length == 0) {
                  autoNode.hide();
                  return;
                }
                autoNode.empty();  //清空上次的记录
                for (i in carlist) {
                    var wordNode = carlist[i];   //弹出框里的每一条内容

                    var newDivNode = $("<div>").attr("id", i);    //设置每个节点的id值
                    newDivNode.attr("style", "font:14px/25px arial;height:25px;padding:0 8px;cursor: pointer;");

                    newDivNode.html(wordNode).appendTo(autoNode);  //追加到弹出框

                    //鼠标移入高亮，移开不高亮
                    newDivNode.mouseover(function () {
                        if (highlightindex != -1) {        //原来高亮的节点要取消高亮（是-1就不需要了）
                          autoNode.children("div").eq(highlightindex).css("background-color", "white");
                        }
                        //记录新的高亮节点索引
                        highlightindex = $(this).attr("id");
                        $(this).css("background-color", "#ebebeb");
                      });
                    newDivNode.mouseout(function () {
                      $(this).css("background-color", "white");
                    });

                    //鼠标点击文字上屏
                    newDivNode.click(function () {
                        //取出高亮节点的文本内容
                        var comText = autoNode.hide().children("div").eq(highlightindex).text();
                        highlightindex = -1;
                        //文本框中的内容变成高亮节点的内容
                        $("#" + search).val(comText);
                      })
                    if (carlist.length > 0) {    //如果返回值有内容就显示出来
                      autoNode.show();
                    } else {               //服务器端无内容返回 那么隐藏弹出框
                      autoNode.hide();
                        //弹出框隐藏的同时，高亮节点索引值也变成-1
                        highlightindex = -1;
                      }
                    }
                  }

            //点击页面隐藏自动补全提示框
            document.onclick = function (e) {
              var e = e ? e : window.event;
              var tar = e.srcElement || e.target;
              if (tar.id != search) {
                if ($("#" + auto).is(":visible")) {
                  $("#" + auto).css("display", "none")
                }
              }
            }

          }

          $(function () {
            old_value = $("#zzk_q").val();
         //    实现刷新网页自动弹出，不喜欢，舍去
         //   $("#zzk_q").focus(function () {
         //    if ($("#zzk_q").val() == "") {
         //     AutoComplete("auto_div", "zzk_q", test_list);
         //   }
         // });

          $("#zzk_q").keyup(function () {
            AutoComplete("auto_div", "zzk_q", test_list);
          });
        });

          function quickdelete(){      
            document.getElementById("zzk_q").value ="";
          }

          function zzk_go() {
            var n = encodeURIComponent(document.getElementById("zzk_q").value);
            window.location = "http://zzk.cnblogs.com/s?w=blog%3Atufujie+" + n + "&t="
          }
          function zzk_go2() {
            var n = encodeURIComponent(document.getElementById("zzk_q").value);
            window.location = "http://zzk.cnblogs.com/s?w=" + n
          }
          function zzk_go_enter(n) {
            if (n.keyCode == 13)
              return zzk_go(), !1
          }
        </script>

        <!-- JiaThis Button BEGIN -->
        <script type="text/javascript" >
          var jiathis_config={
            data_track_clickback:true,
            siteNum:15,
            sm:"tsina,tqq,tsohu,t163,qzone,tieba,baidu,hi,txinhua,alibaba,weixin,cqq,renren,feixin,kaixin001",
            summary:"",
            boldNum:6,
            showClose:true,
            shortUrl:false,
            hideMore:false
          }
        </script>
        <script type="text/javascript" src="http://v3.jiathis.com/code/jiathis_r.js?uid=2078113&btn=r3.gif&move=0" charset="utf-8"></script>
        <!-- JiaThis Button END -->

        <h1 style="margin-left: 570px;padding-top:15px;padding-bottom: 15px; color: #337ab7;font-size: 3em;font-weight: bold;font-style: italic;text-shadow: 1px 0px 0px #1E90FF;">Welcome to Jacksile's Blog</h1>
        <div class="side_search">
          <input type="text" id="zzk_q" class="search_input" onkeydown="return zzk_go_enter(event);" placeholder="输入 回车搜索" tabindex="1" autofocus x-webkit-speech>
          <div id="auto_div">
          </div>
          <input onclick="quickdelete()" type="button" class="delete_btn" value="×" title="清空">
          <input onclick="zzk_go()" type="button" class="search_btn" value="本博搜索">
          <input onclick="zzk_go2()" type="button" class="search_btn2" value="园内搜索">
        </div>

页脚Html代码

页脚的代码我就是醉了，一个字，乱，两个字，很乱，但还是很有逻辑的，应该可以无障碍阅读

<style type="text/css">
    /*阅读模式的CSS修饰*/
    .reading_btn {
        border-radius: 3px 3px 3px 3px;
        background: #4d90fe;
        border: 1px solid #4d90fe;
        cursor: pointer;
        display: inline-block;
        vertical-align: middle;
        color: #f3f7fc;
        font-weight: bold;
        width: 100px;
        font-size: 18px;
        height: 45px;
    }

    .reading_btn:hover{background:#1874CD}
 /*阅读模式的CSS修饰*/
</style>


<!-- 返回最上面，需要结合页面定制CSS代码，要的可以找我，提供参考 -->
<div class="actGotop"><a href="javascript:;" title="返回顶部"></a></div>

<script type="text/javascript">
    $.getScript("http://files.cnblogs.com/files/tufujie/jquery.min.js",function(){$(function(){
        $(window).scroll(function() {       
            if($(window).scrollTop() >= 1000){
                $('.actGotop').fadeIn(300); 
            }else{    
                $('.actGotop').fadeOut(300);    
            }  
        });
        $('.actGotop').click(function(){
            $('html,body').animate({scrollTop: '0px'}, 800);}); 
    });})
</script>
<!-- 返回最上面，需要结合页面定制CSS代码，要的可以找我，提供参考 -->

<!-- 云推送 -->
<!--cnzz tui-->
<script  type="text/javascript" c=fc charset="utf-8"  src="http://tui.cnzz.net/cs.php?id=1000099156"></script>
<!--cnzz tui-->
<!-- 云推送 -->

<script type="text/javascript" src="http://files.cnblogs.com/files/tufujie/bootstrap.min.js"></script>

<!-- 添加博文最后面的注明 -->
<script type="text/javascript" src="http://files.cnblogs.com/files/tufujie/tufujie.cnblogs.js"></script>
<!-- 添加博文最后面的注明 -->

<!-- 添加文章目录 -->
<link href="http://files.cnblogs.com/files/tufujie/tufujie.nav.my1502.css" rel="stylesheet">
<script type="text/javascript" src="http://files.cnblogs.com/files/tufujie/tufujie.nav.my1502.js"></script>
<!-- 添加文章目录 -->

<!-- 添加菜单到菜单栏 -->
<script>
    $(function(){
        $("#navList").append('<li id="nav_file"><a id="tufujie" rel="nofollow" href="http://i.cnblogs.com/Files.aspx" target="_blank" title="进入文件管理">文件</a></li>');
        $("#navList").append('<li id="nav_config"><a id="tufujie" rel="nofollow" href="http://i.cnblogs.com/Configure.aspx" target="_blank" title="进入配置管理">配置</a></li>');
        $("#navList").append('<li id="nav_prefer"><a id="tufujie" rel="nofollow" href="http://i.cnblogs.com/Preferences.aspx" target="_blank" title="进入选项管理">选项</a></li>');
        $("#navList").append('<li id="nav_home"><a id="tufujie" rel="nofollow" href="http://home.cnblogs.com/" target="_blank" title="进入我的园子">园子</a></li>');
        $("#navList").append('<li id="nav_follow"><a id="tufujie" rel="nofollow" href="http://home.cnblogs.com/followees/" target="_blank" title="进入我的关注">关注</a></li>');
        $("#navList").append('<li id="nav_wz"><a id="tufujie" rel="nofollow" href="http://wz.cnblogs.com/" target="_blank" title="进入我的收藏">收藏</a></li>');
        $("#navList").append('<li id="nav_msg"><a id="tufujie" rel="nofollow" href="http://msg.cnblogs.com/inbox" target="_blank" title="进入我的消息">消息</a></li>');

            //加载图片
            var ponum1 = $(".postTitle").length;
            var ponum2 = $(".entrylistPosttitle").length;
            if(ponum1!=0)articleimg(ponum1);
            if(ponum2!=0)entrylistarticleimg(ponum2);
        });
</script>
<!-- 添加菜单到菜单栏 -->

<!-- 阅读模式与普通模式 -->
<script type="text/javascript">
    function readPattern(){
        var btn = document.getElementById("btnRead");
        if(btn.value=="阅读模式")
        {
            btn.value="普通模式";
            $("#home").animate({opacity: 1,marginTop: '10px'},1000);
            $(".side_search").animate({opacity: 0,top: '-=45',height: 'toggle'},1000);
            $("#navList").animate({opacity: 0,top: '-=90',height: 'toggle'},1000);
            $("#blogTitle").animate({opacity: 0,top: '-=90',height: 'toggle'},1000);
            $("#sideBar").animate({opacity:0,left:'-=280',height:'toggle'},1000);
            $("#sideToolbar").animate({opacity:1,left:'+=1034',height:'toggle'},1000);
            $("#mainContent").animate({marginLeft:'140px',marginRight:'145px',marginTop: '-35px','87.8%'},1000);
        }
        else
        {
            btn.value="阅读模式";
            $("#home").animate({opacity: 1,marginTop: '50px'},1000);
            $(".side_search").animate({opacity: 1,top: '+=45',height: 'toggle'},1000);
            $("#navList").animate({opacity: 1,top: '+=90',height: 'toggle'},1000);
            $("#blogTitle").animate({opacity: 1,top: '+=90',height: 'toggle'},1000);
            $("#sideBar").animate({opacity:1,left:'+=280',height:'toggle'},1000);
            $("#sideToolbar").animate({opacity:1,left:'-=1034',height:'toggle'},1000);
            $("#mainContent").animate({marginLeft:'280px',marginRight:'5px','79.5%',marginTop: '10px'},1000);
        }
    }

    function hideTip(id){
        $(id).fadeTo(1,1);
        var t = setTimeout(function(){$(id).fadeOut(1000);},2500);
    }
</script>
<div id="tip" style="display:none;position: fixed;right:76px;bottom:197px;
background: #FFFF96;
padding: 5px;
font-size:12px;
 120px;
border- 1px 1px 0px 1px;
border-color: #B9B9B9;
border-style: solid;line-height: 17px;
z-index:10001;">
<b>模式切换成功！</b><br>您可以再次单击恢复。
<div style="position:absolute;margin:5px -5px 0px -5px;height:12px;
 150px;
background: url('http://files.cnblogs.com/files/tufujie/cursor.gif') top right no-repeat
;"></div>
</div>

<div style="position: fixed;
right: 30px;
bottom: 141px;
background-color: rgba(30, 144, 255, 0.8);filter:alpha(opacity=80);zoom:1;
-webkit-border-radius: 4px;z-index:10000;">
<input type="button" class="reading_btn" style="
font-family: 'Microsoft Yahei',Tahoma,Arial,Helvetica,STHeiti;
-webkit-border-radius: 4px;" id="btnRead" value="阅读模式" onclick="readPattern();hideTip('#tip');"/>
</div>
<!-- 阅读模式与普通模式 -->

个性化设计

如果你想要个性化设计，已经提供相关文件下载，你可以自行修改，打造自己的博客园皮肤，有些文件没有提供，点击链接也是可以查看保存的

bootstrap.min.js

tufujie.cnblogs.js

tufujie.nav.my1502.css

tufujie.nav.my1502.js

jquery.min.js

running_blackhorse.gif

sideToolbar.gif

active.gif

static.png