零基础自制博客园 “赛博朋克” 主题 10分钟详解 – 精简归纳

2020 年 8 月 28 日
筆記
JERRY'S 教程大本营

零基础自制博客园 “赛博朋克” 主题 10分钟详解 – 精简归纳

JERRY_Z. ~ 2020 / 8 / 28
转载请注明出处！

零基础自制博客园 “赛博朋克” 主题 10分钟详解 – 精简归纳

1.简单说明（零基础、超详细）

(1)、为什么要写这篇博客？

作为一名计算机专业的学生，拥有自己的博客并持续维护更新对于学习掌握知识点及技能是非常重要的！！！

写这篇文章的时候我也才刚接触博客不久，目前主要用的是：CSDN、博客园，但是作为一个曾经差一点报了设计学专业的我来说，一个简约漂亮的博客对我来说太太太重要了！！！

可问题来了，我不懂 HTML CSS JavaScript 啊，仅仅是了解一点最最最基本的标签使用而已，这对我想自定义博客主题页面的想法来说太难了，所以我就摸索有没有什么简单的方法，结果还真搞懂了……

先给大家看一下我现在的博客主页界面 (“赛博朋克” 风格）：

PC端：

移动端：

所以，我想应该还有许多小白像我一样渴望定制自己的博客园主题却不知道怎么办，而这就是我写这篇博客的主要目的，感兴趣的小朋友就继续往下看吧！！！

写博客很费精力，转载的话，请注明一下出处！

(2)、博客园如何零基础定制自己的主题？

由于零基础不懂任何前端的网页开发技术，所以这里只是在博客园所提供的主题基础上修改 CSS 样式，从而制定自己的风格，当然，不要看只是修改样式，只要你厉害是可以弄出非常漂亮的效果哦！！！

博客园修改 CSS 样式详细步骤：
<1>. 进入自己的博客主页点击管理

<2>. 点击设置

<3>. 当前页面下滑找到博客皮肤及定制 CSS

<4>. 选择一个博客皮肤模板，并写入要替换的 CSS 样式
<5>. 保存设置

2.运用举例

下文以 SimpleMemory 模板为例

SimpleMemory 默认如下：

在浏览器中按 F12 键（某些键盘为：Fn + F12）
便可打开博客页面的 HTML CSS 代码

(1)、修改字体颜色

假如我要把标题改为粉红色
<1>. 点击左上角检查元素按钮

<2>. 鼠标点击标题文字

<3>. 此时右下角自动定位到标题文字的 CSS 样式

<4>. 找到控制标题文字的 CSS 代码段点击颜色并更改颜色

如果不知道具体是哪一个，可以一个一个试一下

此时页面上的标题颜色已经变成粉红色了，但此时还没有结束，这里只是预览效果，还没有真正改变
<5>. 复制控制颜色的那一段 CSS 代码段

<6>. 粘贴 CSS 样式

此时博客页面的颜色便定制为粉红色了！！！

(2)、修改字体大小

假如我要把标题放大
基本步骤与更改颜色一样，不同的是这里不是修改颜色而是更改或重设字体大小
再次找到刚才标题的 CSS 代码块
添加 font-size:

假如本来就有 font-size: 那么只需要修改值即可

选择一个合适的大小，然后复制粘贴到 CSS 设置框中去
完成后的效果：

(3)、修改字体位置

假如我要把标题居中
基本步骤与更改颜色一样，不同的是这里不是修改颜色而是更改或重设字体在样式框中的位置
这次不是点击标题文字，而是点击标题文字所在样式框

左下角同样出现了标题框样式的 CSS 代码段
添加 text-align:
这里选择居中

当然，如果原本就有 text-align: 就只有修改值便可以了

同样把代码段复制粘贴到 CSS 修改框中

保存后，最终效果：

其他还有许多可定制的地方，但基本原理相同……

3.“赛博朋克” 定制步骤

(1)、切换 MTTrendy 主题

(2)、复制粘贴 CSS 样式

转载请注明出处！！！不可用作商业用途！！！

/*
 * @Author: JEYYR_Z.  MTTrendy
 * @Date: 2020-08-27 23:21:16
 * @LastEditTime: 2020-08-28 12:28:54
 * @LastEditors: Please set LastEditors
 * @Description: 转载请注明出处！！！不可用作商业用途！！！
 * @FilePath: \undefinede:\MyCode\MyBlog\DIY CSS.css
 */
#main {
    background-color: #000;
}
#top {
    background: #000;
}
body {
    background: #000;
}
#rightmenu li {
    text-align: center;
}
#top a, #top a:link, #top a:visited, #top a:active, #top a:hover {
    font-size: 66px;
    color: #ff9696;
}
h1 {
    background: #000;
    text-align: center;
}
#tagline {
    text-align: center;
    color: #666;
}
div.post {
    background: #000;
    border-left: 12px solid #666;
    border-right: 12px solid #666;
    border-top: 12px solid #666;
    border-bottom: 12px solid #666;
}
p.postfoot {
    color: #00ffff;
}
a:link {
    font-weight: normal;
    text-decoration: none;
    color: #ff6699;
    font-size: larger
}
a:visited {
    font-weight: normal;
    text-decoration: none;
    color: #ff6699;
    font-size: larger;
}
#profile_block {
    text-align: center;
}
.div_my_zzk {
    text-align: center;
}
#rightmenu ul {
    color: #ffffa6;
    font-size: larger;
}
#footer {
    text-align: center;
}
#rightmenu h3 {
    background: #000;
    text-align: center;
    font-size: xx-large;
    color: #f8f8f8;
}
div.post h2 a {
    color: #ccc;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
}
div.post h2 a:link {
    color: #f8f8f8;
}
div.post h2 a:visited {
    color: #f8f8f8;
}
a:hover {
    color:#f8f8f8
}
p.date {
    color: #a9a9a9;
    font-size: large;
    text-align: center;
}

(3)、最终效果

PC:

移动：

4.附

交流方式：

QQ： 1846334075

WeChat： zhoujirui54

CSDN：//blog.csdn.net/D_si_God

Cnblogs：//www.cnblogs.com/JERRY-Z-J-R/

GitHub：//github.com/JERRY-Z-J-R

Gitee：//gitee.com/JERRY-Z-J-R

Tags: JERRY'S 教程大本营