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

时间  2020-08-29 标签 零基础 自制 博客 园 赛 博 朋克 主题 10分 钟 详解 精简 概括

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

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

目录

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

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

做为一名计算机专业的学生，拥有本身的博客并持续维护更新对于学习掌握知识点及技能是很是重要的！！！前端

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

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

先给你们看一下我如今的博客主页界面 (“赛博朋克” 风格）：浏览器

PC端：
PCpost

移动端：
移动学习

因此，我想应该还有许多小白像我同样渴望定制本身的博客园主题殊不知道怎么办，而这就是我写这篇博客的主要目的，感兴趣的小朋友就继续往下看吧！！！字体

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

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

因为零基础不懂任何前端的网页开发技术，因此这里只是在博客园所提供的主题基础上修改 CSS 样式，从而制定本身的风格，固然，不要看只是修改样式，只要你厉害是能够弄出很是漂亮的效果哦！！！.net

博客园修改 CSS 样式详细步骤：
<1>. 进入本身的博客主页点击管理
管理
<2>. 点击设置
设置
<3>. 当前页面下滑找到博客皮肤及定制 CSS
皮肤 CSS
<4>. 选择一个博客皮肤模板，并写入要替换的 CSS 样式
<5>. 保存设置

2.运用举例

下文以 SimpleMemory 模板为例

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

(1)、修改字体颜色

假如我要把标题改成粉红色
<1>. 点击左上角检查元素按钮
检查元素
<2>. 鼠标点击标题文字
标题文字
<3>. 此时右下角自动定位到标题文字的 CSS 样式
标题CSS样式
<4>. 找到控制标题文字的 CSS 代码段点击颜色并更改颜色

若是不知道具体是哪个，能够一个一个试一下
更改颜色

此时页面上的标题颜色已经变成粉红色了，但此时尚未结束，这里只是预览效果，尚未真正改变
<5>. 复制控制颜色的那一段 CSS 代码段
复制 CSS
<6>. 粘贴 CSS 样式
粘贴 CSS 样式
此时博客页面的颜色便定制为粉红色了！！！

(2)、修改字体大小

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

假如原本就有 font-size: 那么只须要修改值便可

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

(3)、修改字体位置

假如我要把标题居中
基本步骤与更改颜色同样，不一样的是这里不是修改颜色而是更改或重设字体在样式框中的位置
此次不是点击标题文字，而是点击标题文字所在样式框
标题框
左下角一样出现了标题框样式的 CSS 代码段
添加 text-align:
这里选择居中

固然，若是本来就有 text-align: 就只有修改值即可以了

font-size:
一样把代码段复制粘贴到 CSS 修改框中
复制粘贴
保存后，最终效果：
最终效果
其余还有许多可定制的地方，但基本原理相同……

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

(1)、切换 MTTrendy 主题

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:
PC
移动：
移动

4.附

交流方式：

QQ： 1846334075

WeChat： zhoujirui54

CSDN：https://blog.csdn.net/D_si_God

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

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

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

联系我们 沪ICP备2021010478号-7