博客的自我修養——入門篇（一）（如何搭建本身的博客與基本美化）

工具材料：首先你要有一個博客
主要內容：如何如何搭建本身的博客與基本美化
相關知識：也許。和HTML五、CSS這兩個摻點邊。
推薦連接：
http://www.w3school.com.cn/  W3School | 據說是前端設計師要常常翻例子的地方。
http://www.cnblogs.com/asxinyu/p/Bolg_Category_BasicSetting_1.html   大神A | 學習參考（右下角的點贊系統就是抄這個大神的）
https://www.cnblogs.com/ECJTUACM-873284962/p/9345611.html   大神B | 啊，太強了，是大佬，我死了，左下角的小可愛一萬個想要www

---

皮膚與控件的選擇

首先，沒有美化以前個人網頁是這個樣子：

選用我本身喜歡的超級簡潔風格，鼠標放在標籤上面還有滑動，老實說本身已經挺喜歡了

 

---

 

 

自定義背景圖片

可是，對不起，我喜歡二次元=。=

 

 

先加個背景（管理->設置->頁面定製CSS代碼）

 

body {
    background:url("http://images.cnblogs.com/cnblogs_com/Kxia/1417723/o_1545694105428.jpg");
    background-position:center left;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment:fixed
}

 

這個就是咱們背景圖的代碼了，複製上去刷新個人主頁看看。

 

 

上面代碼你若是不喜歡這個圖片，你只須要改一個地方："http://images.cnblogs.com/cnblogs_com/Kxia/1417723/o_1545694105428.jpg"，把這個圖片的url改爲本身喜歡的圖片就行了

 

 

 

推薦步驟：創建相冊 - 上傳本身喜歡的圖片（注意大小分辨率）- 從相冊點開圖片 - 複製該圖片的網址 - 替換個人圖片地址 - 搞定✔

 

---

主體透明化的好處

可是個人這個很水的博客尚未結束就是由於一件事，模塊擋住圖片的臉了。。。我接着上代碼

 

#home {

    margin: 0 auto;
        margin-top: 0px;
        margin-bottom: 0px;
    width: 80%;
    min-width: 949px;
    background-color: #fff;
    padding: 30px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(77, 77, 77, 0.3);
    opacity: 0.85;

}

 

注意最後一行的opacity: 0.85;這個是模塊的透明度，表示模塊透明程度位85%

 

 

 

基本美化到這裏就結束了，關於新的css爲何能覆蓋皮膚css這些東西，目前原理還一律不知=。=，去網上找到喜歡部件的css直接加上去就行了

 

---

Extra小禮物：自定義字體顏色，模塊大小（CSS）

 

 碎碎念：下面開啓一點難的東西：網頁具體內容的設計：

 

步驟1：使用火狐或google瀏覽器（其餘瀏覽器我沒用過也不太清楚），打開你的首頁，按下鍵盤F12鍵。

 

步驟2：找到你想替換顏色的模塊（並非全部模塊均可以本身定義，除非你關掉皮膚自帶css本身從新寫）

咱們用查找工具找到一篇博客的內容部分：而後他的css和繼承css都會顯示在右方：

 

 

這裏面的數據，10px，這種粉色的東西你均可以本身編輯，圓圈是圖片顏色，能夠本身選擇。

選擇了之後，頁面的畫面也會隨着你的最新值更改，可是改了可不是直接保存好了的。

把標準調整到滿意後，複製這一塊css下來，粘貼到（設置-自定義css代碼）框再保存就行了。

 

我這裏貼出個人初版css吧：（這裏改了字體顏色，調整color應該看的出來吧）

body {

    color: #f66;
    font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
    font-size: 12px;

}

目前是body下面的內容都是能夠改的=。=而後帶刪除線的內容好像改了也沒用。

 

 

 

---

個人css分享

我如今已經改出一個我本身還比較滿意的風格了，若是喜歡的話

 

頁面定製CSS代碼：

/*boby調節背景圖片*/
body {
    background:url("http://images.cnblogs.com/cnblogs_com/Kxia/1417723/o_1545694105428.jpg");
    background-position:center left;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment:fixed
}

/*這是首頁標籤，就是博客園、首頁、聯繫那些    a:hover是鼠標移過去的懸浮顯示效果*/
#navList a {
    display: block;
    width: 11em;
    height: 22px;
    float: left;
    text-align: center;
    padding-top: 13px;
    font-size: initial;
    font-style: italic;
}
#navList a:hover {
    color: #fa6e6f;
    text-decoration: none;
}

/*Title是你的id:狂霞霞    a:hover是鼠標移過去的懸浮顯示效果*/
#blogTitle h1 {
    font-size: 40px;
    font-weight: bold;
    line-height: -0.5em;
}
#blogTitle h1 a:hover {
    color: #f66;
}

/*opacity裏面能夠調節透明度，可是如何讓圖片不透明我還不知道，第二個margin top能夠剪斷上部分的劉海*/
#home {
    margin: 0 auto;
        margin-top: 0px;
        margin-bottom: 0px;
    width: 80%;
    min-width: 949px;
    background-color: #fff;
    padding: 30px;
    margin-top: 10px;
    margin-bottom: 50px;
    box-shadow: 0 2px 6px rgba(77, 77, 77, 0.3);
    opacity: 0.87;
}

body {
    color: #f66;
    font-family: "Helvetica Neue",Helvetica,Verdana,Arial,sans-serif;
    font-size: 12px;
}

/*這個是文章的點贊系統，聽說會影響手機版用戶的使用，可是我這個辣雞目前也每人看*/
#div_digg{
  position:fixed;
  bottom:5px;
  width:140px;
  right:30px;
  border:2px solid #085;
  padding:10px;
  background-color:#fff;
  opacity:0.3;
  border-radius:5px 5px 5px 5px !important;
  box-shadow:0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5);
  transition-duration: 0.5s;
}

#div_digg:hover{
  opacity:1;
}

博客側邊欄公告（支持HTML代碼）

/*頭像的連接本身選啦，別和我用同樣吧，圓形頭像是我本身用ps扣的，而後保存png格式*/

<a href="https://home.cnblogs.com/u/Kxia/"><img src="http://images.cnblogs.com/cnblogs_com/Kxia/1417723/o_%E5%A4%B4%E5%83%8F.png" alt="狂霞的頭像（沒刷出來請按F5或換個瀏覽器）" width="175px"></a>
<br>

/*XXXX裏面的內容我匿了，反正大家也只是改連接對不對*/
B站連接：<a href="https://space.bilibili.com/XXXXXX">  &gt;狂霞霞霞&lt;</a>
<br>
知乎連接：<a href="https://www.zhihu.com/people/XXXXX">  &gt;小狐狸&lt;</a>
<br>

PS：大家本身要先選好SimpleMemory皮膚再貼我代碼鴨，大家選其餘皮膚的佈局就不同了，改得亂七八糟別別別別賴我   =。=