zoukankan      html  css  js  c++  java
  • 博客装扮3-博客园界面装扮优化教程

    因为我想重新装扮一下博客。所以就将第一次的博客装扮样式给大家看看

    装扮博客在点击菜单栏的管理--->选项--->博客设置

    设置的参数如下:

    博客皮肤
    LessIsMore
    页面定制CSS代码

    /*悬浮推荐按钮*/
    #div_digg {
      position: fixed;
      bottom: 10px;
      right: 15px;
      border: 2px solid #ECD7B1;
      padding: 10px;
       140px;
      background-color: #fff;
      border-radius: 5px 5px 5px 5px !important;
      box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
    }
    #sideBar { 20%; }
    #mainContent { margin-left: auto; 78%; }
    .forFlow { margin:auto; }


    /*皮肤*/
    #navigator {  height:auto; overflow:hidden; *zoom:1;}
    /*名为.blogStats的div在选择的模板中已经进行了右浮动
    不必再进行设置*/
    #navList { float:left; }
    #navList li { display: inline; float: none; }

    #navigator { background: #666; }
    #navList { font-size: 16px; }
    .blogStats { font-size: 12px; }
    #sideBar { 20%; border: none; padding: 0; }
        #sideBar h3 { padding-left: 8px; background-color: #666; }
    #sideBarMain { padding-left: 8px; }
    body { background-color: #333; color: #fff; font-size: 14px; }
    h1, h2, h3, h4, h5, h6, th, .feedbackCon, .blogStats { color: #fff; }
    #main { border: 1px solid #e5e5e5; }
    .day { margin: 20px 0px; }
    .postTitle { padding-left: 20px; font-size: 16px;
                 border-bottom-color: #666; }
    .postBody, .postCon { padding: 0px 20px 10px;
                          border-bottom: 1px solid #666; }
    .postDesc { padding-right: 20px; }
    a, .postCon a, .postBody a, .feedbackCon a { color: #0dd; }
        a:hover, a:active, a:focus { color: #ff8; text-decoration: none; }
    #navigator, #MySignature, .day, .post { border: 1px solid #e5e5e5;
        border-radius: 8px; box-shadow: 2px 2px 10px #aaa; }
    #navigator { border-radius: 8px 8px 0px 0px; }
    .post { border-right: none; border-top: none;
            border-radius: 0px 0px 8px 8px; padding-top: 1px; }
    .cnblogs_code, .cnblogs_code div {
        color: #000; font-family: consolas, monospace, sans-serif; }


    #navigator {  height:auto; overflow:hidden; *zoom:1;}
    /*名为.blogStats的div在选择的模板中已经进行了右浮动
    不必再进行设置*/
    #navList { float:left; }
    #navList li { display: inline; float: none; }




    body
    {
       /*其它主要浏览器不需要这个样式,
       但在IE6/7居中是必须的*/
       text-align:center;
    }
    #home
    {
       /*margin: 0px auto;可以使内容在除IE6/7外的其它
       主要浏览器内居中*/
       margin: 0px auto;
       /*因为body的text-align:center;样式具有继承性,
       所以要重置文本向左对齐*/
       text-align:left;
       max-960px;
    }



    #mainContent { 100%; margin-left: -250px; float: right; }
    #sideBar { 220px; float: left; }
    .forFlow { margin-left:266px; }



    @-ms-viewport {
        device-width;
    }
    @media (max-990px) {
        #home{ margin:0 15px; }
    }
    @media (max-640px) {
        #sideBar, #mainContent{ 100%;}
        .post{ border-left:none; }
    }

    页首Html代码//这个是我的github,如果你有github的话你可以自己定制一个!

    1 <a href="https://github.com/zzzzw"><img style="position:absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/c6286ade715e9bea433b4705870de482a654f78a/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_white_ffffff.png"></a>

    页脚Html代码//这是我的统计,你也可以自己定制一个,教程可以查看我的微博java666666

    <div align="center"><a href="http://www.amazingcounters.com"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=3189139&c=9567730" alt="AmazingCounters.com"></a></div>
    ---- 动动手指关注我!或许下次你又能在我这里找到你需要的答案!ZZZZW与你一起学习,一起进步!
  • 相关阅读:
    顺时针打印二维矩阵
    hbase的rowKey设计原则
    关于这段时间学习 EntityFramework的 一点感悟
    一次排序序号的补充
    我的第一段jQuery代码
    非常郁闷的 .NET中程序集的动态加载
    关于EF6的记录Sql语句 与 EntityFramework.Extend 的诟病
    排序更改
    ZhyjEye 简介
    js数组去重的4个方法
  • 原文地址:https://www.cnblogs.com/zzzzw/p/4524421.html
Copyright © 2011-2022 走看看