零基礎自制博客園「賽博朋克」主題 10分鐘詳解 - 精簡概括

時間 2020-08-29

標籤零基礎自制博客朋克主題 10分詳解精簡概括简体版

原文原文鏈接

零基礎自制博客園「賽博朋克」主題 10分鐘詳解 - 精簡概括

JERRY_Z. ~ 2020 / 8 / 28
轉載請註明出處！css

零基礎自制博客園「賽博朋克」主題 10分鐘詳解 - 精簡概括

1.簡單說明（零基礎、超詳細）

(1)、爲何要寫這篇博客？

做爲一名計算機專業的學生，擁有本身的博客並持續維護更新對於學習掌握知識點及技能是很是重要的！！！前端

寫這篇文章的時候我也纔剛接觸博客不久，目前主要用的是：CSDN、博客園，可是做爲一個曾經差一點報了設計學專業的我來講，一個簡約漂亮的博客對我來講太太過重要了！！！git

可問題來了，我不懂 HTML CSS JavaScript 啊，僅僅是瞭解一點最最最基本的標籤使用而已，這對我想自定義博客主題頁面的想法來講太難了，因此我就摸索有沒有什麼簡單的方法，結果還真搞懂了……github

先給你們看一下我如今的博客主頁界面 (「賽博朋克」風格）：瀏覽器

PC端：
post

移動端：
學習

因此，我想應該還有許多小白像我同樣渴望定製本身的博客園主題殊不知道怎麼辦，而這就是我寫這篇博客的主要目的，感興趣的小朋友就繼續往下看吧！！！字體

寫博客很費精力，轉載的話，請註明一下出處！ui

(2)、博客園如何零基礎定製本身的主題？

因爲零基礎不懂任何前端的網頁開發技術，因此這裏只是在博客園所提供的主題基礎上修改 CSS 樣式，從而制定本身的風格，固然，不要看只是修改樣式，只要你厲害是能夠弄出很是漂亮的效果哦！！！.net

博客園修改 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;
}