博客园主题美化,修改主题

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

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

原来的模板是 SimpleMemory

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

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

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

---

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

---

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

半夜又改了

---

2018/12/19

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

---

2019/8/21

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

---

2020/09/26 评论区

---

2021/06/02 换成系统的 Simple Blue 了。。。

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-width: 700px !important;
}
body{
    width: 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;
    width: 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{
    width: 30px;
    height: 25px;
}
#blog-calendar .CalTitle{
        margin-bottom: 10px;
}
#blog-calendar .CalTitle td:nth-child(2){
    width: 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{
    width: 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;
    width: 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;
    width: 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;
    width: 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;
}

  

posted @ 2018-09-25 15:43  yuanyb  阅读(2150)  评论(6编辑  收藏  举报