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

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

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

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

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

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

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

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

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

移动端：
零基础自制博客园 “赛博朋克” 主题 10分钟详解 - 精简归纳-LMLPHP

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

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

博客园修改 CSS 样式详细步骤：
<1>. 进入自己的博客主页点击管理
零基础自制博客园 “赛博朋克” 主题 10分钟详解 - 精简归纳-LMLPHP
<2>. 点击设置

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

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

2.运用举例

SimpleMemory 默认如下：
零基础自制博客园 “赛博朋克” 主题 10分钟详解 - 精简归纳-LMLPHP
在浏览器中按 F12 键（某些键盘为：Fn + F12）
便可打开博客页面的 HTML CSS 代码

(1)、修改字体颜色

假如我要把标题改为粉红色
<1>. 点击左上角检查元素按钮
零基础自制博客园 “赛博朋克” 主题 10分钟详解 - 精简归纳-LMLPHP
<2>. 鼠标点击标题文字

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

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

此时页面上的标题颜色已经变成粉红色了，但此时还没有结束，这里只是预览效果，还没有真正改变
<5>. 复制控制颜色的那一段 CSS 代码段
零基础自制博客园 “赛博朋克” 主题 10分钟详解 - 精简归纳-LMLPHP
<6>. 粘贴 CSS 样式

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

(2)、修改字体大小

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

零基础自制博客园 “赛博朋克” 主题 10分钟详解 - 精简归纳-LMLPHP
选择一个合适的大小，然后复制粘贴到 CSS 设置框中去
完成后的效果：

(3)、修改字体位置

假如我要把标题居中
基本步骤与更改颜色一样，不同的是这里不是修改颜色而是更改或重设字体在样式框中的位置
这次不是点击标题文字，而是点击标题文字所在样式框
零基础自制博客园 “赛博朋克” 主题 10分钟详解 - 精简归纳-LMLPHP
左下角同样出现了标题框样式的 CSS 代码段
添加 text-align:
这里选择居中

零基础自制博客园 “赛博朋克” 主题 10分钟详解 - 精简归纳-LMLPHP
同样把代码段复制粘贴到 CSS 修改框中

保存后，最终效果：

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

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

(1)、切换 MTTrendy 主题

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

(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;
}