- 12月 20 週五 201322:45
麥拉風日常&節日QQ表情
- 12月 11 週三 201310:13
Switc 百款背景網頁特效
- 12月 05 週四 201322:15
小裝飾 - 替網誌天天換不同的飄落效果
可以看到流星在部落中劃過
- 11月 26 週二 201322:28
調整邊界( margin & padding )
上一篇教學有講到margin，我突然想到可能有人不知道這個，就趕緊補上這篇。
先說明一下，margin和padding都是用來調邊界的。
如果想移動一個東西，也可以利用改變它的邊界來達到移動的效果。
而margin和padding的分別用說的比較難解釋，所以等等有圖給大家看。
基本設定：
假如我要把#content整個向右移10px，
可以用#content{margin-left: 10px; }，其實它的意思是要左邊的邊界為10px，看起來就像是往右邊移動10px。
當然也可以用margin-top、margin-bottom、margin-right來做改變。
另外，如果上下左右的邊界都要改變，寫那麼多就有點雜的感覺，所以有縮寫可以用，而情況有三種：
1. 上下左右的邊界都一樣：
就直接打：margin: 10px;
意思就是上下左右的邊界都為10px。(這裡以10px做範例，可自行調整數值。)
2. 上下左右的邊界都不同：
例如：上邊界5px、下邊界6px、左邊界7px、右邊界8px。
就這樣打：margin: 5px 8px 6px 7px;
順序是：上右下左。
3. 上下邊界一樣，左右邊界一樣：
例如：上邊界5px、下邊界5px、左邊界10px、右邊界10px。
就這樣打：margin: 5px 10px;
順序是：上下、左右。
＊注意：雖然上面的範例都是margin，但是padding用的也是一樣的方法噢！
O.K.!! 現在會設定了齁？那我們來說margin和padding的差別～
例如：要改#content的邊界，我們直接看圖：
(黃色區塊是#container，就是有包含#content和#links的東西。而紅色是#content，就是內文的地方。)
1. 這是都還沒有設定之前：
2. 這是 #content{margin-left: 10px; } 的效果：
3. 這是 #content{padding-left: 10px; } 的效果：
這樣看得懂嗎？簡單來說，margin是指整個content的邊界，padding是指content裡面的邊界。
先說明一下，margin和padding都是用來調邊界的。
如果想移動一個東西，也可以利用改變它的邊界來達到移動的效果。
而margin和padding的分別用說的比較難解釋，所以等等有圖給大家看。
基本設定：
假如我要把#content整個向右移10px，
可以用#content{margin-left: 10px; }，其實它的意思是要左邊的邊界為10px，看起來就像是往右邊移動10px。
當然也可以用margin-top、margin-bottom、margin-right來做改變。
另外，如果上下左右的邊界都要改變，寫那麼多就有點雜的感覺，所以有縮寫可以用，而情況有三種：
1. 上下左右的邊界都一樣：
就直接打：margin: 10px;
意思就是上下左右的邊界都為10px。(這裡以10px做範例，可自行調整數值。)
2. 上下左右的邊界都不同：
例如：上邊界5px、下邊界6px、左邊界7px、右邊界8px。
就這樣打：margin: 5px 8px 6px 7px;
順序是：上右下左。
3. 上下邊界一樣，左右邊界一樣：
例如：上邊界5px、下邊界5px、左邊界10px、右邊界10px。
就這樣打：margin: 5px 10px;
順序是：上下、左右。
＊注意：雖然上面的範例都是margin，但是padding用的也是一樣的方法噢！
O.K.!! 現在會設定了齁？那我們來說margin和padding的差別～
例如：要改#content的邊界，我們直接看圖：
(黃色區塊是#container，就是有包含#content和#links的東西。而紅色是#content，就是內文的地方。)
1. 這是都還沒有設定之前：
2. 這是 #content{margin-left: 10px; } 的效果：
3. 這是 #content{padding-left: 10px; } 的效果：
這樣看得懂嗎？簡單來說，margin是指整個content的邊界，padding是指content裡面的邊界。
- 11月 26 週二 201322:25
調整內文和側欄寬度
這次是改變內文和側欄的寬度，這也是很多人問過的問題！：）
首先呢，要先知道寬度的英文叫做「width」。
若我要設定某區塊為100px，就這樣打：width: 100px; 。
以最常問的內文來說，就是 #content{width: 100px; }（當然不可能只設為100px啦…XD）
側欄呢，就是 #links{width: 100px; }。
在改寬度有個重點要注意，就是…其實我不知道怎麼說… = ="
意思就是，例如今天要改內文和側欄的寬度的話，兩者的寬度加起來不能超過 #container 的寬度。
因為 #content 和 #links 都是包含在 #container 下面的，
所以如果 #content 和 #links 的寬度超過 #container 的寬度，#container 會包不住這兩樣，就會造成側欄往下掉的悲劇(?)。
＊注意：如果 #content 和 #links 有使用 margin-left 或 margin-right 的話，也要把 margin 的數值算進去，不然也會跑版。
再來說說三欄式要注意的，
三欄式的側欄會多兩個設定：#links、#links-row-1（三欄式第一欄）、#links-row-2（三欄式第二欄）。
所以改的時候也要注意 #links-row-1 和 #links-row-2 的寬度加起來不可以超過 #links 的寬度噢。（也要記得把margin的值算進去）
補充：由於做樣式的慣性，在改的時候或許會遇到一個問題：底圖不變，看起來很奇怪。
因為做樣式時常常會需要製圖美化每個區塊，而背景就是基本上一定會另外做的，所以看到的背景並不是用色碼指定區塊（側欄或是內文）的背景色，而是圖片。既然是圖片，想當然爾光改CSS是不能變動它的囉。
要改的話只能再做一張新的圖，把原本的圖取代掉。
- 11月 17 週日 201322:02
Windows更新無法複製Flash檔-2013/10/25最新通知
前幾天霝兒通知min,陸續有格友開始無法複製FLASH檔
- 11月 16 週六 201322:39
痞客CSS架構圖詳細版
這篇文章真是方便感謝★╮涵．苞．待．放╭☆，欽小涵的整理，官方也有釋出圖片CSS架構圖，但還不夠清楚每個標籤位置，有了文字的架構圖就可以更詳細了解每一個標籤位置嚕！本文轉自沉迷。失速。
整體頁面 /
整體頁面 /
- 11月 13 週三 201320:37
如何在置頂頁的日誌描述放置兩個透明Flash動畫做頁首背景：
如何在置頂頁的日誌描述放置兩個透明Flash動畫做頁首背景：
複製以下語法貼在日誌描述位置，如圖：
<EMBED style="LEFT:0px;POSITION:absolute;TOP:0px;" align=left src=Flash網址.swf width=1000 height=200 type=application/octet-stream wmode="transparent" quality="high" ;>
<EMBED style="LEFT:0px;POSITION:absolute;TOP:0px;" align=left src=Flash網址.swf width=1000 height=200 type=application/octet-stream wmode="transparent" quality="high" ;>
- 11月 13 週三 201311:00
CSS基礎認識
CSS基礎認識
CSS由來
CSS是「Cascading Style Sheets」的縮寫，Cascading是串接、連接之意；Style則是風格、款式之意；Sheets則是一頁紙、表的意思。
所以呢，要以中文來解釋CSS的話呢，您可以稱之為「串接樣式表」。
很奇怪的一串名詞是否？其實，當您CSS用習慣後，您就會發覺它會這樣被稱呼還蠻貼切的。
CSS的作用
CSS能夠使你的網頁更整齊，它可控制網頁中的字型.字體.大小.連結.表格.圖片....等。
需要的工具
編輯CSS不需要任何工具，只要你有記事本就可以編輯了，當然有更好的網頁編輯軟體也是一各相當不錯的幫手。
CSS是「Cascading Style Sheets」的縮寫，Cascading是串接、連接之意；Style則是風格、款式之意；Sheets則是一頁紙、表的意思。
所以呢，要以中文來解釋CSS的話呢，您可以稱之為「串接樣式表」。
很奇怪的一串名詞是否？其實，當您CSS用習慣後，您就會發覺它會這樣被稱呼還蠻貼切的。
CSS的作用
CSS能夠使你的網頁更整齊，它可控制網頁中的字型.字體.大小.連結.表格.圖片....等。
需要的工具
編輯CSS不需要任何工具，只要你有記事本就可以編輯了，當然有更好的網頁編輯軟體也是一各相當不錯的幫手。
