(原创)个人博客园页面的自定义设计

/* -------------------------body--------------------------------------*/

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

/* ----------------------header------------------------------------*/

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

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

#blogTitle h1 {
font-size: 50px;
font-weight: bold;
line-height: 1.8em;/*原始 1.6em*/
margin-top: 10px;/*原始 15px */
color: #548B54;
}
.Header1_HeaderTitle a:link , .Header1_HeaderTitle a:hover,.Header1_HeaderTitle a:active {
text-decoration:none;
}

#blogTitle h1 a:link{
text-decoration:none;

}
#blogTitle h1 a:hover{
text-shadow: 8px 8px 8px #003d44;
}

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

.postTitle {
font-size: 18px;
font-weight: bold;
padding: 6px 100px 6px 20px;
border-bottom: 1px solid #0693c3;
line-height: 1.5em;
clear: both;
border-left: 9px solid #0693c3;
border-radius: 25px;
}

.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: 3px 3px 3px #86eaefcf;
}

/* -------------------mainContent----------------------------------*/

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

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

.c_b_p_desc_readmore{/*阅读全文*/
text-decoration: none;
padding-left: 10px;
font-size: 16px;}

/* -------------------------sidebars--------------------------------------*/

#sideBarMain {/*侧边栏*/
margin-top: 0px;
margin-left: 2em;
margin-right:2em;
}

.newsItem .catListTitle {/*公告*/
text-align: left;
color:#fff;
padding: 5px 10px;
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%;

}

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

.newsItem {/*公告盒子特效*/
padding: 0 0 5px 0;
background-color:#ffffff;
border-radius:25px;
box-shadow: 5px 5px 5px #222; 

}


.catListEssay{/*随笔盒子特效*/
background-color:#ffffff;
border-radius:25px;
margin-bottom:20px;
box-shadow: 5px 5px 5px #222;
}

#sidebar_postcategory{/*盒子特效*/
background-color:#ffffff;
border-radius:25px;
margin-bottom:20px;
box-shadow: 5px 5px 5px #222;
}
#sidebar_postarchive{/*盒子特效*/
background-color:#ffffff;
border-radius:25px;
margin-bottom:20px;
box-shadow: 5px 5px 5px #222;
}
#sidebar_links1477400{/*盒子特效*/
background-color:#ffffff;
border-radius:25px;
margin-bottom:20px;
box-shadow: 5px 5px 5px #222;
}
#sidebar_topviewedposts{/*盒子特效*/
background-color:#ffffff;
border-radius:25px;
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: #77d5da;
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;
}

#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:25px 25px 0px 0px; 
}

/* -------------------------other--------------------------------------*/

a:hover {/*悬停样式*/

color: #ff7d1d;
text-decoration: none;
font-size: 16px;
}

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

以上是本博客个人自定义css代码,可根据个人进行调整!

猜你喜欢

转载自www.cnblogs.com/lucky1024/p/10993505.html