2019基于Hexo快速搭建個人博客闸氮，打造一個炫酷博客(1)-奧怪的小棧

這篇文章告訴你如何在2019快速上手搭建一個像我一樣的博客：基于HEXO+Github+dnspod搭建甲抖。并完成SEO優(yōu)化，打造一個炫酷博客沾瓦。

本文轉(zhuǎn)載于：019基于Hexo快速搭建個人博客满着，打造一個炫酷博客(1)-奧怪的小棧

本站基于HEXO+Github搭建。

所以你需要準備好HEXO+Github等相關軟件和工具贯莺。

前言

現(xiàn)在已經(jīng)是2019年了风喇，你還沒有自己的博客就out了！所以缕探，我為了趕上時代的潮流魂莫，花費了幾天的時間，從零基礎到入門爹耗。搞出來了這樣的一個博客耙考。

在這里跟大家分享一下經(jīng)驗。

由于網(wǎng)上已經(jīng)有很多而且很詳細的hexo搭博客教程了潭兽，我就不再學習他們倦始，把全部過程都放出來了，小白可以看 致謝 部分內(nèi)的文章山卦。

鞋邑！HEXO文檔和NexT主題文檔真的很有幫助！一定要看账蓉！

Ｃ锻搿！我會把本站獨特的優(yōu)化放到這篇文章里铸本，方便大家查看（當然你得先看完這篇文章）肮雨。！归敬！

致謝

官方文檔:

hexo文檔

NexT主題文檔

參考文章:

暫時放著參考文章先酷含，有空再自己寫一下。

我也是看著以下大佬的文章照葫蘆畫瓢寫出來的：（從入門到個性化汪茧，按開始搭建到個性化配置的順序排序）

PS：其中SEO優(yōu)化部分有些方法已經(jīng)失效椅亚！請勿再從里面復制粘貼！特別是百度自動推送插件那部分舱污！

PS：點擊鼠標出現(xiàn)?好像已經(jīng)失效了呀舔！

使用hexo+github搭建免費個人博客詳細教程 - 我是小茗同學 - 博客園| ookamiAntD's Blog

基于Hexo+Github+Coding搭建個人博客——基礎篇(從菜鳥到放棄) | ookamiAntD's Blog

基于Hexo搭建個人博客——進階篇(從入門到入土) | ookamiAntD's Blog

Hexo 的 NexT 主題個性化教程：打造炫酷網(wǎng)站

打造個性超贊博客 Hexo + NexT + GitHub Pages 的超深度優(yōu)化

Hexo常見問題解決方案

SEO優(yōu)化基礎（復制粘貼就能用）推薦看這個，親測（不排除再失效，慎重的自測一下）沒問題：

Hexo博客之后續(xù)SEO優(yōu)化 - 簡書

Hexo-Next搭建個人博客（SEO優(yōu)化）

一些你可能會用到的網(wǎng)站的官網(wǎng)

免費域名申請媚赖，網(wǎng)速對國內(nèi)玩家不友好霜瘪，建議自備梯子。

Freenom

DNS解析惧磺，騰訊的颖对。不需要梯子。

dnspod

如果你連github的用途都不知道磨隘，建議回去看上面的文章缤底。

github

可以將博客圖片上傳到這來。（這個比較麻煩番捂，新手慎重）

七牛云

免費圖床个唧，也可以將博客圖片上傳到這來。

SM.MS

本博客評論系統(tǒng)官網(wǎng)设预。（搭建方法可以看NexT主題文檔）

來必力

SEO優(yōu)化用

百度搜索資源平臺

Google提交入口

360提交入口

常用的命令

hexo常用命令:

hexo new "title"? # 生成新文章: \source\_posts\title.md

hexo new page "title"? # 生成新的頁面, 后面可在主題配置文件中配置頁面

生成文章或頁面的模板放在博客文件夾根目錄下的 scaffolds/ 文件夾里面, 文章對應的是 post.md , 頁面對應的是page.md, 草稿的是draft.md

hexo init [folder] # 初始化一個網(wǎng)站. 如果沒有設置 folder , Hexo 默認在目前的文件夾建立網(wǎng)站

hexo new [layout] <title> # 新建一篇文章. 如果沒有設置 layout 的話, 默認使用 _config.yml 中的 default_layout 參數(shù)代替. 如果標題包含空格的話, 請使用引號括起來

hexo version # 查看版本

hexo clean # 清除緩存文件 (db.json) 和已生成的靜態(tài)文件 (public)

hexo g # 等于hexo generate # 生成靜態(tài)文件

hexo s # 等于hexo server # 本地預覽

hexo d # 等于hexo deploy # 部署, 可與hexo g合并為 hexo d -g

git config --global user.name "YOURUSERNAME"? # 修改git用戶名

git config --global user.email "YOUREMAIL" # 修改git郵箱

npm uninstall XXX徙歼，卸載某個插件 例如

npm uninstall hexo-generator-sitemap --save

npm uninstall hexo-generator-baidu-sitemap --save

npm uninstall hexo-abbrlink --save

文章的模版文件：

用 Hexo 寫文章是直接用 Markdown 寫的，

你可以直接通過在?~/blog/source/_posts/?下新建.md結(jié)尾的文件來寫新的文章鳖枕。

你可以通過自定義文章的模版文件魄梯，從而每次命令行新建的文章都會有你自定義的內(nèi)容。

注意：如果自己直接新建文件耕魄，一定要記得加上文件最上方的參數(shù)画恰，即下面的相關內(nèi)容，還有編碼請用 UTF-8吸奴。

關于文件最上方的參數(shù)允扇，參見 Hexo 官方文檔的 Front-matter 和頁面變量，下面是總結(jié)：

/* Ｔ虬隆？既蟆！６链Α：巍！７２铡＞肌！管闷！

** 每一項的 : 后面均有一個空格

** 且 : 為英文符號

** Ｖ嘟拧！０觥Ｋ⒃省！！Ｊ髟睢Ｏ伺！天通！

*/

title:

/* 文章標題泊窘，可以為中文 */

date:

/* 建立日期，如果自己手動添加土砂，請按固定格式

** 就算不寫州既，頁面每篇文章頂部的發(fā)表于……也能顯示

** 只要在主題配置文件中谜洽，配置了 created_at 就行

** 那為什么還要自己加上萝映？

** 自定義文章發(fā)布的時間

*/

updated:

/* 更新日期，其它與上面的建立日期類似

** 不過在頁面每篇文章頂部阐虚，是更新于……

** 在主題配置文件中序臂，是 updated_at

*/

permalink:

/* 若站點配置文件下的 permalink 配置了 title

** 則可以替換文章 URL 里面的 title（文章標題）

*/

categories:

/* 分類，支持多級实束，比如：

- technology

- computer

- computer-aided-art

則為 technology/computer/computer-aided-art

（不適用于 layout: page）

*/

tags:

/* 標簽

** 多個可以這樣寫 [標簽1,標簽2,標簽3]

** （不適用于 layout: page）

*/

description:

/* 文章的描述奥秆，在每篇文章標題下方顯示

** 并且作為網(wǎng)頁的 description 元數(shù)據(jù)

** 如果不寫，則自動取 <!-- more -->

** 之前的文字作為網(wǎng)頁的 description 元數(shù)據(jù)

*/

keywords:

/* 關鍵字咸灿，并且作為網(wǎng)頁的 keywords 元數(shù)據(jù)

** 如果不寫构订，則自動取 tags 里的項

** 作為網(wǎng)頁的 keywords 元數(shù)據(jù)

*/

comments:

/* 是否開啟評論

** 默認值是 true

** 要關閉寫 false

*/

layout:

/* 頁面布局，默認值是 post避矢，默認值可以在

** 站點配置文件中修改 default_layout

** 另：404 頁面可能用到悼瘾，將其值改為 false

*/

type:

/* categories，目錄頁面

** tags审胸，標簽頁面

** picture亥宿，用來生成 group-pictures

** quote？

** https://io-oi.me/tech/test.html

*/

photos:

/* Gallery support砂沛，用來支持畫廊╱相冊烫扼，用法如下：

- photo_url_1

- photo_url_2

- photo_url_3

https://io-oi.me/tech/test.html

*/

link:

/* 文章的外部鏈接

** https://io-oi.me/tech/test.html

*/

image:

/* 自定義的文章摘要圖片，只在頁面展示碍庵，文章內(nèi)消失

** 此項只有參考本文 5.14 節(jié)配置好映企，否則請勿添加！

*/

sticky:

/* 文章置頂

** 此項只有參考本文 5.15 節(jié)配置好静浴，否則請勿添加堰氓！

*/

password:

/* 文章密碼，此項只有參考教程：

** http://shenzekun.cn/hexo的next主題個性化配置教程.html

** 第 24 節(jié)马绝，配置好豆赏，否則請勿添加！

** 發(fā)現(xiàn)還是有 bug 的，就是右鍵在新標簽中打開

** 然后無論是否輸入密碼掷邦，都能看到內(nèi)容

*/

Markdown 語法（寫文章時候用）：

1.[//]: # (注釋白胀，不會在瀏覽器中顯示。)

————————————————————————————————————————————————————————————————————

2.使用= 和 -抚岗，標記一級和二級 標題或杠。

例如：

一級標題

=

二級標題

-

使用 #,可以表示 1-6級 標題。

# 第一級標題 `<h1>`

## 第二級標題 `<h2>`

### 第三級標題 `<h3>`

#### 第二四級標題 `<h4>`

##### 第五級標題 `<h5>`

###### 第六級標題 `<h6>`

————————————————————————————————————————————————————————————————————

3.段落的前后要有空行宣蔚，所謂的空行是指沒有文字內(nèi)容向抢。若想在段內(nèi)強制換行的方式是使用兩個以上空格加上回車（引用中換行省略回車）

————————————————————————————————————————————————————————————————————

4.在段落的每行或者只在第一行使用符號 > ,還可使用多個嵌套引用，如：

> 區(qū)塊引用

> > 嵌套引用

> > >三嵌套引用

> > > > 四嵌套引用

————————————————————————————————————————————————————————————————————

5.代碼區(qū)塊的建立是在每行加上4個空格或者一個制表符（如同寫代碼一樣）胚委。如普通段落：

fun main(args: Array<String>) {

? println("Hello World!")

? println("sum = ${sum(34, 67)}")

? println("sum = ${sum(34, 67)}")

? println("sum = ${sum(34, 6, 57, 34)}")

? printSum(237, 57)

? printSum(234, 567, 8)

? vars(1, 4, 6, 78, 0, 6, 9, 8)

? val sumLambda: (Int, Int) -> Int = { x, y -> x + y }

? println("sumLambda = ${sumLambda(3, 6)}")

————————————————————————————————————————————————————————————————————

6.在強調(diào)內(nèi)容兩側(cè)分別加上 *或者 -,如：

*斜體* 挟鸠，_斜體_

**加粗**，__粗體__

————————————————————————————————————————————————————————————————————

7.使用 . 亩冬、+艘希、或- 標記無序列表，如：

-? 第一項

+? 第二項

-? 第三項

+? 第四項

-? 第五項

+? 第六項

————————————————————————————————————————————————————————————————————

8.分割線最常使用就是三個或以上的 * 硅急， ======</font>還可以使用? - 和 _覆享。

示例md代碼:

***

---

_____

======

————————————————————————————————————————————————————————————————————

9.鏈接可以由兩種形式生成，行內(nèi)式 和 參考式营袜。

行內(nèi)式：

示例md代碼:

[GitHub](http://github.com)

自動生成連接? <http://www.github.com/>

參考試：

[GitHub][1]

[1]:http://github.com

自動生成連接? <http://www.github.com/>

————————————————————————————————————————————————————————————————————

10.添加圖片形式和鏈接相似撒顿，只需要在鏈接的基礎上前方加一個 ！號荚板。

示例md代碼:

![GitHub set up](http://zh.mweb.im/asset/img/set-up-git.gif)

格式: ![Alt Text](url)

————————————————————————————————————————————————————————————————————

11.表格：

示例md代碼:

第一格表頭 | 第二格表頭

---------| -------------

內(nèi)容單元格 第一列第一格 | 內(nèi)容單元格第二列第一格

內(nèi)容單元格 第一列第二格 多加文字 | 內(nèi)容單元格第二列第二格

內(nèi)容單元格 第一列第三格 多加文字 | 內(nèi)容單元格第二列第三格

內(nèi)容單元格 第一列第四格 多加文字 | 內(nèi)容單元格第二列第四格

一些站內(nèi)SEO優(yōu)化方法和提醒

百度搜索資源平臺提交注意事項：

文件驗證文件：

使用 文件驗證文件 存放的位置需要放在source文件夾下凤壁，如果是html文件那么hexo就會將其編譯，所以必須要加上

layout: false

---


我的示例

這樣就不會被hexo編譯啸驯。（如果驗證文件是txt格式的就不需要）

一些提交時候的坑：

如果你添加的是http協(xié)議的話客扎，要保證http協(xié)議頭能訪問，并且不能http轉(zhuǎn)罚斗。https

如果你添加的是自定義域名的話徙鱼，提交失敗可以試試把www去掉

我的示例:


一些提交時候的坑


文章和代碼優(yōu)化:

相關內(nèi)容可以在_config.yml文件下修改

title優(yōu)化:

+ 首頁title寫法：首頁的title寫法格式一般是“總標題-特別重要的關鍵詞或者一句話含有特別重要關鍵詞的描述”。注意這里的“-”是英文针姿，計算機只對英語敏感性較高袱吆，而對漢語敏感性不太高。

+ 欄目頁title寫法：欄目頁title的寫法有兩種距淫，關鍵詞名稱命名寫法是“欄目名稱-總名稱”绞绒，非關鍵詞命名寫法是：“欄目名稱 欄目關鍵詞-總名稱”。

+ 分類列表頁的title寫法：用關鍵詞為這個欄目起名榕暇，然后按照下列順序填寫便可了“分類列表頁名稱-欄目名稱-總名稱”蓬衡。

注意事項:

+ 每個標題應該是根據(jù)當前內(nèi)容設置的獨特不重復的喻杈。

+ 字數(shù)限制。不能太長狰晚，要不然搜索引擎結(jié)果列表會顯示不全筒饰。最好不超過 25 個中文字。最好是在 10~20 之間壁晒。

+ 切勿堆砌關鍵詞瓷们。這是很多人常犯的錯誤

+ 關鍵詞最好出現(xiàn)在最前面

+ 標題有吸引力。畢竟有吸引力的標題才能讓用戶點擊

+ 連詞符的使用秒咐∶危可以使用 |->

+ 不要使用沒有意義的句子

keywords優(yōu)化:

好多站長在keywords堆砌關鍵詞，所以好多搜索引擎不太重視keywords了携取。建議大家還是認真填寫keywords攒钳，有的搜索引擎還是很重視的，由于現(xiàn)在詞頻和密度對于 SEO 影響不大歹茶，所以只要保持你的正文中出現(xiàn) 4~6 次關鍵詞就可以了夕玩。千萬不能堆砌關鍵詞。

注意事項:

+ 首頁keywords寫法：首頁keywords按照選定的欄目名稱惊豺，在首頁的keywords中加入總名稱、欄目名稱和一兩個關鍵詞禽作。

+ 欄目keywords寫法：欄目的keywords其欄目下所有分類列表的名稱列出尸昧，加上欄目關鍵字，寫法是“欄目名稱,欄目關鍵字,欄目分類列表名稱”

+ 分類列表頁keywords寫法：將你這個欄目中的主要關鍵字寫入旷偿。

Description優(yōu)化:

description一般不超過100個字符。對于個人站點而言，描述標簽最好是一句通順的句子右蒲，如果不能的話剧董，則寧可不要。

注意事項:

+ 首頁description寫法：description的寫法就是將首頁的標題茫负、關鍵詞和一些特殊欄目的內(nèi)容融合到里面蕉鸳，寫成簡單的介紹形式，不要只寫關鍵詞忍法。

+ 欄目description寫法：將欄目的標題潮尝、關鍵字、分類列表名稱饿序，盡量的寫入description中勉失，仍是盡量寫成介紹形式。

+ 分類description寫法：是將你這個欄目中的主要關鍵字寫入原探。

H標簽優(yōu)化:

H 標簽的重要性可能是僅次與頁面標簽乱凿。H1->H6 的重要性依次降低顽素。

所以建議在頁面的 H1 和 H2 標簽中混入關鍵詞。

備注：

網(wǎng)站外鏈的推廣度徒蟆、數(shù)量和質(zhì)量

網(wǎng)站的內(nèi)鏈足夠強大

網(wǎng)站的原創(chuàng)質(zhì)量

網(wǎng)站的年齡時間

網(wǎng)站的更新頻率（更新次數(shù)越多越好）

網(wǎng)站的服務器

網(wǎng)站的流量：流量越高網(wǎng)站的權重越高

網(wǎng)站的關鍵詞排名：關鍵詞排名越靠前戈抄，網(wǎng)站的權重越高

網(wǎng)站的收錄數(shù)量：網(wǎng)站百度收錄數(shù)量越多，網(wǎng)站百度權重越高

網(wǎng)站的瀏覽量及深度：用戶體驗越好后专，網(wǎng)站的百度權重越高

附錄：我的custom.styl樣式文件

不建議直接全部復制粘貼；搿！戚哎！

custom.styl樣式文件路徑：~\themes\next\source\css\_custom\custom.styl

``` [更新時間：2019/7/21]

// Custom styles.

/*******************首頁樣式*****************************/

// 網(wǎng)站背景

body {

? ? background:url(https://img.zcool.cn/community/019d8f5c8db2d1a801208f8bd92bb7.png@1280w_1l_2o_100sh.png);

? ? background-repeat: repeat; //重復

? ? background-attachment:fixed;

? ? background-position:0% 0%;

}

//改變背景色和透明度等

.main-inner {

background: #000;

padding: 25px;

opacity: 0.75; //整體透明度裸诽，包括字體

border-radius: 10px;

}

// 字體顏色

.post-body {

? ? color: #fff; //黑色

}

.post {

? margin-top: 60px;

? margin-bottom: 60px;

? padding: 25px;

? -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);

? -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);

}

// 網(wǎng)站描述

.site-subtitle{ font-size: 15px; color: white; }

// 網(wǎng)站標題

.site-title {

? ? font-size: 30px; //字體大小

? ? font-weight: bold; //字體：粗體

}

// 標題背景

.brand{

? ? background: transparent; //透明

}

// 菜單欄

.menu {

margin-top: 20px;

padding-left: 0;

text-align: center;

background: rgba(0, 0, 0, 0.5); //菜單欄背景色

margin-left: auto;

margin-right: auto;

width: 530px;

border-radius: initial;

}

// 菜單圖表鏈接 以及 超鏈接樣式

a {

? ? color: rgba(0,0,0,1);

}

a:hover {

? ? color: #ff106c;

? ? border-bottom-color: #ff106c;

}

// 菜單

.menu .menu-item a {

? ? font-size: 14px; //字體大小

}

.menu .menu-item a:hover {

? ? border-bottom-color: #ff106c;

}

.posts-expand .post-title-link {

? ? display: inline-block;

? ? position: relative;

? ? color: #fff; // 文章標題顏色

? ? border-bottom: none;

? ? line-height: 1.2;

? ? vertical-align: top;

}

// 頭部inner

.header-inner {

? ? padding: 45px 0 25px;

? ? width: 700px;

}

// 站點描述

.site-description {

? ? font-size: 16px;

}

// 作者名

.site-author-name {

? ? font-family: 'Comic Sans MS', sans-serif;

? ? font-size: 20px;

/*******************文章樣式*****************************/

// 文章背景框框

.post {

? ? margin-top: 10px;

? ? margin-bottom: 40px;

? ? padding: 18px;

? ? -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, 0.8);

? }

// 文章之間的分割線

.posts-expand .post-eof {

? ? margin: 40px auto 40px;

? ? background: white;

}

// 文章小標題顏色塊

.post-body h2, h3, h4, h5, h6 {

? ? border-left: 4px solid #2780e3;

? ? padding-left: 10px;

}

}

// ``代碼塊樣式

code {

? ? color: #E6006B;

? ? background: white;

? ? border-radius: 3px;

}

// 文章代碼塊頂部樣式

.highlight figcaption {

? ? margin: 0em;

? ? padding: 0.5em;

? ? background: #eee;

? ? border-bottom: 1px solid #e9e9e9;

}

.highlight figcaption a {

? ? color: rgb(80, 115, 184);

}

// 修改選中字符的顏色

/* webkit, opera, IE9 */

::selection {

? ? background: #00c4b6;

? ? color: #f7f7f7;

}

/* firefox */

::-moz-selection {

? ? background: #00c4b6;

? ? color: #f7f7f7;? ?

}

// 文章標題動態(tài)效果 next/source/css/_common/components/post/post-title.styl中.posts-expand .post-title-link確保`position: relative;`屬性存在, 如果需要標題呈現(xiàn)鏈接效果顏色, 將`color`元素去除即可

.posts-expand .post-title-link::before {

? ? background-image: linear-gradient(90deg, #a166ab 0%, #ef4e7b 25%, #f37055 50%, #ef4e7b 75%, #a166ab 100%);

}

// 文章內(nèi)標題樣式（左邊的豎線）

.post-body h2, h3, h4, h5, h6 {

? ? border-left: 4px solid #657b83;

? ? padding-left: 10px;

}

.post-body h1 {

? ? border-left: 5px solid #657b83;

? ? padding-left: 10px;

}

body {

? ? color: #fff; // 文章文本顏色

? ? font-size: 16px;

}

.posts-expand .post-meta {

? ? margin: 3px 0 60px 0;

? ? color: #fff; // 文章標簽文本顏色

? ? font-family: 'Lato', "PingFang SC", "Microsoft YaHei", sans-serif;

? ? font-size: 12px;

? ? text-align: center;

}

// 文章分類顏色

a {

? ? color: rgba(255, 255, 255, 1);

}

// 去掉圖片邊框

.posts-expand .post-body img {

? ? border: none;

? ? padding: 0px;

}

.post-copyright {

? ? margin: 2em 0 0;

? ? padding: 0.5em 1em;

? ? border-left: 3px solid #ff1700;

? ? background-color: #f9f9f900; // 版權信息背景色透明

? ? list-style: none;

}

/*******************其他樣式*****************************/

// 按鈕樣式

.btn {

? ? margin-top: 20px;

}

// 自定義的側(cè)欄時間樣式

#days {

? ? display: block;

? ? color: #999999;

? ? font-size: 14px;

? ? margin-top: 15px;

}

// 右下角返回頂部按鈕樣式

.back-to-top {

? ? line-height: 1.5;

? ? right: 10px;

? ? padding-right: 5px;

? ? padding-left: 5px;

? ? padding-top: 2.5px;

? ? padding-bottom: 2.5px;

? ? background-color: rgba(34, 34, 34, 0.75);

? ? border-radius: 5px;

? ? box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);

}

// 自定義頁腳跳動的心樣式

@keyframes heartAnimate {

? ? 0%,100%{transform:scale(1);}

? ? 10%,30%{transform:scale(0.9);}

? ? 20%,40%,60%,80%{transform:scale(1.1);}

? ? 50%,70%{transform:scale(1.1);}

}

#heart {

? ? animation: heartAnimate 1.33s ease-in-out infinite;

}

.with-love {

? ? color: rgb(255, 113, 168);

}

/*******************寫作用樣式*****************************/

// 下載樣式

a#download {

display: inline-block;

padding: 0 10px;

color: #fff;

background: transparent;

border: 2px solid #fff;

border-radius: 2px;

transition: all .5s ease;

font-weight: bold;

&:hover {

background: #fff;

color: #fff;

}

}

/ /顏色塊-黃

span#inline-yellow {

display:inline;

padding:.2em .6em .3em;

font-size:80%;

font-weight:bold;

line-height:1;

color:#fff;

text-align:center;

white-space:nowrap;

vertical-align:baseline;

border-radius:0;

background-color: #f0ad4e;

}

// 顏色塊-綠

span#inline-green {

display:inline;

padding:.2em .6em .3em;

font-size:80%;

font-weight:bold;

line-height:1;

color:#fff;

text-align:center;

white-space:nowrap;

vertical-align:baseline;

border-radius:0;

background-color: #5cb85c;

}

// 顏色塊-藍

span#inline-blue {

display:inline;

padding:.2em .6em .3em;

font-size:80%;

font-weight:bold;

line-height:1;

color:#fff;

text-align:center;

white-space:nowrap;

vertical-align:baseline;

border-radius:0;

background-color: #2780e3;

}

// 顏色塊-紫

span#inline-purple {

display:inline;

padding:.2em .6em .3em;

font-size:80%;

font-weight:bold;

line-height:1;

color:#fff;

text-align:center;

white-space:nowrap;

vertical-align:baseline;

border-radius:0;

background-color: #9954bb;

}

// 左側(cè)邊框紅色塊級

p#div-border-left-red {

display: block;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-left-width: 5px;

border-radius: 3px;

border-left-color: #df3e3e;

}

// 左側(cè)邊框黃色塊級

p#div-border-left-yellow {

display: block;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-left-width: 5px;

border-radius: 3px;

border-left-color: #f0ad4e;

}

// 左側(cè)邊框綠色塊級

p#div-border-left-green {

display: block;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-left-width: 5px;

border-radius: 3px;

border-left-color: #5cb85c;

}

// 左側(cè)邊框藍色塊級

p#div-border-left-blue {

display: block;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-left-width: 5px;

border-radius: 3px;

border-left-color: #2780e3;

}

// 左側(cè)邊框紫色塊級

p#div-border-left-purple {

display: block;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-left-width: 5px;

border-radius: 3px;

border-left-color: #9954bb;

}

// 右側(cè)邊框紅色塊級

p#div-border-right-red {

display: block;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-right-width: 5px;

border-radius: 3px;

border-right-color: #df3e3e;

}

// 右側(cè)邊框黃色塊級

p#div-border-right-yellow {

display: block;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-right-width: 5px;

border-radius: 3px;

border-right-color: #f0ad4e;

}

// 右側(cè)邊框綠色塊級

p#div-border-right-green {

display: block;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-right-width: 5px;

border-radius: 3px;

border-right-color: #5cb85c;

}

// 右側(cè)邊框藍色塊級

p#div-border-right-blue {

display: block;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-right-width: 5px;

border-radius: 3px;

border-right-color: #2780e3;

}

// 右側(cè)邊框紫色塊級

p#div-border-right-purple {

display: block;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-right-width: 5px;

border-radius: 3px;

border-right-color: #9954bb;

}

// 上側(cè)邊框紅色

p#div-border-top-red {

display: block;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-top-width: 5px;

border-radius: 3px;

border-top-color: #df3e3e;

}

// 上側(cè)邊框黃色

p#div-border-top-yellow {

display: block;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-top-width: 5px;

border-radius: 3px;

border-top-color: #f0ad4e;

}

// 上側(cè)邊框綠色

p#div-border-top-green {

display: block;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-top-width: 5px;

border-radius: 3px;

border-top-color: #5cb85c;

}

// 上側(cè)邊框藍色

p#div-border-top-blue {

display: block;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-top-width: 5px;

border-radius: 3px;

border-top-color: #2780e3;

}

// 上側(cè)邊框紫色

p#div-border-top-purple {

display: block;

padding: 10px;

margin: 10px 0;

border: 1px solid #ccc;

border-top-width: 5px;

border-radius: 3px;

border-top-color: #9954bb;

}

```

后語

更多消息請關注我們: 奧怪的小棧

待補充......

最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市型凳，隨后出現(xiàn)的幾起案子丈冬，更是在濱河造成了極大的恐慌，老刑警劉巖甘畅，帶你破解...
    沈念sama閱讀 217,185評論 6贊 503
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件埂蕊，死亡現(xiàn)場離奇詭異，居然都是意外死亡疏唾，警方通過查閱死者的電腦和手機蓄氧，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評論 3贊 393
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來槐脏，“玉大人喉童，你說我怎么就攤上這事《偬欤” “怎么了堂氯？”我有些...
    開封第一講書人閱讀 163,524評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長牌废。 經(jīng)常有香客問我咽白，道長，這世上最難降的妖魔是什么鸟缕？ 我笑而不...
    開封第一講書人閱讀 58,339評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任晶框，我火速辦了婚禮，結(jié)果婚禮上叁扫，老公的妹妹穿的比我還像新娘三妈。我一直安慰自己，他們只是感情好莫绣，可當我...
    茶點故事閱讀 67,387評論 6贊 391
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布畴蒲。 她就那樣靜靜地躺著，像睡著了一般对室。 火紅的嫁衣襯著肌膚如雪模燥。 梳的紋絲不亂的頭發(fā)上咖祭，一...
    開封第一講書人閱讀 51,287評論 1贊 301
  • 城市分裂傳說
    那天，我揣著相機與錄音蔫骂，去河邊找鬼么翰。 笑死，一個胖子當著我的面吹牛辽旋，可吹牛的內(nèi)容都是我干的浩嫌。 我是一名探鬼主播，決...
    沈念sama閱讀 40,130評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼补胚，長吁一口氣：“原來是場噩夢啊……” “哼码耐！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起溶其，我...
    開封第一講書人閱讀 38,985評論 0贊 275
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤骚腥，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后瓶逃，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體束铭，經(jīng)...
    沈念sama閱讀 45,420評論 1贊 313
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,617評論 3贊 334
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年厢绝，在試婚紗的時候發(fā)現(xiàn)自己被綠了契沫。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,779評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡代芜，死狀恐怖埠褪，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情挤庇，我是刑警寧澤，帶...
    沈念sama閱讀 35,477評論 5贊 345
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布贷掖，位于F島的核電站嫡秕，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏苹威。R本人自食惡果不足惜昆咽，卻給世界環(huán)境...
    茶點故事閱讀 41,088評論 3贊 328
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望牙甫。 院中可真熱鬧掷酗，春花似錦、人聲如沸窟哺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽且轨。三九已至浮声，卻和暖如春虚婿，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背泳挥。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工然痊， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人屉符。 一個月前我還...
    沈念sama閱讀 47,876評論 2贊 370
  • 代替公主和親
    正文 我出身青樓剧浸，卻偏偏與公主長得像，于是被迫代替她去往敵國和親矗钟。 傳聞我的和親對象是個殘疾皇子唆香，可洞房花燭夜當晚...
    茶點故事閱讀 44,700評論 2贊 354