♂月橘館♀

上次的位置語法大家都熟稔了嘛？

今天要來個稍稍進階一點的CSS應用。

當我們把部落格的背景圖、大區塊的位置(文章區、側欄區、網誌描述等)定下來之後

再來就是做側邊欄位的「各個」自訂欄位的位置囉！

在做位置調整之前，要先做的第一個功課是

「找到自訂欄位的標籤」

其實自訂欄位除了日曆、最新文章、最新回應、文章分類、人氣等

有著各家部落平台格自己的標籤之外（痞克標籤點我）

你所「新增」的自訂欄位都有自己專屬的標籤喔！

接下來要介紹如何找到新增的自訂欄位標籤：

範例：我新增的欄位叫做「月橘是笨蛋」，但是我不想讓他排在側邊欄位裡面

　　　我想把這個欄位放在部落格右上的咖咖角...

步驟：

1.檢視原始檔：

　新增好「月橘是笨蛋」這個欄位之後，回到部落格裡頭

　用滑鼠在部落格任何一個地方按右鍵，選擇「檢視原始檔」

2.尋找標籤：

　選擇了「檢視原始檔」之後，會出現一個記事本，如下

　接著按「CTRL + F」或是從「編輯→尋找」　開啟尋找功能。

　在尋找功能框裡輸入「月橘是笨蛋」之後，按右邊的「找下一個」按鈕

　就會跑到下圖藍底的「月橘是笨蛋」

　請看上圖紅框圈起的地方「box557800」就是「月橘是笨蛋」的標籤囉！

3.位置調整：

　找到了標籤之後，我們在利用「絕對位置」來定義「月橘是笨蛋」的位置

　語法如下：

　#box557800{ position:absolute ; top:50px ; left:50px;}

　這樣就可以把「月橘是笨蛋」這個欄位自由挪動囉！

4.修飾：

　部落格的側邊欄位有時有設定標題背景圖或是欄位內容背景圖時

　放置在其他區塊時，會顯得有點突兀，這時只要添加下方語法就可以解決困擾囉

　①去除標題背景圖：

　#box557800  .box-title{ background:url();}

　②隱藏整個標題：

　#box557800  .box-title{ display:none;}

　③隱藏欄位內容背景圖：

　#box557800  .box-text{ background:url();}

經由上述的步驟，相信你已經可以把自訂欄位玩弄於股掌之中

希望大家都能做出讓自己滿意的版型！

最後，如果你覺得這篇文章對你有些許幫助、勉強還可以

你又剛好很閒

就留下個 3Q給我順便幫忙點一下側邊欄位的工商服務裡的廣告停留個20秒再關掉網頁

給我當個小小的獎勵吧

※本文歡迎轉載、引用，煩請註明出處

　發表文章是很辛苦的，請給發文者一些些尊重喔！