個人のブログページデザインのCSS

#blogTitle h1 {
    font-size: 150%;
    font-weight: bold;
    line-height: 1.5em;
    margin-left: 1em;
    margin-top: 10px;
    width: 50%;
    float: left;
    display: none;
    
    letter-spacing: 1px;
}

#myBtn {
display: none;
position: fixed;
bottom: 50px;
right: 30px;
z-index: 99;
border: none;
outline: none;
background:url("https://www.cnblogs.com/images/cnblogs_com/lucky1024/1475118/o_btp.png");
background-size:100% 100%;
background-repeat:no_repeat;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 50%;
width:60px;
height:60px;
}

#sidebar_search h3{
display:none;

}
.mySearch .input_my_zzk {
height: 1.4em;
width: 140px;
border-radius: 8px;
float: left;
padding-right:5px;
background-color:#cccccc59;
border:1px solid #ccc;
}

input[type=button] {
-webkit-appearance: button;
border-radius: 10px;
background-color: rgba(0,0,0,.3);
color: #9ebbff;
/* font-style: normal; */
font-weight: bold;
border-width: 1px;
}

#blog-news {
margin-left: 8px;
}
.c_b_p_desc_readmore{
text-decoration: none;
padding-left: 10px;
font-size: 16px;

}

#cnblogs_post_body {
word-break: break-word;
font-size: 16px;
margin-left: 10px;
margin-right: 10px;
margin-top: 20px;
}



body {
color: #000;
background: linear-gradient(#2c2331, #2d2d71,#2c2331);
background-size:cover;

font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
min-height: 100%;
}

#home {
margin: 0 auto;
width: 1300px;
}

#mainContent {
min-height: 200px;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
float: left;
width: 1000px;
background: #fff;
margin-left:2em;
margin-bottom:2em;
padding-top:10px;
border-radius:15px;
}


#navigator {
background-color:#cccccc59;
height: 60px;
clear: both;
margin-top: 20px;
padding-bottom:20px;
position: relative;
border-radius: 25px 25px 0px 0px;

}

#navList a {
margin: 18px 10px 0 0;
padding: 0 30px;
padding-left:10px;
font-size: 24px; 
display: block;
font-weight:bold;
margin-top: 25px;
}
#navList a:link {
color: #fff;
text-shadow: 3px 3px 3px #000;
text-decoration:none;

}
#navList a:hover{
color:#fff; 
text-shadow: 6px 6px 6px #286075;
}

#profile_block {
margin-top: 0px;
line-height: 1.5;
text-align: left;
font-size: 14px;
margin-bottom: 8px;
}


.newsItem .catListTitle {
text-align: left;
color:#fff;
padding: 5px 10px;
border: 0px solid #ccc; 
background: #cccccc59;


}


.newsItem {
padding: 0 0 5px 0;
background-color:#cccccc59;
border-radius:15px;
box-shadow: 5px 5px 5px #222; 

}


.catListEssay{
background-color:#cccccc59;
border-radius:15px;
margin-bottom:20px;
box-shadow: 5px 5px 5px #222;
}


#sidebar_postcategory{
background-color:#cccccc59;
border-radius:15px;
margin-bottom:20px;
box-shadow: 5px 5px 5px #222;
}
#sidebar_postarchive{
background-color:#cccccc59;
border-radius:15px;
margin-bottom:20px;
box-shadow: 5px 5px 5px #222;
}
#sidebar_links1477400{
background-color:#cccccc59;
border-radius:15px;
margin-bottom:20px;
box-shadow: 5px 5px 5px #222;
}
#sidebar_topviewedposts{
background-color:#cccccc59;
border-radius:15px;
margin-bottom:20px;
box-shadow: 5px 5px 5px #222;

}

 

.catListEssay h3, .catListLink h3, .catListNoteBook h3, .catListTag h3, .catListPostCategory h3, .catListPostArchive h3, .catListArticleArchive h3, .catListImageCategory h3, .mySearch h3, .catListComment h3, .catListView h3, .catListFeedback h3, #blog-sidecolumn .catListTitle {
text-align: left;
color:#fff;
padding: 5px 10px;
background: #cccccc59;
border-bottom: none;
border: 0px solid #ccc;
/*background:url("https://www.cnblogs.com/images/cnblogs_com/lucky1024/1475118/o_eww.jpg");*/
/*background-repeat:no-repeat;*/
/*background-size:300% 500%;*/

}

.catListEssay ul, .catListLink ul, .catListNoteBook ul, .catListTag ul, .catListPostCategory ul, .catListPostArchive ul, .catListArticleArchive ul, .catListImageCategory ul, .mySearch ul, .catListComment ul, .catListView ul, .catListFeedback ul {
padding-left: 2em;
padding-bottom: 1em;
font-size: 14px;
padding-right: 2em;

}

 


#blog-sidecolumn .catList ul, #blog-sidecolumn .catListBlogRank ul, #blog-sidecolumn .catListArticleCategory ul {
margin-left: 15px;
padding-bottom: 1em;
padding-left: 1em;
font-size: 14px;

}

.catListTitle {
font-weight: bold;
line-height: 1.5em;
font-size: 150%;
margin-top: 0px;
margin-bottom: 20px;
border-bottom: 1px solid #000;
text-align: center;
border-radius:15px 15px 0px 0px; 

}


/**/

#sideBarMain {
margin-top: 0px;
margin-left: 2em;
margin-right:2em;
}

#blogTitle {
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: 100% 50%;
font-size: 30px;
height: 160px;
clear: both;
background-color:#cccccc59;
border-radius: 25px;
/*background:url("https://www.cnblogs.com/images/cnblogs_com/lucky1024/1475118/o_eww.jpg");
background-repeat:no-repeat;
background-size:100% 150%;
background-origin:content-box;*/
 /* background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -o-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -ms-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);*/
}


.Header1_HeaderTitle a:link , .Header1_HeaderTitle a:hover,.Header1_HeaderTitle a:active {
text-decoration:none;
}

#blogTitle h2 {
font-weight: normal;
font-size: 20px; 
line-height: 1.8;
color: #FFFFFF;
font-weight: bold;
text-align: right;
float: right; 
margin-top:0px;
margin-right:20px; 
display:none;
}

.postTitle {
font-size: 18px;
font-weight: bold;
padding: 6px 100px 6px 20px;
border-bottom: 2px solid #03d0f1;
border-left: 5px solid #03d0f1;
line-height: 1.5em;
clear: both;
}

.postCon {
float: right;
line-height: 1.5em;
width: 95%;
clear: both;
padding: 10px 0;
font-size: 14px;
}

.postTitle a:link, .postTitle a:visited, .postTitle a:active {
color:#0693c3;
}

.postTitle a:hover{
text-shadow: 4px 3px 4px #000;
font-size:18px;
}

/*隐藏建档日期*/
.dayTitle {
/*display:none; */
}

#main {
min-width: 980px;
text-align: left;
clear: both;
background: #cccccc59;
border-radius: 0px 0px 25px 25px;
}

#mainContent .forFlow {
float: none;
width: auto;
margin-top: 20px;
margin-left: 20px;
margin-right: 30px;
margin-bottom: 30px;
}

  

ます。https://www.cnblogs.com/lucky1024/p/11016661.htmlで再現

おすすめ

転載: blog.csdn.net/weixin_34138377/article/details/93435535