博客自定义美化css代码(19.02.22)

其实折腾的过程还是比较简单的,首先看博客哪里想改样式,然后开审查元素找一下class名是什么,然后去网上找图,弄到网络图源的链接,最后对着刚才找到的class名开始写css代码,然后用hexo clean && hexo g --d部署到coding.net和github就可以啦。

这是截止到最后一次更新我的博客的自定义css代码。代码全都是自己写的。

使用方法:找到..blog\themes\next\source\css\_custom\custom.styl,根据需要将css代码粘贴进即可。

吐槽:后缀名不是css而是styl,这个格式Hbuilder并不识别……css的代码补全和语法高亮都没有,哭唧唧……

查看代码请点击下面的“阅读全文”按钮。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
// Custom styles.
// Updated at 2019.02.22 by ShawnZhou
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgb(255, 255, 255);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);

}

.site-meta {
background: url(https://s2.ax1x.com/2019/02/16/kseaVI.jpg);
background-size: 100% auto;
}


.post-block {
background: rgba(247, 255, 254, 0.7);
}

.comments {
background: rgba(247, 255, 254, 0.7);
}

.footer {
color: #00f145;
}

.posts-expand .post-meta {
color: #4079ee;
}

.site-subtitle {
color: #fff;
}

body {
@media (max-width: 1080px) {
background-image: url(https://s2.ax1x.com/2019/02/16/ksekCT.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% 100%;
}
@media (min-width: 1080px) {
background-image: url(https://s2.ax1x.com/2019/02/16/kseVv4.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100% 100%;
}

}

.header-inner {
background: url(https://s2.ax1x.com/2019/02/16/kseeKJ.jpg);
background-size: 100% 100%;
}

.sidebar-inner {
background: #d0ed5a;
background: url(https://s2.ax1x.com/2019/02/16/kseeKJ.jpg);
background-size: 100% 100%;
}

.menu-item-active a {
background: #d0ed5a;
border-bottom-color: #d0ed5a;
}

.site-description {
color: #000;
}

.site-state-item-name {
color: #0058ff;
}

.pagination {
background: #d0ed5a;
}

.pagination .page-number.current {
background: #00beff;
border-top-color: #00beff;
}


-------------本文结束,感谢您的阅读转载请注明原作者及出处-------------


本文标题:博客自定义美化css代码(19.02.22)

文章作者:Shawn Zhou

发布时间:2019年02月14日 - 16:02

最后更新:2019年02月22日 - 13:02

原始链接:http://shawnzhou.xyz/2019/02/14/19-02-14-01/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

知识无价,码字不易。对您有用,敬请打赏。金额随意,感谢关心。
0%