关于如何装饰自己的博客

最新推荐文章于 2020-03-10 14:35:36 发布

weixin_30478619

最新推荐文章于 2020-03-10 14:35:36 发布

阅读量411

点赞数 1

文章标签：移动开发 javascript ViewUI

原文链接：http://www.cnblogs.com/fanhua666/articles/11090852.html

版权

刚刚申请好自己的博客打开发现好丑的界面，和别人的简直不能比，所以赶快科普一下设置一下自己的界面：

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>

```

html页脚代码

```

}
</script>
/*https://blog-static.cnblogs.com/files/xiaokang01/js.js 这是添加的文件的链接
color="240,230,140" 粒子的颜色设置
opacity="1" 粒子的透明度
count="75" 粒子的个数*/

```

转载于:https://www.cnblogs.com/fanhua666/articles/11090852.html

weixin_30478619

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于如何装饰自己的博客

刚刚申请好自己的博客打开发现好丑的界面，和别人的简直不能比，所以赶快科普一下设置一下自己的界面：1. 使用官方提供的模板，点击我的博客→管理→模板，即可选择自己喜欢的模板。2. 加上自己的风格，这个我是在网上搜索的相关的代码。使用的代码：官方模板：darkgreentrip### 定制css代码```#home { margin: 0 auto; ...
复制链接

扫一扫