工具材料：首先你要有一個博客
主要內容：如何如何搭建自己的博客與基本美化
相關知識：也許。和HTML5、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分享
/*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"> >狂霞霞霞<</a> <br> 知乎鏈接：<a href="https://www.zhihu.com/people/XXXXX"> >小狐狸<</a> <br>
PS：你們自己要先選好SimpleMemory皮膚再貼我代碼鴨，你們選其他皮膚的布局就不一樣了，改得亂七八糟別別別別賴我 =。=