参考了众多博客网站，对于专业属性较强、且符合程序员风格的，以博客园和CSDN较为突出，博客园清净的环境和高度自定义的样式，最终成为首选，此文对博客园的设计过程进行记录。
成品展示
先行设置
- 博客园皮肤设置为【darkgreentrip】
- 开通JS权限
页面定制CSS代码（一）
页面总体布局与样式设计
#home {
margin: 0 auto;
width: 80%;/*原始65*/
min-width: 980px;/*页面顶部的宽度*/
background-color: rgba(245, 245, 245, 0.5);
padding: 30px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body {
background: rgb(6 51 4 / 28%) url('http://p0.qhimg.com/bdr/__85/t0136b65d6e9666bbef.jpg') fixed no-repeat; //修改背景图片
background-position: 50% 5%;
background-size: cover;
}
#blogTitle {
height: 110px; /*高度*/
clear: both;
background-color: rgba(240,255,255,0.5); //博客标题的背景
}
#blogTitle h1 {
font-size: 36px;
font-weight: bold;
line-height: 1.8em;/*原始 1.6em*/
margin-top: 10px;/*原始 15px */
color: #FF1493;
}
#blogTitle h2 {
font-family: "华文行楷";
font-weight: normal;
font-size: 20px;/*原始 16px ；font-size: 1.0rem;*/
line-height: 1.8;
/* color: #FF1493; */
/* font-weight: bold; */
color: black;
text-align: right;
float: right;
padding-right: 25px;
padding-bottom: 10px;
margin-bottom: 2px;
}
#navigator{
background-color:rgba(135,206,205, 0.5); //标题栏下的颜色
}
#navList a:link, #navList a:visited, #navList a:active{
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
}
.blogStats{
color: #eee;
padding-right: 30px;
}
.postTitle {
border-left: 8px solid rgba(33, 160, 139, 0.68);
margin-left: 10px;
margin-bottom: 10px;
font-size: 20px;
float: right;
width: 100%;
clear: both;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
color: #21759b;
transition: all 0.4s linear 0s;
}
.postTitle a:hover {
margin-left: 30px;
color: #0f3647;
text-decoration: none;
}
.postCon {
float: right;
line-height: 1.5em;
width: 100%;
clear: both;
padding: 10px 0;
}
.day .postTitle a {
padding-left: 10px;
}
.day {
background: rgba(255, 255, 255, 0.5);
}
/*文章附加信息*/
.postDesc {
background: url(images/posted_time.png) no-repeat 0 1px;
color: #757575;
float: left;
width: 100%;
clear: both;
text-align: left;
font-family: "微软雅黑" , "宋体" , "黑体" ,Arial;
font-size: 13px;
padding-right: 20px;/*5px padding-left: 90px;posted 发表时间左边距离*/
margin-top: 20px;
line-height: 1.8;
padding-bottom: 35px;
}
.newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory,
.catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView,
.catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar
{
background: rgba(255, 255, 255, 0.5);
margin-bottom: 35px;
word-wrap: break-word;
}
.CalTitle{
background: rgba(255, 255, 255, 0);
}
.catListTitle{
/* background-color: rgba(255,110,180,0.6); //栏目的条纹颜色 */
background-color: rgba(68, 128, 127, 0.5);
}
#topics{
background: rgba(255, 255, 255, 0.5);
}
.c_ad_block{
display: none;
}
#tbCommentBody{
width: 100%;
height: 200px;
background: rgba(255, 255, 255, 0.5);
}
#q{background: rgba(255, 255, 255, 0);}
.CalNextPrev{background: rgba(255, 255, 255, 0);}
.cnblogs_code{
background: rgba(255, 255, 255, 0);
}
.cnblogs_code div{
background: rgba(255, 255, 255, 0);
}
.cnblogs_code_toolbar{
background: rgba(255, 255, 255, 0);
}
#main{min-width: 640px;}
.entrylist{
background: rgba(255, 255, 255, 0.5);
}
.pager {
display: inline-block;
font-size: 16px;
font-weight: 700;
color: #fff;
background-color: #ddbee099;
border-radius: 6px;
}
页面定制CSS代码（二）
主页头像的流光特效
/*父容器*/
.image-light{
overflow: hidden;
position: relative; /*设置为相对*/
}
/*图片*/
img{
border: none;
}
/*流光（采用伪类实现，当然也可以是子元素）*/
.image-light:after{
content: '';
position: absolute; /*相对父级绝对定位*/
width: 80px;
height: 100%;
top: 0;
left: -200px; /*起始位置*/
overflow: hidden;
z-index:9;
/*背景渐变（兼容性写法）*/
background: -moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.3)),color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3)50%,rgba(255,255,255,0) 100%);
background: linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 50%,rgba(255,255,255,0) 100%);
-webkit-transform: skewX(-25deg);/*倾斜*/
-moz-transform: skewX(-25deg);
transform: skewX(-25deg);
}
/*鼠标滑过*/
.image-light:hover:after{
-webkit-transition: left 1s ease-in-out; /*过渡*/
transition: left 1s ease-in-out;
left: 500px; /*结束位置*/
}
侧边栏公告
主页的头像展示
进入个人主页（有显示头像的页面），查看网页源代码，找到【
】模块，复制其中的整个【<div class="image-light">
<img src="https://gitee.com/gelingyu/figurebed/raw/master/2022/Snipaste_2022-02-05_15-48-03.png" alt="用户头像" />
</div>
页首HTML代码（一）
主体背景与鼠标悬浮的动态特效
<!-- 动态特效 -->
<canvas id="c_n9" width="1920" height="990" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
<script src="https://files.cnblogs.com/files/siwuxie095/canvas-nest.min.js"></script>
页首HTML代码（二）
返回顶部功能的小火箭
<!-- 小火箭 -->
<link href="https://files.cnblogs.com/files/lingr7/cnblog-scroller.css" type="text/css" rel="stylesheet">
<script src="https://files.cnblogs.com/files/lingr7/scrollspy.js" type="text/javascript"></script>
<script src="https://files.cnblogs.com/files/lingr7/stickUp.min.js" type="text/javascript"></script>
<script src="https://files.cnblogs.com/files/lingr7/cnblog-scroller.js" type="text/javascript"></script>
<style>
#back-top {
position: fixed;
bottom: 10px;
right: 30px;
z-index: 99;
}
#back-top span {
width: 50px;
height: 64px;
display: block;
background:url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
}
#back-top a{outline:none}
</style>
<script type="text/javascript">
$(function() {
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function() {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
</script>
<p id="back-top" style="display:none"><a href="#top"><span></span></a></p>
参考博文
<- 完 ->