关于如何装饰自己的博客
刚刚申请好自己的博客打开发现好丑的界面，和别人的简直不能比，所以赶快科普一下设置一下自己的界面：
1. 使用官方提供的模板，点击我的博客→管理→模板，即可选择自己喜欢的模板。
2. 加上自己的风格，这个我是在网上搜索的相关的代码。
使用的代码：
官方模板：darkgreentrip
### 定制css代码
```
#home {
margin: 0 auto;
width: 100%;/*原始65*/
min-width: 10px;/*页面顶部的宽度*/
background-color: rgba(84, 81, 103, 0.33);
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
box-shadow: 0 2px 6px rgba(255, 255, 0, 0.3);
}
body {
background: rgba(12, 100, 129, 1) url('https://www.cnblogs.com/images/cnblogs_com/fanhua666/1490467/o_004.jpg') fixed no-repeat; //修改背景图片
background-position: 50% 5%;
background-size: cover;
}
#blogTitle {
height: 80px; /*高度*/
clear: both;
background-color: rgba(168,177,186,0.7); //博客标题的背景
}
#blogTitle h1 {
font-size: 40px;
font-weight: bold;
line-height: 1.8em;/*原始 1.6em*/
margin-top: 10px;/*原始 15px */
color: #FF1493;
}
#blogTitle h2 {
font-weight: normal;
font-size: 20px;/*原始 16px ；font-size: 1.0rem;*/
line-height: 1.8;
color:rgba(219, 0, 179, 0.73);
font-weight: bold;
text-align: right;
float: right;
}
#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;
}
.postTitle {
border-left: 8px solid rgba(132,112,255, 0);
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: rgba(4, 0, 245, 0.69);
transition: all 0.4s linear 0s;
}
.postTitle a:hover {
margin-left: 30px;
color: #EE6363;
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(0, 102, 204, 1);//栏目的条纹颜色
}
#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);
}
### html和js代码
```
<!--富强民主点击特效-->
<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
var b_idx = 0;
/* 文字和颜色数组 */
var a = new Array("富强", "民主", "文明", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
var b = new Array("#FF0000","#FF7F00"," #FFFF00","#00FF00","#00FFFF","#0000FF","#8B00FF","#FF0000","#FF7F00"," #FFFF00","#00FF00","#00FFFF","#0000FF","#8B00FF");
jQuery(document).ready(function($) {
$("body").click(function(e) {
var $i = $("<span/>").text(a[a_idx]);
a_idx=parseInt(12*Math.random()); //文字随机数
b_idx=parseInt(14*Math.random()); //颜色随机数
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999,
"font-size":"1.3em", //字体大小
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": b[b_idx]
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
<!--富强民主点击特效-->
<object type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2F&up_tailColor=E6DEBE&" width="200" height="160">
<param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?up_bodyColor=f0e9cc&up_feetColor=D4C898&up_eyeColor=000567&up_wheelSpokeColor=DEDEDE&up_wheelColor=FFFFFF&up_waterColor=E0EFFF&up_earColor=b0c4de&up_wheelOuterColor=FF4D4D&up_snoutColor=F7F4E9&up_bgColor=F0E4E4&up_foodColor=cba920&up_wheelCenterColor=E4EB2E&up_tailColor=E6DEBE&">
<param name="AllowScriptAccess" value="always">
<param name="wmode" value="opaque"></object>
<span style="color: #3E8BD6;font-size: 9pt;">求投食~（点图即可）</span>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
<script src="https://blog-static.cnblogs.com/files/yjlaugus/APlayer.min.js"></script>
<div id="aplayer" class="aplayer" data-id="474034547" data-server="netease" data-type="playlist" data-fixed="true" data-listfolded="true" data-order="random" data-theme="#F58EA8"></div>
<script src="https://unpkg.com/meting@1.2/dist/Meting.min.js"></script>
```
html页脚代码
```
<script id="c_n_script" src="https://blog-static.cnblogs.com/files/xiaokang01/js.js" color="247,22,11" opacity="1" count="175" zindex="-2">
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
} else {
}
</script>
/*https://blog-static.cnblogs.com/files/xiaokang01/js.js 这是添加的文件的链接
color="240,230,140" 粒子的颜色设置
opacity="1" 粒子的透明度
count="75" 粒子的个数*/
```
