首页 > 技术文章 > 分享自己的博客定制背景CSS代码

Asp1rant 2020-10-23 19:33 原文

因个人偏好红黑配色,为博客写了一个红黑配色的CSS代码,分享给大家。

 

首先html添加了Google Fonts中两个比较喜欢的字体(页眉Html代码)

1 <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
2 <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">

 

CSS代码

注:没有禁用模板样式,继承模板BlackLowKey

 1 /* 更改博客时间样式 */
 2 div.dayTitle{
 3     font-family: 'Montserrat', SimSun;
 4     font-weight: normal;
 5     color: #0e6161;
 6     border: dotted #f17171 2px;
 7     font-size: 16px;
 8 }
 9 
10 #blog-calender{
11  font-family: 'Montserrat';
12 }
13 
14 /*阅读,收藏,评论数量*/
15 .post-view-count{
16   color:blue
17 }
18 
19 .post-comment-count{
20   color:green;
21 }
22 
23 .post-digg-count{
24   color:red;
25 }
26 
27 /* 为博客添加红黑渐变背景 */
28 body { 
29     background-color: #efefef;
30     background-image: radial-gradient(ellipse farthest-corner at 20% 50%, #990000, black 70%, red);
31     background-repeat: no-repeat; 
32     background-attachment: fixed; 
33     background-position: center 0; 
34     background-size: cover; 
35  }
36 
37  /* 更改博客的标题框以及标题字体颜色 */
38 .postTitle,
39 .postTitle a:link, 
40 .postTitle a:active {
41     border-left-color: #990000;
42     color: #990000;
43  }
44 
45 .postTitle a:active{
46     text-decoration: underline;
47  }
48 
49 .postTitle a:visited{
50     color:orangered;
51  }
52 
53  #cb_post_title_url{
54     color: #990000;
55  }
56 
57 .postTitle2.vertical-middle{
58     color: #990000;
59 }
60 
61 /* 不显示广告 */
62 .c_ad_block{
63     display: none;
64 }
65 
66 #ad_t2{
67     display:none;
68 }

 

推荐阅读