關於新家佈置的一點小經驗——開博第一篇

時間 2020-05-16

標籤關於佈置一點 1點經驗一篇简体版

原文原文鏈接

　　在成功申請博客園以後乾的第一件事，固然是好好佈置一下新家啦。javascript

　　之前逛大牛博客園看代碼的時候，就羨慕別人家的自定義網頁，尤爲羨慕別人家的板娘，今天終於本身有機會定義本身的網頁了，真是敲開心。css

　　廢話就很少說了，讓我來給你們分享一下經驗吧。html

　　做爲一個博客園小白，在美化本身的博客以前，固然先找度娘瞭解一下情報，雖然大佬侃侃而談地東西我實在沒太看懂，但仍是摸到了一點門道。java

　　博客園美化入門　

　　其實當你學會按下管理和設置以後，你就成功入門了。慢着，也許還須要學會貼css樣式。canvas

　　博客園基本樣式美化

　　爲了看清博客園的原本面貌，我決定扒光她的css樣式。(੭ु≧▽≦)੭ु因此我果斷禁用了模版默認css樣式。瀏覽器

　　真是一覽無遺(ಡωಡ)（詳見下圖）工具

　　緊接着，咱們就能夠開始寫css樣式。慢着，我連源代碼什麼類，什麼id我都沒有搞明白。佈局

　　看來，我還得把源代碼扒出來。字體

　　在mac的safari瀏覽器下，我通常都喜歡右鍵-檢查元素打開開發者工具後調出源代碼，其它系統和其它瀏覽器的能夠自行參照一下百度經驗https://jingyan.baidu.com/article/11c17a2c274832f446e39dc2.html。ui

　　調出源代碼以後咱們其實就能夠對照着寫css樣式了，因此我心（厚）安（顏）理（無）得（恥）地決定去copy其它大牛寫的css代碼。最後，在精挑細選之下，我決定仍是本身來改博客園皮膚的css樣式，由於這樣就能夠在有了基本佈局下本身進行二次創造了（我這裏貼的是Paperclip-fall的css代碼）。這個在safari瀏覽器裏打開開發者工具後點擊資源裏的樣式表後就能夠copy了。我爲了查找方便就粘貼在pages裏面，但我以爲最溫馨的應該是粘貼在dreamweaves裏，把網頁源代碼也複製進去，一邊改，一邊還能夠把代碼可視化。改完以後貼入這個框裏，就能夠了。　　

接下來我給你們具體介紹我改的幾個地方：

　　1 更改背景圖片

　　背景這裏我就換了個圖片，把url後面括號找個別的圖片的網址換一下就好，若是以爲百度圖片網址過於冗長，能夠下載到本地而後上傳到https://sm.ms或者博客園，本身畫的就能夠這樣上傳。（上傳到博客園的方法是管理-文件）而後背景這裏我還加了一句background-attachment:fixed; 保證背景圖片不隨滾動條滾動而移動，防止隨筆太長背景過短。

 1 body { 2 3 　　font-size : 0.8em; 4 5 　　font-family : Tahoma, Arial, Helvetica, sans-serif; 6 7 　　margin : 0px; 8 9 　　padding: 0px; 10 11 　　background-image: url('https://i.loli.net/2019/03/18/5c8f56a93cfc6.jpg'); 12 13 　　background-repeat: no-repeat; 14 15 　　background-attachment:fixed; 16 17 　　padding-bottom: 20px; 18 19 }

　　2 更改div佈局樣式

　　這裏我把背景圖片改掉了，其實你們經過上面的那個圖片，也發現了原來那個楓葉真的很差看（至少我是不喜歡的ฅ(• - •)ฅ），因此我選擇直接去掉，改爲白色背景：background: #ffffff; 由於已經有背景圖片了，因此這裏在加個圖片顯得花花綠綠的。可是單純的白色也很差看，因而我改了他的透明度：opacity:0.5; 而後模版裏有兩個masthead的css樣式，我不太懂他們的優先級，因此我決定把它們並起來。（果真是拷貝的代碼不易懂ฅ(• - •)ฅ）對了，我還把矩形變成圓角的，醬紫是否是好看了許多。我好像尚未放圖片，稍等一下，我把其它兩個div佈局下的css樣式也貼一下，就不具體介紹，你們能夠對比原代碼。

 1 #masthead  2 {  3  margin-top: 15px;  4  background: #ffffff;  5  width: 804px;  6  height: 221px;  7  overflow: hidden;  8  margin-left: auto;  9  margin-right: auto; 10  text-align:left; 11  border-radius:20px 20px 0px 0px; 12  opacity:0.5; 13 }

 1 #nav  2 {  3  background-color: #ffffff;  4  padding: 0px 0px 0px 0px;  5  width: 804px;  6  height: 43px;  7  overflow: hidden;  8  margin-left: auto;  9  margin-right: auto; 10  opacity:0.9; 11 }

1 #content 2 { 3  background-color: #ffffff; 4  opacity:0.8; 5 }

　　3其它的小修改

　　除了上面說的以外，我還作了一些小改動，好比<li>的去點，改字號大小，改字體之類。說到改字體，其實和改背景是同樣的，首先，要有網上的字體資源庫或者本身把字體上傳到網上。我本身在弄的時候是用了有字庫http://www.youziku.com/，點擊字體列表，選一個字體當即使用，（沒有帳號就註冊一個咯）他能生成css代碼和js代碼，做爲小白我果斷選css，選了css以後，須要輸入相應的字符去生成css代碼，據悉這是爲了加載方便，而後就獲得如圖界面。

　　而後在這裏我卡住了，這不是靜止畫面。

　　怎麼把css代碼的連接置入啊，博客園只能改css樣式和頁首頁尾邊欄的代碼啊，慢着，我也許能夠這個樣子。

　　複製一下href的網址內容，而後在網頁打開，直接貼到css樣式裏，我是個小機靈鬼(๑•ㅂ•́)و✧。

　　添加板娘

　　其實一開始我是沒想這麼急地添加板孃的，可是仍是忍不住先copy了一隻。因此我並不知道怎麼作一隻板娘。因而乎，我給你們直接貼一段別人家的教程。先貼一下出處http://www.javashuo.com/article/p-tasbeysx-nt.html，這個博主的介紹也是很詳細的。　　

 1 4.給博客園添加超卡哇伊的板娘  2  
 3 
 4 有沒有注意到我右下角的小板娘呢  5 
 6 是否是很可愛啊  7 
 8 快把她請到你的博客園裏吧  9 
10 首先咱們須要往博客園上傳一些板孃的關鍵文件 11 
12 幫你整理好了，下載地址在這裏喲！ 13 
14  
15 
16 連接：https://pan.baidu.com/s/1AJ-q7uy6h5e9Z9SzL3wyFw 17 提取碼：o1kf 18 
19 
20  
21 
22 而後在你的頁腳Html代碼裏添加如下代碼 23 
24 <!DOCTYPE html>
25 <html xmlns="http://www.w3.org/1999/xhtml">
26 <head>
27     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
28     <link rel="stylesheet" type="text/css" href="你上傳的waifu1.css文件路徑"/>
29     <link rel="stylesheet" type="text/css" href="你上傳的flat-ui.min1.css文件路徑"/>
30 </head>
31 <body>    
32     <div class="waifu">
33         <div class="waifu-tips"></div>
34         <canvas id="live2d" width="280" height="250" class="live2d"></canvas>
35         <div class="waifu-tool">
36             <span class="fui-home"></span>
37             <span class="fui-chat"></span>
38             <span class="fui-eye"></span>
39             <span class="fui-user"></span>
40             <span class="fui-photo"></span>
41             <span class="fui-info-circle"></span>
42             <span class="fui-cross"></span>
43         </div>
44     </div>
45         
46     <script src="你上傳的waifu-tips.js路徑"></script>
47     <script src="你上傳的live2d.js路徑"></script>
48     <script type="text/javascript">initModel()</script>
49 </body>
50 </html>
51  
52 
53 OK 大功告成  你的頁面有沒有變漂亮了呢？？？

　　好了，我新家的裝修到此就告一段落了。後期我應該還想在邊欄弄個閱讀導覽什麼的。添加個背景音樂嗎？好像有點騷。那就先這樣吧。做爲小白一個，此次跟你們分享新家的裝修估計會有一些說的不恰當的地方，要是有大佬幫忙指出就實在感激涕零啦。對了對了，貼個竣工圖。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。