創作內容

94 GP

自訂面板CSS教學文章的小屋~各小屋連結 (不定期更新內容~)

作者:38°C的雪娘│PSP 主機│2007-09-13 08:34:19│贊助:2│人氣:16854
  您喜歡佈置小屋嗎?看到其他美美的小屋是否也想自己來打扮一下呢?
小屋的自訂面板可以讓你修改編輯CSS來替小屋裝潢,但是CSS的東西是否會讓你感到陌生,別擔心,巴哈友許多網友熱心提供的教學,可以讓你學會小屋CSS的運用哦,快去看看吧!!

雪娘當初是CSS菜鳥,因為這些小屋提供的教學才慢慢學會佈置小屋,也體會到其中的樂趣,感謝這些巴友熱心提供的教學。大家在布置小屋時,千萬記得要隨時把CSS做備份哦!!(可以把整個CSS複製貼上到記事本裡面。)

【CSS小屋教學】
小屋CSS結構表(各區塊分類解說圖)
詳細圖解小屋各區域為哪些CSS語法。

勇者小屋使用指南~小屋基本修改說明

自訂面板CSS教學文章~如語娃娃(indream228)

自訂面板CSS教學文章~夏日薔薇(janeyang)

自訂面板CSS教學文章~淵(houup)

自訂面板CSS教學文章~異(u4)

自訂面板CSS教學文章~兔(sindsiona)

自訂面板CSS教學文章~gn6824(藏鏡咪咪)

自訂面板CSS教學文章~joe0145(櫻澤楓)

巴哈姆特勇者小屋自訂CSS規範
重要須知,修改CSS前請先了解。

【補充】
◆joe0145(櫻澤楓)部落閣
想搞個透明版面?自機CSS網誌範本概略公開中。

◆兔(sindsiona)部落閣
把那張醜醜的小屋統計表圖拿掉唷

【其他】
CSS常用語法
常用的CSS樣式屬性(字體、背景等格式設定)

巴哈LOGO 素材
如有創作需要,可到巴哈姆特九週年站慶活動網頁下載巴哈 LOGO 素材 。
或是點選此連結下載

【相關工具】
北斗色彩識別器 ∣orfina0514(綾奈)部落閣介紹
讓你查詢某些顏色到底是哪些#?????組成的。

網頁拍照線上工具∣emily7114(被遺忘的星星)部落閣介紹
想把佈置完後變美美的小屋整個拍下來嗎?這裡有很方便的網頁抓圖工具哦。
也有提供Firefox使用的抓圖功能擴充套件哦~

分享簡單好用影像處理軟體--光影魔手 nEO iMAGING∣emily7114(被遺忘的星星)部落閣介紹
想把佈置完後變美美的小屋整個拍下來嗎?這裡有很方便的網頁抓圖工具哦。
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=402409
All rights reserved. 版權所有,保留一切權利

相關創作

同標籤作品搜尋:|css|教學|小屋佈置|自訂面板|語法|小屋|修改|打造|

留言共 133 篇留言

冬唯
感謝整理,希望我也能做出這麼漂亮的小屋。

10-27 12:41

38°C的雪娘
大大加油哦~10-27 15:50

太美了!華貴又不會雜亂,我愛這種風格:P。

10-27 22:16

38°C的雪娘
^^
感謝哦~
新的拼盤重新設計過,這樣看起來比較整齊~10-27 23:17
神醫
感謝^^

10-28 16:40

38°C的雪娘
謝謝您的收藏
希望對你有幫助~10-28 19:55
不可愛斯基
很豐富的CSS教學:-)

11-02 20:12

38°C的雪娘
感謝大大的收藏哦
希望對您有幫助~^^11-03 15:33
亞黎〃思某無
真是太厲害了!我好愛><

11-02 21:30

38°C的雪娘
大大加油哦~
希望能對你有幫助!11-03 15:34
亞黎〃思某無

11-02 21:32

Sanro.(塑膠樹)
直接問一下雪娘大大QQ..
請問您GP格子上的圖..
照理說應該跟巴哈預設圖那邊一樣QQ..

請問您是怎麼弄掉的呢><...

11-03 19:34

38°C的雪娘
如果是指紅心評價區可以看這教學哦
'CSS-修改評價區圖'


右邊的GP,BP的地方呢
'GP、BP圖案修改'
大大試試看吧~11-04 09:20
Sanro.(塑膠樹)
感謝雪娘大..QQ剛好把評價區的紅心圖弄掉哩..
雖然不是我想問的>Q<..

再問一次雪娘大QQ..
就是..我屠完龍之後..改成自己的圖
但要看文章的時候QQ..

GP欄也會顯示圖片不是嗎QQ?
這樣就跟文章有一段不小的空白..

請問要如何把那個空白給消除呢><..

11-04 09:48

38°C的雪娘
問題就是padding-left:200px;
大大或許是因為想要讓GP的欄位寬一點所以才這樣設定
但是這樣就會讓部落閣文上面多出空白了

建議把部落閣欄位圖片移到右邊
改成
padding-left:20px;(或依照自己需要停整)
background-position: RIGHT;
可以恢復正常

雪娘就針對問題排除
剩下的最佳化配置大大就請自己研究吧~11-04 11:30
°蹦★小喳﹑
嘎 ,

謝謝大大捏 (*・∀-)b

我會盡力的 ˙ˇ˙

11-04 12:04

38°C的雪娘
加油哦~~~11-06 22:29
Sanro.(塑膠樹)
了解的說..現在已經恢復原狀了(淚)..
感謝雪娘大的熱心指導..
來去忙期中考哩...

我是來衝人氣的最後一行(誤XD)

11-04 14:56

38°C的雪娘
不客氣哦~^^11-07 10:58
God Bird
推一個

最近在找css的用法

這真的太有用了

偷藏@@

11-06 20:38

38°C的雪娘
歡迎大大收藏~
希望能對您有幫助!11-07 11:09
小愛將
實在是獲益良多!

11-07 21:38

38°C的雪娘
多謝哦~11-08 23:47
娜依秀
我也想要像雪娘大的首頁一樣
能夠用一張大圖從上方的最大圖片空間貫穿到勇者能力值的區域
但我不想要做到掀屋頂那樣
可是我發現我雖然可以把那幾個區塊弄成透明
但是卻不會放圖耶 QQ
我要用什麼語法才對呢?
曾嘗試過用背景的語法
可是卻變成修改到最外框的部份 ><
(右邊廣告的再外面
那不是我要的樣子啊 QQ
請問我該怎麼做才好呢?

11-10 01:01

38°C的雪娘
大大收信哦
雪娘有回復~^^11-10 22:12
雪梅娘
這篇真是太棒了T.T/~
謝謝雪娘囉~~我帶走了(@@~

11-10 20:18

38°C的雪娘
雪梅娘是雪娘的姐妹嗎? XD
歡迎哦~11-10 22:17
希恩.冥洛西斯
我第一次看到這網頁時,還以為這是站方特地做出來給巴友
看的教學網站咧.........................囧

11-11 21:23

38°C的雪娘
有些連結是站方的教學~不過都是基本而已
網友的教學還比站方豐富呢~11-12 22:58
賈斯汀Justin
雪娘大~請問要如何才能像妳的小屋首頁
勇造旁邊的那附近區域能變成完全透明(目前是半透明

11-11 22:24

38°C的雪娘
您好哦~
改以下語法

/*--小屋封面圖--*/
加入
height:0px;

/*框架*/
.infom_bk{
背景改成以下
background:none;

看到大大的小屋應該是已經解決了吧~11-12 23:04
芯璇
雪娘又整理出詳細的資料了

推推

芯先把他收藏起來先~

感謝你的用心謝謝分享~

11-13 23:33

38°C的雪娘
希望對芯璇大大有幫助哦,感謝收藏哦
您的小屋很漂亮呢!11-14 22:19
nanahikari
最進準備踏上修改小屋不歸路了,QQ" 感謝提供

11-14 09:23

38°C的雪娘
佈置小屋相當殺時間和腦袋呢~^^
大大加油!11-14 22:20
nanahikari
看到你來看我小屋,真有點悽涼的感覺

最近花了 三四天了 東看看 西找找

看了好多人的教學與方法 還是弄不好

往往弄了一些 某個環節一卡 就又耍脾氣重置了

到底民國幾年弄的好呢ˇˇ?

11-14 23:35

38°C的雪娘
悽涼的慶祝主題?
大大要靠點耐心哦~
雪娘改造小屋也是遇到許多問題~
慢慢來吧~11-15 23:26
銀閃之盾
版大大
我也收藏在我的小屋喔^^""

真的是不錯的東西~~~
可惜我天份不夠 恐怕要多點時間參悟了(泣)

11-15 12:03

38°C的雪娘
感謝收藏呢!
大大努力學習,加油哦!11-15 23:41
小月
感謝整理~
已收藏^^

常常因為要改css而在站裡找半天,
看到整理出來的名字真的是笑了,
因為都是些常去的小屋^^"

11-15 14:02

38°C的雪娘
謝謝您~
希望這資訊對你有幫助~11-15 23:41
nanahikari
目前好不容易把背景圖上去了,只是= =....

目前想把所有的框框跟框線弄成透明的

可以透視到背景 但昨天弄了一晚上還是弄不好

雪娘阿,救救我吧XD

11-16 15:11

38°C的雪娘
雪娘剛去看
你的小屋沒有任何框線了~
完成了嗎?11-17 16:36
nanahikari
目前剩下文字都白白的= =

11-16 17:50

38°C的雪娘
大大小屋修好了嗎?
剛去看似乎沒什麼問題?11-17 16:38
nanahikari
乾脆把背景換暗一點的了...弄到快瘋了XD

11-16 19:23

38°C的雪娘
加油哦!11-17 16:38
nanahikari
目前只剩給紅心那邊那塊白白的弄成透明就OK了

請問該怎麼做= =?

11-16 22:19

38°C的雪娘
大大手腳真快
雪娘回覆的慢,大大就已經解決了 XD11-17 16:44
nanahikari
給紅心那一塊白白的還沒解決

呵呵,看到今日訪客就又點過來了= =

其實是我比較不好意思啦!

一連留了好幾篇 真是抱歉@@

現在只剩給紅心那一塊白白的

不過目前不知道怎麼用XD

11-17 17:12

38°C的雪娘
大大很棒哦
每次問題都是自己解決
雪娘回覆速度都來不及幫上忙
抱歉囉~^^11-19 09:05
阿熊人
讚>v<

11-17 20:27

38°C的雪娘
^^11-19 09:39
小桔
QAQ

11-18 11:46

38°C的雪娘
>//<11-19 09:56
nanahikari
也沒有= =

其實也花了好大一番功夫

你的新主題很棒喔!

11-19 14:30

38°C的雪娘
謝謝囉~11-20 21:01
賣尬拎北五四三!
推啦!!!!

11-19 14:49

38°C的雪娘
謝謝~^^11-20 21:03
客套六百
推文打氣!( ̄▽ ̄)y

11-20 16:16

38°C的雪娘
感謝哦~^^11-20 21:29
小AR
哇哈哈~~我喜歡>///<

11-21 13:26

38°C的雪娘
謝謝哦
希望對你有幫助11-22 10:14
女亭
感謝分享
希望我也可以整理出漂亮的屋^^
3Q
可能要先研究研究:P

11-23 21:32

38°C的雪娘
佈置小屋,美工方面也要下一點功夫
畢竟小屋幾乎有7成都是用圖片來搭配的
大大加油囉~11-23 22:15
st002
是我太笨嗎= = 好幾個不會用

11-25 19:06

38°C的雪娘
@@11-27 21:50
洗多郎
感謝分享
總算有個概念弄小屋

12-03 17:59

38°C的雪娘
加油哦 ^^12-04 21:47
蘇子
偷走♡~ˋ( ° ▽、° )

12-20 20:45

38°C的雪娘
歡迎 ^^
偷乾淨一點哦12-21 21:58
st002
雪娘大...
冒昧的請問一下
我的小屋
外框背景色只到右上方的小圖示就沒了
可否到我的小屋看一下了解問題呢?
感激不盡

12-22 19:42

38°C的雪娘
真抱歉~好久沒回復
不知道現在雪娘是否還幫的上忙? @@01-11 20:29
幸福御守
^^超優文唷

12-25 08:06

38°C的雪娘
謝謝~
希望能對您有幫助 ^^01-11 20:32

謝謝...正在研究..收藏先...^^

12-30 16:40

38°C的雪娘
歡迎哦01-11 20:35
水琥鑽
謝謝^^我收藏了~

12-31 16:27

38°C的雪娘
歡迎收藏~ XD01-11 20:36
櫻桃漾漾
收下嚕>\\\<正在找一大堆語法斗

01-03 10:17

38°C的雪娘
歡迎哦01-11 20:40
純 粹+
方便的連結XDD

01-05 09:16

38°C的雪娘
歡迎收藏哦 ^^01-11 20:43

好文收收

01-05 10:08

38°C的雪娘
謝謝^^01-11 20:47

從看妳的小屋後
就下定絕心要學css語法
能把小屋用的美美的還真有成就感

01-05 10:10

38°C的雪娘
貝米爾加油哦~01-11 20:47
蒼毓
感謝大大分享整理

01-05 15:08

38°C的雪娘
不客氣 ^^01-11 21:01
薄紗下的誘惑
感謝雪娘幫忙><

01-05 15:09

38°C的雪娘
不客氣囉~01-11 21:01
Sanro.(塑膠樹)
不好意思..在來問雪娘一下XD...
最近在下的小屋要重新裝潢..
可是..在下框架的部份 之前不知道改到什麼了..
全部變成長方形=.=+..不知道是不是因為調顏色的關係QQ..

不過之後要把原本的語法貼上去重新再來...
所以想問雪娘幾個問題><...

就是阿...像個人相關訊息那欄..QQ
請問要用什麼語法才能像雪娘那樣帶點漸層的顏色呢=口="..
還有就是雪娘小屋右邊那一長條粉色的...在下也不知道如何用><..
麻煩雪娘了...>"<

01-06 16:44

38°C的雪娘
雪娘有回信囉
有問題可以問哦 ^^01-11 21:16
LazyMan
一直再找這類的文章終於給我找到嚕^^"

01-08 00:38

38°C的雪娘
歡迎使用 XD01-11 21:25
重裝甲要塞小林
感謝分享

01-08 16:15

38°C的雪娘
謝謝^^01-11 21:26
彼岸花開〞
棒呆了XD百科全書耶~(?)

01-10 18:45

38°C的雪娘
希望對您有幫助哦~01-11 21:30
火星草履蟲

01-10 20:21

38°C的雪娘
感謝哦~01-11 21:30
蕾妮
你整理的好仔細~感謝你喔^^

01-12 17:22

38°C的雪娘
不客氣~^^01-18 17:52
悟道者 永恆聖神
好文 精華文 我收藏嚕

01-12 19:31

38°C的雪娘
謝謝您的收藏哦~01-18 17:52
小幽
好...好可愛呀!!!
閒閒沒事到處晃,
就看到雪娘大姐美美的小屋,
還有教學文章!猛!
在下收藏哩!

01-19 17:08

38°C的雪娘
謝謝收藏哦 ^^01-20 22:07
北歐
這篇語法教學整理得很詳細豐富呢!
相當值得收藏喔!
感謝您!

01-22 05:17

38°C的雪娘
不客氣 ^^01-23 21:24
剪不斷理還亂
好讚的東西阿~打包回去研究

01-24 23:49

38°C的雪娘
歡迎 ^^01-30 17:32
茜紅葉
雖然還沒開始看,不過先學一下再說~~

01-28 23:28

38°C的雪娘
加油~
慢慢學習01-30 17:47
Vassago
怎摸半 我好笨
我還是不會

01-29 19:49

38°C的雪娘
@@
大大是哪個地方不會呢?01-30 17:50
快樂妄想
感謝!!

01-31 22:51

38°C的雪娘
不客氣哦 ^^02-27 21:05
Vassago
英文都看不懂
我是笨蛋

02-01 21:46

38°C的雪娘
@@
其實英文看不懂沒關係
教學都會在語法上加中文註明
這樣就不會搞混了~02-27 21:09

打包帶走慢慢研究>w<~

02-04 01:09

38°C的雪娘
歡迎~
要小菜嗎? XD02-27 21:15
............
感謝您的提供分享,很實用!!

02-05 13:14

38°C的雪娘
不客氣囉 ^^02-27 21:18
☆小黑豹
ㄎㄎ

02-10 14:32

st002
雪娘大
我又有新問題了
屋頂圖到底要怎麼用阿><

02-10 20:42

幸福御守
好慘~

看了一堆的教學文

結果發現愈看愈亂

一整個都亂掉~完全不知道要從哪開始= ="

努力整理中

02-12 11:23

  R_兔娘
整理的實在是太好了...(擦淚


吃雞皮補補身(?)

02-14 21:02


雪娘小屋右邊那一長條粉色的...
我自己研究好久就是沒輒不知道如何用
麻煩雪娘了...謝謝你...>"<

02-17 13:33

☆洛芙兒(.ܫ.*〞☆
發現好物!
打包帶走!
留下GP!
努力研究!

P.S:不知道腦殘的靈兒學的會嗎XD

02-20 13:02

茜紅葉
啊啊...學得非常勉強...到現在都還是拼裝屋一具(苦笑
這真的要有很多愛和很多耐心才造得出來呢~~

02-24 23:32

Tanuki
感謝分享! -///-b

02-25 10:56

Final Blue
最近正在煩惱~口~

03-02 16:27

カラス
就算素昧平生,我仍是佩服的五體投地……

03-06 21:07

伊露依
感謝分享,讓我有自已的風格的小屋^^。

03-10 20:45

捷運都是人
整理真棒

03-16 20:49

行飛
太讚了!

03-23 16:58

兒兒
超級謝謝大大的整理^^
看來自學CCS是沒問題了(大心)
不過,一切都要等考完QQ(大嘆)

03-25 21:40

兔兔
看起來好像不錯,有點心動了

04-09 08:10

亞黎〃思某無
收藏~

04-09 17:38

莉薇婭莞夢
我家分類改了。ˇ。///(灑花花)
所以連結會連不到喔~!

辛苦了~

04-14 21:40

那布勒斯控肉飯
太實用了,謝謝ㄉ ^^

04-25 09:53

飛~☆
★3Q大大~推1把~再收藏嚕^__________________^y~

04-30 21:27

熾燄蒼龍
讚讚讚 方便很多呢!!!

05-14 06:11

无所谓
小屋太漂亮拉,贊贊贊,分類很實用。

05-22 08:33


嗯嗯
我看不懂...
雪娘這個很好看呀...
應該以前不是菜鳥吧!!?

05-29 20:41

SaGaFrontier
雪娘的小屋好棒~

css感覺真複雜 - -"

<<<小屋苦手

06-08 23:40

午夜
甘謝~

06-10 18:22

巧克力會肥
推一個 A_A

06-19 15:17

dai小呆
好棒ㄡ><受益良多呢!!來去研究看看~呵呵!!

06-30 11:33

化外良民
感謝分享,請笑納!

07-05 13:04

水靜心
相當實用的資訊~感謝分享拉!

07-18 10:41

─═☆糖〃
看的好暈= ="

我沒有天份八=ˇ="

不過還是收京華+GP

07-22 09:56

─═☆糖〃
讚!!經典好文!!

07-22 09:57

血神の子.雷歐納德
恩恩!!.... 好!現在開始努力學習啦!(在頭上綁繃帶ing...)
請問一下會很難懂嗎? 怕昏死電腦桌前! >v<!XD!

08-02 16:33

羽蝶
感謝大大的教導喔
收藏回去慢慢研究
希望笨笨的我 可以學的會

08-14 08:58

Lacrimosa安魂彌薩
我要給GP!>///<

08-14 10:42

侍語花葬
最近正好要來用我的小屋
可是有很多不懂的地方
感謝大大的分享
要來慢慢研究了^^

08-16 11:48

藍色夜星
感謝分享

09-03 17:28

薩爾拉丁
好文推推推!!!

10-08 21:17

月見
收藏+1 ^^

12-04 20:30

ㄚ喵
感謝分享~

02-05 21:16

SININ
很實用喔@@

03-11 00:08

SININ
謝謝大大分享
努力研究中

03-11 00:09

潛水娘
好險我看到你這篇文章
對本身就在寫網頁語法我很有興趣
我現在也自己改出想要的佈置小屋囉!!

03-13 16:27

煞氣阿宇
謝謝你整理的資料
這樣就懂得如何佈置小屋了!!!

03-17 02:59

草莓
我喜歡這風格..^^

03-17 22:04

草莓
我喜歡這個風格..我會慢慢研究.^^

03-17 22:06

似是而飛v
感謝分享~~之前才正想研究說ˊˇˋ~
收藏起來慢慢看XD"

03-23 09:05

想い出して、あの頃...
感謝分享(=^‥^)/。・:*:・゚★,。・:*:・゚☆ ありがとニャ!
目前還看不懂@@??
先收藏起來慢慢研究...

04-27 20:58

音(`・ω・´)
收穫真大
謝謝大大:)

05-17 21:58

- Rhodo - 黑井 -
感謝介紹^3^

05-22 03:47

X
推推推

06-20 15:08

0分先生
good

07-01 09:41

莫凡
感謝分享

07-04 07:26

虎克˙白
大大你好棒~這篇真的好實用~XD
有空我也要來玩玩看~
那麼~感謝分享囉~XD

07-09 04:02

妹妹
只要有心就不難 對嗎??

07-14 13:03

BLACK
推~謝謝^^

07-17 19:01

永世アキラ
感謝大大的分享!XD

08-14 12:02

東風谷鏡
感謝分享!!!

09-16 16:04

布朗尼想怎樣
感謝分享囉

CSS這種東西對在下根本就是地獄(汗

09-16 16:28

GOT7
請問一下喔!
我自己太笨...
還是有一些不懂
我的小屋也可以換底色嗎?
我的是白色的
還有我的「小屋首頁」、「部落格」連結的按鈕顏色也是青藍色的
也可以換成別的顏色嗎?
謝謝你!

10-04 15:28

達克尼斯-奈特
嗯...之前是有聽過這玩意了0.0
我來試試看吧。

10-07 23:44

〥空空〃
打的很棒喔!!真是讓我又學到一課~~

10-13 19:22

秋落雨楓
謝謝摟><

10-18 22:04

夢蘿 -
對小屋的佈置總算是有點概念 -口-!

10-27 18:37

夜雨輕飄‧孤雲伴月
謝謝囉~~

現在先去把圖片找齊~

10-28 11:45

郭哥
大大太讚啦~!!

11-08 08:22

柳橙貓
推推 @~@
(偷偷收藏

11-16 21:20

管家。
想大大的改變我的小屋

12-10 20:49

萊特Light
我對同一個人只能對同一篇文章給一顆GP的限制感到厭煩........
這篇文章絕對不只8000個GP阿 囧 推

04-14 10:58

★沉月〃輪迴★
感謝.....
但我還是不會用>W<...
好複雜...(倒

04-19 22:39

風晏
( ̄▽ ̄)

06-08 18:43

芙姬
超優的~謝謝大大OˇO
老早就收起來了
雖然還是有點看不懂...ˊ_ˋ

09-22 16:03

神奈
雪娘可以向您請教一下CSS語法嗎?

因為我改2天還是一樣出問題,必須要高人指點>"<

09-28 07:36

我要留言提醒:您尚未登入,請先登入再留言

94喜歡★Duken 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:歡迎各位來雪娘屋哦~ 小... 後一篇:小屋還在弄啊?...

追蹤私訊

作品資料夾

fir0502紳士讀者
界域商門被檢舉黑名單,以後不在巴哈更新,請前往小屋推薦地點,觀看後續謝謝!看更多我要大聲說5小時前


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】