参考了很多大贤的博客，总结尝试后，随笔记录。原帖网址如下：
静默虚空：https://www.cnblogs.com/jingmoxukong/p/7826982.html
Penn000：https://www.cnblogs.com/Penn000/p/6947472.html
温一壶月光：https://www.cnblogs.com/Tangent-1231/p/10393759.html
Trainoo：https://www.cnblogs.com/Trainoo/p/8045340.html
首先，模板要选择darkgreentrip，在此基础上进行修改。
一、页面CSS代码
将以下代码复制粘贴到页面css代码栏中，不同参数代表的页面目标我已经在代码注释里标出来了，自行调节就好，以rgba（255,0,0,0.5）为例，255,0,0表示红色，0.5表示透明度。可使用颜色在线转换器将颜色的16进制转换为rgba格式。
要构想出一个大致的样式，事先想好风格、效果，修改颜色后将代码粘入，最后进行微调。
1 #home { 2 margin: 0 auto;/*元素外边距*/ 3 width: 80%;/*原始65*/ 4 min-width: 980px;/*页面顶部的宽度*/ 5 background-color: rgba(254,254,254, 0.5);/*页面背板颜色，建议如果有背景图片的话，透明度高一些，不会遮挡*/ 6 padding: 30px; 7 margin-top: 50px; 8 margin-bottom: 50px; 9 box-shadow: 0 2px 6px rgba(255,0,0,0.7);/*背板边缘光晕*/ 10 } 11 body { 12 background:rgba(154,252,0,0.05);/*网页背景颜色*/ 13 background-position: 50% 5%; 14 background-size: cover; 15 } 16 #blogTitle { 17 height: 90px; 18 clear: both; 19 background-color: rgba(245, 245, 245, 0);/*名字栏背景颜色，建议为白色，其他颜色有点怪，不好协调*/ 20 } 21 #blogTitle h1 { 22 font-size: 36px; 23 font-weight: bold; 24 line-height: 1.8em;/*原始 1.6em*/ 25 margin-top: 10px;/*原始 15px */ 26 color: #548B54; 27 } 28 #blogTitle h2 { 29 font-weight: normal; 30 font-size: 17px;/*原始 16px ；font-size: 1.0rem;*/ 31 line-height: 1.8; 32 color: #111; 33 font-weight: bold; 34 text-align: right; 35 float: right; 36 } 37 #navigator{ 38 background-color: rgba(255,0,0,0.8);/*主页面大标题框颜色*/ 39 } 40 #navList a:link, #navList a:visited, #navList a:active{ 41 color: #eee; 42 font-size: 18px; 43 font-weight: bold; 44 } 45 .blogStats{ 46 color: #eee; 47 } 48 .postTitle { 49 border-left: 8px solid rgba(255,0,0, 0.8);/*随笔小标题前小方块颜色*/ 50 margin-left: 10px; 51 margin-bottom: 10px; 52 font-size: 20px; 53 float: right; 54 width: 100%; 55 clear: both; 56 } 57 .postTitle a:link, .postTitle a:visited, .postTitle a:active { 58 color: #FF0000;/*随笔小标题颜色*/ 59 transition: all 0.4s linear 0s; 60 } 61 .postTitle a:hover { 62 margin-left: 10px; 63 color: #030303;/*随笔小标题鼠标点击时颜色颜色*/ 64 text-decoration: none; 65 } 66 .postCon { 67 float: right; 68 line-height: 1.5em; 69 width: 100%; 70 clear: both; 71 padding: 10px 0; 72 } 73 74 .day .postTitle a { 75 padding-left: 10px; 76 } 77 .day { 78 background: rgba(255,255,255,0.5);/*纯白*/ 79 } 80 /*文章附加信息*/ 81 .postDesc { 82 background: url(images/posted_time.png) no-repeat 0 1px; 83 color: #030303; 84 float: left; 85 width: 100%; 86 clear: both; 87 text-align: left; 88 font-family: "微软雅黑" , "宋体" , "黑体" ,Arial; 89 font-size: 13px; 90 padding-right: 20px;/*5px padding-left: 90px;posted 发表时间左边距离*/ 91 margin-top: 20px; 92 line-height: 1.8; 93 padding-bottom: 35px; 94 } 95 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, 96 .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, 97 .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory ,#blog-calendar 98 { 99 background: rgba(255, 255, 255, 0.5);/*侧边栏小背板颜色*/ 100 margin-bottom: 35px; 101 word-wrap: break-word; 102 } 103 104 .CalTitle{ 105 background: rgba(255, 255, 255, 0.5);/*日历栏标题栏颜色*/ 106 } 107 .catListTitle{ 108 background-color: rgba(255,0,0,0.8);/*侧边栏标题框颜色*/ 109 } 110 111 #topics{ 112 background: rgba(255, 255, 255, 0.5); 113 } 114 115 .c_ad_block{ 116 display: none; 117 } 118 119 #tbCommentBody{ 120 width: 100%; 121 height: 200px; 122 background: rgba(255, 255, 255, 0.5); 123 } 124 125 #q{background: rgba(255, 255, 255, 0);} 126 127 .CalNextPrev{background: rgba(255, 255, 255, 0);} 128 129 .likecs_code{ 130 background: rgba(255, 255, 255, 0); 131 } 132 133 .likecs_code div{ 134 background: rgba(255, 255, 255, 0); 135 } 136 137 .likecs_code_toolbar{ 138 background: rgba(255, 255, 255, 0); 139 } 140 #main{min-width: 640px;} 141 .entrylist{ 142 background: rgba(255, 255, 255, 0.5); 143 }