• 博客园美化样式重整


    重新美化了一下博客,以前的都没用了

    文章链接  -设计自己的博客园效果

    body {
        background-image: url('http://www.cnblogs.com/skins/BlueSky/images/bg.gif');
        background-repeat: repeat;
        background-color: #FFFDFA;
    }
    .clear {
    
        clear: both;
    }
    
    html {
        color: #000;
        overflow-y: scroll;
        background: #fff;
    }
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, fieldset, lengend, button, input, textarea, form, th, td {
        margin: 0;
        padding: 0;
        list-style-type: none;
        list-style-image: none;
    }
     body, button, input, select, textarea {
        font: 12px/1.5 Tahoma, Arial, Helvetica, sans-serif;
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: 100%;
        font-weight: normal;
    }
    address, cite, dfn, em, var {
        font-style: normal;
    }
    code, kbd, pre, samp, tt {
        font-family: "Courier New", Courier, monospace;
    }
    small {
        font-size: 12px;
    }
    ul, ol {
        list-style: none;
    }
    a:link, a:visited {
        text-decoration: none;
        color: #000000;
    }
    a{
            cursor: pointer;
    
    }
    a:hover {
        text-decoration: underline;
    }
    abbr[title], acronym[title] {
        border-bottom: 1px dotted;
        cursor: help;
    }
    q:before, q:after {
        content: '';
    }
    :focus {
        outline: 0;
    }
    legend {
        color: #000;
    }
    fieldset, img {
        border: none;
    }
    button, input, select, textarea {
        font-size: 100%;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    img {
        -ms-interpolation-mode: bicubic;
    }
    /*html5*/
    article, aside, dialog, footer, header, hground, section, footer, nav, figure, menu {
        display: block
    }
    
    #navigator,#blogTitle,#main,#footer{width: 1300px;
        position: relative;
        margin: 0 auto;}
    
    #header{
        height: 40px;
        width: 100%;
        background-color:#2175bc;
    
    }
    #main{
        margin-top: 60px; 
        margin-bottom: 0px;
        
    }
    #mainContent{
        width: 1000px;
        background: white;
        box-shadow: 0px 0px 8px #999;
        -moz-box-shadow: 0px 0px 8px #999;
        -web-kit-shadow: 0px 0px 8px #999;
        border-radius: 6px;
        -moz-border-radius: 6px;
        -web-kit-shadow: 6px;
        float: left;
        display: inline-block;
    overflow: auto;
    }
    #sideBar{
        width: 200px;
        padding: 32px;
        display: inline-block;
        overflow: hidden;
        color: #2D2D2D;
    }
    #footer{
    display:none;
    
    }
    
    
    #navigator{
        top: 8px;
    }
    #navList li{
        float: left;
        margin-right: 25px;
        display: inline;
    }
    #navList li a{
        font-size:15px;
        text-decoration: none;
        color: #FFF;
        padding: 10px;
        background-color: #2175bc;
    }
    #navList li a:hover{
        background-color:#2586d7;
        margin-top:-2px;
        padding-bottom:12px;
        color: #fff;
        opacity:1; 
        }
    
    .blogStats{
        color: #CACACA;
        font-size: 12px;
        text-align: right;
    }
    #Header1_HeaderTitle{
        color:white;
    }
    
    #Header1_HeaderTitle:hover{
        text-decoration: none;
    }
    
    .day{background:white; padding:32px;}
    .postTitle,.postTitl2,.entrylistPosttitle{
        font-size: 20px;
        padding-right: 64px;
        padding-left: 10px;
        border-left-width: 3px;
        border-left-style: solid;
        border-left-color: #2175bc;
    }
    .postTitle a,.postTitl2 a,.entrylistPosttitle a{
        color: #333;
    }
    .postTitle a:link, .post-title a:visited,.postTitl2 a:link,.postTitl2 a:visited,.entrylistPosttitle a:link,.entrylistPosttitle a:visited{color:black;}
    .postTitle a:hover,.postTitl2 a:hover,.entrylistPosttitle a:hover{color:##3399ff;text-decoration:none;}
    
    .postBody,.postCon,.entrylistPostSummary{clear:both; margin-top:26px;}
    .postBody,.postCon,.entrylistPostSummary{font-size:14px;color:#444;line-height:1.8;}
    .postCon h1, .postCon h2, .postCon h3, .postCon h4, .postCon h5, .postCon h6{
        font-weight:bold;
        line-height:1.8;
    }
    .postBody h1,.postCon h1{font-size:20px;}
    .postBody h2,.postCon h2{font-size:18px;}
    .postBody h3,.postCon h3{font-size:16px;}
    .postBody h4,.postCon h4{font-size:14px;}
    .postBody h5,.postCon h5{font-size:14px;}
    .postBody h6,.postCon h6{font-size:14px;}
    .postBody dd,.postCon dd{padding-left:2em;}
    .postBody ul,.postCon ul{list-style:none;margin-left:20px;}
    .postBody ul li,.postCon ul li{list-style:inside disc;}
    .postBody dt,.postCon dt{ font-weight:bold; padding:6px 0; clear:both}
    .postBody ol,.postCon ol{list-style:none;margin-left:20px;}
    .postBody blockquote,.postCon blockquote{width:90%;margin:0 auto;padding:6px 0 6px 45px;color:#666;
        background:white url(/images/blockquote.gif) top left no-repeat;}
    .dayTitle,.postDesc{ font-size:12px; color:#999999;}
    .postDesc,.postDesc2,.entrylistItemPostDesc{
        border-bottom: 1px dashed #E8E7D0;
        text-align: right;
        margin: 20px 0px;
        padding:5px 0px;
    }
    .dayTitle{
        border:1px solid #cccccc;
        position: relative;
        top: -20px;
        width: 100px;
        left: -20px;
        padding-top: 3px;
        padding-right: 0px;
        padding-bottom: 3px;
        padding-left: 8px;
    }
    
    .dayTitle a{
         color:#333;
     }
    
    .topicListFooter{
        padding: 32px;
    }
    #sideBarMain div{margin-bottom:26px;}
    #sideBarMain div div{margin-bottom:5px;}
    #sideBarMain h3{
        font-weight: bold;
        margin-bottom: 12px;
        color: #333;
        border-bottom-width: 1px;
        border-bottom-style: dashed;
        border-bottom-color: #D4D4D4;
        padding-bottom: 10px;
        margin-top: 20px;
    }
    
    #blog-comments-placeholder,#divRefreshComments,.commentform,#AjaxHolder_UpdatePanel1{padding: 0 32px;}
    
    .post{padding: 32px;}
    
    .feedbackItem{
        border: 1px solid #E3E3E3;
        padding: 5px;
        margin-bottom: 10px;
        background-color: #F6F6F6;
    }
    .blog_comment_body{
        color: #929292;
        padding-top: 10px;
    }
    .forFlow p{margin-bottom:18px;}
    .forFlow img{
         margin-bottom: 20px;
    }
    
    .PostList,.entrylistItem{
        margin:20px;
    }
    
    .entrylistTitle,.PostListTitle{
        display:none;
    }
    
    
    #blogTitle{
        display:none;
    }
    
    .cnblogs_code img{
    margin:0;
    float:left;
    }
    
    .cnblogs_code_toolbar {
    margin-top: 0px;
    }
    
    .code{
    padding:0 10px;
    }
    
    h4{
    font-size: 16px;
    background-color: #F60;
    margin: 0 -32px;
    padding: 0 32px;
    color: white;
    }
    
    #myposts .myposts_title{font-size: 16px;margin-top: 20px;text-align: center;}
    
    #myposts .postTitl2 {border-left: none;padding-left: 0px;padding-right: 0px;}
    
    #myposts .postTitl2 a{    font-size: 16px;}
    
    #myposts .postDesc2 {margin: 20px 0 20px 5px;}
    
    #cnblogs_post_body{font-size: 14px;}
    #green_channel{
    widthL100%;
    }
    
    #green_channel img {
        margin-top: 0;
        margin-bottom: 0;
    }
    
    #cnblogs_post_body img { max-width: 650px; }
    
    .commentbox_main img{
        margin-top: 0;
        margin-bottom: 0;
    }
    
    
    /*底部*/
    
    
    /* **********************
     * 评论
     * **********************/
    
    #comment_form_container .comment_textarea {
      width: 100%;
    }
    
    .comment_vote {
      padding-right: 2px;
      font-size: 14px;
      margin-top: 10px;
    }
    
    .comment_vote a.comment_digg {
      color: #f80;
    }
    
    .feedbackItem {
      margin: 20px 0 25px;
      background: #fff;
      padding: 10px 15px;
    }
    
    .feedbackCon {
      font-size: 13px;
      border-bottom: 0;
      padding: 10px 5px 0 5px;
      text-align: justify;
    }
    
    div.commentform input.author  {
        background-image: url(//static.cnblogs.com/images/icon_form.gif);
        background-repeat: no-repeat;
        border: 1px solid #ccc;
        padding: 4px 4px 4px 30px;
        width: 100px;
        font-size: 13px;
    }
    
    
    
    
    /* **********************
     * 文章评价
     * **********************/
    /* **********************
     * 点赞,评论优化
     * **********************/
    
    #div_digg {
      position: fixed;
      right: 30px;
      bottom: 50px;
      background: #fff;
      padding: 20px 20px 15px;
      border-radius: 5px;
      border: 1px solid #888;
      box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.3);
    }
    
    @media (max- 767px) {
     
      #div_digg {
        width: auto;
        padding: 0;
        right: -25px;
        bottom: 3px;
        box-shadow: none;
      }
      
    }
    
    .zdy{
    
    padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        color: #000;
        font-size: 20px;
    }
    
    
    /******下一页******/
    
    
    #nav_next_page{
    display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px; 
        background-color: #337ab7;
        border-color: #2e6da4;
    }
    #nav_next_page a{
    text-decoration: none;
        color: #fff;
    }
    
     
    #homepage1_HomePageDays_homepage_bottom_pager>div.pager a ,
    #homepage_top_pager>div.pager  a{
    display: inline-block; 
        margin-bottom: 0; 
        font-weight: 400; 
    text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
        background-color: #337ab7;
        border-color: #2e6da4;
    }
      
    #homepage1_HomePageDays_homepage_bottom_pager>div.pager a:hover,
    #homepage_top_pager>div.pager  a:hove{
    text-decoration: none;
    }
    Css
    <script src="https://blog-static.cnblogs.com/files/whatarey/jq22.js" type="text/javascript"></script>
    <div align="center">您是第
    <a href="http://www.amazingcounters.com">
    <img border="0" src="http://cc.amazingcounters.com/counter.php?i=3223365&c=9670408" alt="AmazingCounters.com">
    </a>位吃瓜群众
    </div>
    <script src="https://blog-static.cnblogs.com/files/whatarey/headBand.min.js" type="text/javascript"></script>
    
    <script>   
    
    $('.Cgraintest').headBand({'background':'#ffcc00','height':"10"}); 
    
    $(document).ready(function(){
    $('.Cgraintest').headBand({'background':'#ffcc00','height':"10"});
        var a_index = 0;
        $("body").click(function(e){
            var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
            var $i = $("<span/>").text(a[a_index]);
            a_index = (a_index + 1) % a.length;
            var x = e.pageX,y = e.pageY;
            $i.css({
                "z-index": 99999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "#ff6651"
            });
            $("body").append($i);
            $i.animate({"top": y-180,"opacity": 0},1500,function() {
                $i.remove();
            });
        });
    });
    
     
    console.log("看见这里了,不点个赞再走嘛?");
    </script>

    嗯,觉得我的样式好看就尽管Copy~~~前提是点个赞哦!!!

    页首

    <script src="https://blog-static.cnblogs.com/files/whatarey/jq22.js" type="text/javascript"></script>
    <div class="Cgraintest"></div>

    页眉,页脚

    <p class="zdy">
    <a  href="https://www.cnblogs.com/whatarey/">Cgrain</a></br>
    <a  href="https://music.163.com/#/song?id=29772412"  target="_blank" rel="nofollow">  拜拜我的少年时代</a>-
    <a  href="https://music.163.com/#/artist?id=1007170"  target="_blank" rel="nofollow"> 陈粒</a>
    </p>
  • 相关阅读:
    gRPC初识
    Go操作MySQL
    Go语言操作Redis
    Markdown 教程
    Go操作MongoDB
    Go操作NSQ
    Go操作kafka
    Go操作etcd
    Go语言获取系统性能数据gopsutil库
    influxDB
  • 原文地址:https://www.cnblogs.com/whatarey/p/10472954.html
Copyright © 2020-2023  润新知