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;
}