zoukankan      html  css  js  c++  java
  • 博客园主题美化,修改主题

    Nice,博客园的CSS 花了一天终于弄完了。

    暑假 + 开学前半个月 学了CSS,本来想学Web安全的,结果其他很多东西学了很多,Web安全没太学(汗)

    原来的模板是 SimpleMemory

    直接把默认CSS禁用了,不然一堆冲突

    CSS还有很多要学的,还有很多待完善的

    自己感觉非常好看,嘿嘿嘿

    ---

    又拿手机试试,发现原来的模板还有mobile版的,有点不兼容,不知道怎么办,只能用 !important 了

    ---

    晚上发现标签页、分页、归档页面等等还没实现,就又弄了一晚上,今天一天都没学别的,啧啧

    半夜又改了

    ---

    2018/12/19

    想改一下代码,有点乱。冗余,又删除了一部分。

    ---

    2019/8/21

    好像SimpleMemory这个模板改了几个ID,然后有些东西失效了

    ---

    2020/09/26 评论区

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{
        margin: 0;
        padding:0;
    }
    img{
        max- 700px !important;
    }
    body{
         1200px;
        margin: 0 auto;
        color: #666;
        background-color: rgb(250, 250, 250);
        font-family: "consolas","微软雅黑",sans-serif;
    }
    *::selection{
        background-color: rgb(214,236,254);
    }
    ul{
        list-style: none;
    }
    .clear{
        clear:both;
    }
    #lnkBlogLogo{
        display: none;
    }
    #home{
        margin: 80px 0 30px 0;
        padding: 40px;
        background-color:rgba(232,232, 232, 0.5);
        border-radius: 5px;
        box-shadow: 0 0 10px 0 rgba(218, 218, 218, 0.397);
    }
    #main{
        background-color:rgba(232,232, 232, 0);
    }
    /*【导航】 [start]*/
    #header{
        height: 104px;
        background-color:rgba(232,232, 232, 0);
        border-radius: 5px;
    }
    #blogTitle{
        margin-top: 10px;
        height: 60px;
        border-radius: 5px;
    }
    #blogTitle h1{
        margin: 8px 0 0 20px;
        display: inline-block;
    }
    #blogTitle h2{
        color: #999;
        margin-left: 10px;
        display: inline-block;
        font-size: 20px;
    }
    #blogTitle .headermaintitle{
        color: #888;
        letter-spacing: 1px;
    }
    #blogTitle .headermaintitle:hover{
        color: rgb(74, 82, 109);
    
    }
    #navigator{
        height: 50px;
        background-color: rgba(240, 240, 240, 0.5);
        border-radius: 5px;
        box-shadow: 0 0 6px 0 #ddd;
    }
    #navList li{
        float: left;
        margin: 13px 0 0 40px;
    }
    #navList li:nth-child(1){
        margin-left: 20px;
    }
    #navList li a{
        color: rgb(63, 125, 187);
        text-decoration: none;
        font-size: 18px;
        font-weight: bold;
    }
    #navList li a:hover{
        color: #369;
    }
    #header .blogStats{
        float: right;
        margin: 15px 10px 0 0;
        color: #369;
        font-size: 17px;
    }
    /*【导航】 [end]*/
    
    #mainContent{
        border-radius: 5px !important;
         840px !important;
        float: left !important;
        margin-top: 30px;
        padding: 10px;
        box-sizing: border-box;
        box-shadow: 0 0 6px 0 #ddd;
    }
    
    /*【右侧栏】 [start]*/
    
    /**/
    #blog-calendar tr:not(:first-child) td:not(.CalTodayDay) a{
        padding: 3px 5px 3px 5px;
        background-color: #A0D3FF;
        color: #fff;
        border-radius: 45px;
    }
    
    #blog-calendar .CalTitle a:hover{
        background-color: #eee;
    }
    #blog-calendar td{
         30px;
        height: 25px;
    }
    #blog-calendar .CalTitle{
            margin-bottom: 10px;
    }
    #blog-calendar .CalTitle td:nth-child(2){
         100px;
        font-size: 18px;
    
    }
    #blog-calendar .CalTodayDay{
        background-color: rgb(201, 201, 201);
        border-radius: 45px;
    }
    #blog-calendar .CalTodayDay a{
        color: #fff ; 
        text-decoration: none;
    }
    #blog-calendar .CalTodayDay u{
        text-decoration: none;
    }
    
    #blog-calendar .CalTitle a{
        color: #666;
        text-decoration: none;
        font-size: 20px;
        font-weight: bold;
        padding: 3px 8px 3px 8px;
        border-radius: 3px;
    }
    /**/
    
    #sideBar{
         260px !important;
        float: right !important;
        border-radius: 5px !important;
        box-sizing: border-box;
        margin-top: 30px !important;
        background-color:rgba(232,232, 232, 0);
        border-radius: 5px;
    }
    .catListTitle{
        color: rgb(36, 114, 192);
        padding: 6px;
        text-indent: 5px;
        background-color:rgba(232,232, 232, 0.5);
        border-bottom: 1.2px dashed #ccc;
        letter-spacing: 3px;
    
    }
    .newsItem .catListTitle{
        margin: 0;
    }
    #profile_block{
        margin-left: 20px;
    }
    #profile_block a{
        text-decoration: none;
        color: #369;
        font-size: 16px;
        padding: 4px 8px 4px 8px;
        border-radius: 3px;
        display: inline-block;
    }
    #profile_block a:hover{
        background-color: rgb(236, 236, 236);
    }
    .newsItem{
        border-bottom: 1.2px dashed #ccc;
        padding-bottom: 1px;
        box-shadow: 0 0 6px 0 #ddd;
    }
    #blog-calendar{
        padding: 10px 20px 10px 20px;
        box-shadow: 0 0 6px 0 #ddd;
    }
    .mySearch{
        margin-top: 29px;
        box-shadow: 0 0 6px 0 #ddd;
        padding-bottom: 10px;
    }
    #sidebar_shortcut{
        margin-top: 30px;
        box-shadow: 0 0 6px 0 #ddd;
        padding-bottom: 10px;
    }
    #sidebar_recentposts,#sidebar_topviewedposts, #sidebar_topcommentedposts, #sidebar_recentcomments, #sidebar_postarchive,#sidebar_topdiggedposts {
        margin-top: 30px;
        box-shadow: 0 0 6px 0 #ddd;
        padding-bottom: 1px;
    }
    #sidebar_recentposts ul,#sidebar_topviewedposts ul, #sidebar_topcommentedposts ul, #sidebar_recentcomments ul, #sidebar_postarchive ul,#sidebar_topdiggedposts ul{
         margin: 10px;
    }
    #sidebar_recentposts li a, #sidebar_topviewedposts li a, #sidebar_topcommentedposts li a, #sidebar_recentcomments li a, #sidebar_postarchive li a,#sidebar_topdiggedposts li a{
        text-decoration: none;
        color: #369;
        font-size: 16px;
        padding: 4px 8px 4px 8px;
        border-radius: 3px;
        display: block;
    }
    #sidebar_recentposts li a:hover,#sidebar_topviewedposts li a:hover, #sidebar_topcommentedposts li a:hover, #sidebar_recentcomments li a:hover, #sidebar_postarchive li a:hover,#sidebar_topdiggedposts li a:hover{
        background-color: rgb(236, 236, 236);
    }
    
    #sidebar_toptags {
        margin-top: 30px;
        box-shadow: 0 0 6px 0 #ddd;
        padding-bottom: 10px;
    }
    
    
    #sidebar_scorerank {
        margin-top: 30px;
        box-shadow: 0 0 6px 0 #ddd;
    }
    #mainContent, #sidebar_scorerank,#sidebar_search,#sidebar_toptags,#sidebar_recentposts,#sidebar_shortcut,#blog-calendar,.newsItem,#sidebar_topviewedposts, #sidebar_topcommentedposts,#sidebar_postarchive,#sidebar_topdiggedposts, #sidebar_recentcomments{
        background-color:rgb(252, 252, 252);
    }
    
    #sidebar_search_box .input_my_zzk{
        outline: none;
         150px  !important;
        height: 25px;
        border: 1.1px solid #ccc;
        margin: 10px 0 0 10px;
        border-radius: 3px;
    }
    #sidebar_search_box .input_my_zzk:focus{
        border-color: rgb(126, 185, 253);
    }
    #sidebar_search_box .btn_my_zzk{
        outline: none;
        border: none;
        background-color: rgb(59, 142, 236);
        color: #fff;
        letter-spacing: 2px;
        border-radius: 2px;
        height: 28px;
        line-height: 31px;
        position: relative;
        top: 1.3px;
        text-align: center;
         83px;
        font-size: 16px;
        box-shadow: 1px 1px 0.5px 0 #aaa;
        cursor: pointer;
    }
    #sidebar_search_box .btn_my_zzk:active{
        background-color: rgb(30, 125, 233);
    }
    
    
    .catListLink li{
        margin: 10px 0 0 27px;
        display: inline-block;
    }
    .catListLink li a{
        text-decoration: none;
        color: #369;
        font-size: 16.5px;
        padding: 4px 8px 4px 8px;
        border-radius: 3px;
    }
    .catListLink li a:hover{
        background-color: rgb(236, 236, 236);
    }
    .catListTag ul{
        margin: 10px;
        border-radius: 5px;
    }
    .catListTag li{
        margin: 0;
    }
    .catListTag li::before{
        content: "•";
        color: #333;
    
    }
    .catListTag li a{
        text-decoration: none;
        color: #369;
        font-size: 16.5px;
        padding: 4px 8px 4px 8px;
        border-radius: 3px;
        display: inline-block;
    }
    .catListTag  li:hover{
        background-color: rgb(236, 236, 236);
    }
    .catListBlogRank{
        padding-bottom: 6px;
        color: #369;
    }
    .catListBlogRank li{
        margin: 6px 0 0 20px;
    }
    
    
    
    /*【右侧栏】 [end]*/
    
    
    
    
    
    
    /*【主体】 [start]*/
    .dayTitle{
        padding-bottom: 10px;
        border-bottom: 2px solid #ccc;
        margin: 20px 0 20px 0;
        font-weight: bold;
        font-size: 25px;
    }
    .dayTitle a{
        color: #369;
        text-decoration: none;
    
    }
    .postTitle{
        margin-bottom: 6px;
        font-weight: bold;
        font-size: 21px;
    }
    .postTitle::before{
        content: "#";
        font-size: 30px;
        /*font-style: italic;*/
        color: rgb(34, 144, 253);
        position: relative;
        font-weight: bold;
       
    }
    .postTitle a{
        color: rgb(36, 114, 192);
        text-decoration: none;
    }
    .postCon{
        padding: 8px;
        color: #666;
        box-shadow: 0 0 5px 0 #ddd;
        background-color: rgb(242, 242, 242);
        border-radius: 3px;
    }
    
    .postDesc{
        margin-bottom: 50px;
        margin-top: 7px;
        color: #999;
        font-size: 17px;
    }
    .postDesc a,.postCon a{
        font-size: 17px;
        color: rgb(1, 179, 179);
        text-decoration: none;
        margin-left: 3px;
    }
    .postDesc a:hover,.postCon a:hover{
        color: rgb(3, 145, 145);
        text-decoration: underline;
    }
     
    #cnblogs_post_body { 
        	line-height:30px;
    }
        
    
    /*【pager】*/
    #homepage_top_pager{
        display: none;
    }
    /*
    #mainContent > div > div:nth-child(4){
        display:none;
    }
    */
    .pager{
        font-size: 17.5px;
        margin: 3px 0;
        line-height: 100%;
    }
    .topicListFooter{
        position: relative;
        left: 85px;
         650px;
        border-radius:5px;
        padding: 5px 0 5px 10px;
    }
    .topicListFooter a{
        color: #666;
        text-decoration: none;
        background-color: #ddd;
        display: inline-block;
        padding: 6px 8px 6px 8px;
        border-radius: 4px !important;
        border:none !important;
    
    }
    
    /**/
    /*【footer】*/
    #footer{
        position: relative;
        top: 25px;
    }
    /*【底部推荐之类的】*/
    #under_post_news,#under_post_kb, #ad_t2{
    display:none;
    }
    
    /*【归档页面】*/
    .entrylistTitle{
        padding-bottom: 10px;
        border-bottom: 2px solid #ccc;
        margin: 20px 0 20px 0;
        font-weight: bold;
        font-size: 25px;
    }
    .entrylistTitle a{
        color: #369;
        text-decoration: none;
    
    }
    .entrylistPosttitle{
        margin-bottom: 6px;
        font-weight: bold;
        font-size: 20px;
    }
    .entrylistPosttitle::before{
        content: "# ";
        font-size: 30px;
        font-style: italic;
        color: rgb(34, 144, 253);
        position: relative;
        font-weight: bold;
       
    }
    .entrylistPosttitle a{
        color: rgb(36, 114, 192);
        text-decoration: none;
    }
    .entrylistPostSummary{
        padding: 8px;
        color: #666;
        box-shadow: 0 0 5px 0 #ddd;
        background-color: rgb(242, 242, 242);
        border-radius: 3px;
    }
    
    .entrylistItemPostDesc{
        margin-bottom: 30px;
        color: #999;
        font-size: 17px;
    }
    .entrylistItemPostDesc a, .entrylistPostSummary a{
        font-size: 17px;
        color: rgb(1, 179, 179);
        text-decoration: none;
        margin-left: 3px;
    }
    .entrylistItemPostDesc a:hover,.entrylistPostSummary a:hover{
        color: rgb(3, 145, 145);
        text-decoration: underline;
    }
    
    /*【标签页】*/
    .myposts_title{
        font-size: 23px !important;
        margin-top: 10px;
    }
    .postDesc2 {
        float: right;
        font-size: 16px !important;
    }
    .postTitl2{
        font-size: 18px;
    }
    .postTitl2 a {
        text-decoration: none;
        color: #666;
    }
    .postTitl2 a:hover{
        color:#aaa;
    }
    .postTitl2::before {
        content: "# ";
        color: #4C99F8;
        font-size: 24px;
        font-weight: bold;
    }
    .postTitle a {
        color: rgb(36, 114, 192);
        text-decoration: none;
    }
    /*【Tag列表页】*/
    #taglist_title{
        font-size: 23px;
    }
    #MyTag1_dtTagList a{
        text-decoration: none;
        color: #369;
        font-size: 20px;
    }
    #MyTag1_dtTagList a:hover{
        color:#2381df;
    }
    /*【代码字体】*/
    .code {
         font-family: consolas !important;
         font-size: 16px !important;
    }
    /*【评论区】*/
    .feedbackItem {
        padding-bottom: 10px;
        padding-top: 10px;
        border-bottom: 2px solid #ccc;
        margin-bottom: 5px;
    }
    .feedbackItem a, #comment_nav a, #commentbox_opt a, #blog_post_info_block a{
        color: #369;
        text-decoration: none;
        background-color: #F0F0F0;
        display: inline-block;
        padding: 2px 5px 2px 5px !important;
        border-radius: 3px;
        margin-left: 5px;
        margin-top: 3px;
    }
    .feedbackItem a:hover, #comment_nav a:hover, #commentbox_opt a:hover, #blog_post_info_block a:hover{
        background-color: #ddd;
    }
    .feedbackListSubtitle {
        border-bottom: 2px dashed #ddd;
        padding-bottom: 5px;
        margin-bottom: 10px;
        margin-left: 10px;
        margin-right: 10px;
    }
    .layer {
        border-radius: 100px !important;
        padding: 5px;
        color: #fff !important;
        background-color: #369 !important;
    }
    .feedbackManage{
       padding-left: 15px;
        display: inline-block;
        float:right;
    }
    

      

  • 相关阅读:
    【前端开发】vue子项目打包一个组件供另一个项目使用教程
    【前端开发】基于flow-editor-vue库改造的流程设计器,审批流程引擎前端教程
    【前端开发】基于logicFlow可视化流程库改造的流程引擎教程
    知识蒸馏:Distillation
    浮点神经网络vs二值神经网络
    Representation Learning 表征学习
    mybatis plus 追加where 函数
    20211012 MapStruct
    20211012 Dubbo 的 SPI 和 Adaptive
    20210916 小马哥讲 Spring AOP
  • 原文地址:https://www.cnblogs.com/yuanyb/p/9699855.html
Copyright © 2011-2022 走看看