博客样式设计-01
Posted 非零二进制
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了博客样式设计-01相关的知识，希望对你有一定的参考价值。
参考了众多博客网站，对于专业属性较强、且符合程序员风格的，以博客园和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(122, 196, 194, 0.5); /* 标题栏下的颜色 */
#navList a:link, #navList a:visited, #navList a:active
color: #FFFFFF;
font-size: 18px;
font-weight: bold;
#navList a:hover
background-color: #508b97;
.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);
#qbackground: rgba(255, 255, 255, 0);
.CalNextPrevbackground: 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);
#mainmin-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; /*结束位置*/
侧边栏公告
主页的头像展示
进入个人主页（有显示头像的页面），查看网页源代码，找到【
】模块，复制其中的整个【![]()
】标签，将代码插入侧边栏公告区域。也可根据需要对要显示的头像进行样式调整，如本文中并未使用复制的【src】参数。
<div class="image-light">
<img src="https://gitee.com/gelingyu/figurebed/raw/master/2022/Snipaste_2022-02-05_15-48-03.png" />
</div>
页首HTML代码（一）
主体背景与鼠标悬浮的动态特效
<!-- 动态特效 -->
<canvas id="c_n9" ></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 aoutline: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" ><a href="#top"><span></span></a></p>
参考博文
<- 完 ->
本文来自博客园，作者：非零二进制，转载请注明原文链接：https://www.cnblogs.com/gelingyu/p/15864790.html
以上是关于博客样式设计-01的主要内容，如果未能解决你的问题，请参考以下文章