創作內容

119 GP

CSS-巴哈小屋教學

作者：夏日薔薇│2007-09-03 17:01:03│巴幣：19│人氣：21131

更多CSS教學請點我

想用CSS改造小屋，但是又不會css嗎?
快來喔~~只要跟我這樣做，你也可以自己設計自己專屬的小屋風格喔~
不懂的地方可以留言詢問^^

註:
height:為高度調整
background:為圖檔連結

文章標題及結尾框架

CSS修改如下
/*--------------------------框架------------------------------*/
.infom_bk{
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
padding-top:10px;
background:#000042
}/*小屋首頁－勇者資料區背景色*/
/*----外部大框架設定----*/
.category_title{
background:url(圖檔位置一)
height:80px; border:0px solid #CCCCCC border-left:0px solid #CCCCCC
}/*主標題一使用*/
.category_title2{
background:#000042;這邊也可以改成背景圖，只要將將:#000042;改成url(圖檔連結)即可
height:30px;
border:1px solid #CCCCCC
}/*主標題二以下使用*/
.category_word{
color:#E2F4B5;
font-size:28px;
font-weight:bold;
padding-left:300px;
padding-top:0px;
padding-bottom:2px;
}/*主標題文字設定*/
.category_bk{
background:#000042;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
padding:10px;
}/*內文的背景色*/
.category_footer{
background:url(圖檔位置二)
border-right:1px solid #CCCCCC;border-left:1px solid #CCCCCC;border-bottom:1px solid #CCCCCC;
height:50px;
}/*框架結束部分*/

小屋最上方圖檔高度設定

CSS修改如下
/*-----------------------最上方顯示大圖-----------------------*/
.banner{
background: url(http://pic.bahamut.com.tw/HOME/45/head_janeyang.JPG) repeat;
height:200px;
padding-left:20px;
padding-top:15px;
}/*小屋上方主圖*/

小屋主選單圖檔設定

CSS修改如下
/*---------------------------主選單---------------------------*/
.menu{
background:url(圖檔位置) no-repeat;
height:35px;
}/*選單背景圖*/
/*----選單所在頁面狀態----*/
.menuIN{
background:url(圖檔位置) no-repeat;
font-weight:bold;
color: #0055CB;
height:35px;
line-height: 35px;
text-align: center;
text-decoration: none;
}
.menuIN a:link,.menuIN a:visited{
font-weight:bold;
color:#0055CB;
height:35px;
line-height:35px;
text-align:center;
text-decoration:none;
}
/*----選單非所在頁面狀態----*/
.menuout {
font-weight:bold;
COLOR:#7C7C7C;
height:35px;
line-height:35px;
text-align:center;
text-decoration:none;
}
.menuout a:link,.menuout a:visited {
font-weight:bold;
color:#7C7C7C;
height:35px;
line-height:35px;
text-align:center;
}
.menuout a:hover {
background:url(圖檔位置) no-repeat;
font-weight:bold;
color:#0055CB; height:35px;
line-height:35px;
text-align:center;
text-decoration: none;
DISPLAY: block;
}

本篇會陸續新增內容

喜歡 119 收藏 524 引用留言推上首頁檢舉

引用網址：https://home.gamer.com.tw/TrackBack.php?sn=504174
All rights reserved. 版權所有，保留一切權利

相關創作

同標籤作品搜尋：|CSS教學|

留言共 146 篇留言

111：
推一個~=W=

09-03 17:07

查無此人：
丟丟丟～用ｇｐ丟你>///<

09-03 17:09

Beatrice：
寫的很讚，推一個！

09-03 17:15

JOe：
我推~

09-03 17:47

遺忘：
以前自己研究老半天越看越迷糊...
好多人都有寫教學，受益良多m(_ _)m

09-03 18:04

草莓番茄醬：
我也來推一個。
不推的話，就會有人像我一樣把小屋給弄爆XD
謎之聲：其實那是你不備份的報應吧～

09-03 19:13

蒼炎的凱特：
真的是不推會遭天譴阿XD~~

09-03 19:22

RYO：
對於不懂的人是超級好東西!推!

09-03 20:00

橘：
我再推>"<

09-03 20:21

千也紗：
謝謝你來到我滴小屋坐坐~~ ^^

09-03 21:01

冷焰封情：
好詳細唷@@
很用心的教學耶^^
收藏起來^^ 推一個!

09-03 22:45

クラリス：
夏日真有時間寫教學...( ′▽`)-oGP　

09-04 00:53

夏日薔薇：
板上和諧的時間就是我玩小屋的時間阿XD09-04 13:59

闇光：
好夢幻的風格，有點懷念小時後純真的時代了。☆

09-04 02:12

夏日薔薇：
^^09-04 13:58

幹發：
CSS跟CS有什麼關係?

09-04 11:54

夏日薔薇：
沒關係-.-09-04 13:56

昨日夢醒今日醉：
不好意思大人，我要打包回去慢慢看^///^~推

09-04 12:43

昨日夢醒今日醉：
不好意思大人~~

09-04 14:35

hallmark：
哎.... 果然是作業系統問題....

昨天去朋友的pc 上連一下看, 所有我看不到的圖全跳出來了 orz.....

看到這麼可愛的版,還想自己親手設計一個,最後發覺必須通過手機認證!!囧rz

我人在澳洲,怎手機認證啊T﹏T

看來我還是多多在貴版潛潛水算了

09-05 07:07

幽寰：
推推~~

09-05 07:30

藏鏡咪咪：
我也來幫推^O^

09-05 10:36

阿葉神：
圖文教學！好呀＞ｗ＜

收藏～

09-05 18:51

Mɢ「咚咚島真好玩」：
推呀~~
例外我問一下這篇教學主題我可以收藏起來嗎?

09-05 19:36

夏日薔薇：
可以^^09-05 20:04

亞：
大大，可不可以交一下小屋首頁部落格最新文章旁的內文圖片怎麼寫，寫在哪?
就像妳的小屋首頁一樣，先謝謝囉>_<

09-05 21:04

夏日薔薇：
妳會了呀XD09-06 10:50

亞：
恩恩，昨天終於知道了OTZ。

09-06 11:14

叫我鈺姊：
讚..

我要收藏回去慢慢消化一下

我只會html不會css啦~~(淚奔

09-06 16:55

看什麼!?咬你喔!!：
偷偷收起來...
感謝薔薇大的教學^^
等一下再來試做...QQ

09-07 12:59

雨凝：
收藏收藏..XD

09-07 20:48

Beautiful Things：
謝謝薔薇大的分享^^
請教個問題，那個標題(部落閣最新文章、最新收錄精華、好友創作記錄)等等這些標題...
這些文字如何去更改他的位置??
例如靠左、置中這樣...

09-08 19:57

夏日薔薇：
打開CSS找
/*----外部大框架設定----*/
找
.category_word{
color:#303030;<===標題顏色從這邊更改你要的顏色
font-size:15px;
font-weight:bold;
padding-left:325px;<===標題置中(值數幫你調整好了^^)
padding-top:0px;
padding-bottom:2px;
}/*主標題文字設定*/09-09 17:53

Beautiful Things：
呵呵..還有顏色@@
直接用巴哈佈置小屋的改會把我用掉的誇又出來
還有圖也會給我用不見..想說有沒有語法可以直接改@@?
真的非常感謝你^^

09-08 20:27

夏日薔薇：
佈置小屋跟自定面板不能同時使用
兩邊會相互排斥^^
請擇一使用喔
09-09 17:55

大蛇丸：
　　想請問一下關於您目前這個紫色的花瓣背景的這個區塊，是屬於那個區域的程式碼？

祝順心

大蛇丸

09-09 03:20

大蛇丸：
　　剛剛我問的問題我找到解答了，不過另外一點就是，如果您有空的話，能否來我的小屋看一下我的小屋，中間有一大堆白色的，該區域又是哪個區域的程式碼呢？該從哪邊去蓋掉他？

祝順心

大蛇丸

09-09 03:39

夏日薔薇：
語法丟出來了^^09-09 17:42

Doge To The Moon：
請問這一段...
----------------------------------------------------------------------

/*----外部大框架設定----*/
.category_title{
background:url(圖檔位置一)
height:80px; border:0px solid #CCCCCC border-left:0px solid #CCCCCC
}/*主標題一使用*/
.category_title2{
background:#000042;這邊也可以改成背景圖，只要將將:#000042;改成url(圖檔連結)即可
height:30px;
border:1px solid #CCCCCC
}/*主標題二以下使用*/
.category_word{
color:#E2F4B5;
font-size:28px;
font-weight:bold;
padding-left:300px;
padding-top:0px;
padding-bottom:2px;
}/*主標題文字設定*/
.category_bk{
background:#000042;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
padding:10px;

---------------------------------------------
(圖檔位置一)是否同時包含了部落閣最新文章、最新收錄精華、好友創作紀錄三個地方的底圖
不能夠三個部分的底圖各自設定嗎?

09-11 15:51

夏日薔薇：
是的~一次改三個= =
要分別不同底圖可能要另外寫進去才能改吧
也不知道巴哈有沒有限制@@~09-11 15:55

Doge To The Moon：
/*----外部大框架設定----*/
.category_title{
background:url(圖檔連結)
height:100px; border:0px solid #CCCCCC border-left:0px solid #CCCCCC
}/*主標題一使用*/
.category_title2{
background:url(圖檔連結)
height:100px;
border:1px solid #CCCCCC
}/*主標題二以下使用*/
----
請問我把height數字改變了，但是圖片為何沒變大?
另外.category_title跟.category_title2兩部分的圖檔連結有何不同

09-11 18:08

：
很讚的東西，多謝

09-12 22:48

深知：
十分感謝大大的提供慢慢研究

09-18 14:40

冬．狐：
好資料借收精華 ˇˇ

09-21 05:10

夜*闇羽：
是好物。

09-21 21:08

眠姬：
感謝指導~我推≧﹏≦

09-28 18:15

夏日薔薇：
偶問題可以隨時問喔XD09-28 18:54

艾洛：

收藏起來，謝謝哦^^

推一個！！

09-28 18:39

夏日薔薇：
^^09-28 18:54

彌生：
＝ｖ＝

09-28 19:46

美醬♥：
0.0好

09-28 20:06

月夜恋風：
不推會有天譴阿 !!

09-28 20:12

月夜恋風：
推 ~
不推　會有天譴呀！！

09-28 20:12

豪氣小雞：
高手...放假慢慢研究...我對這一竅不通說

09-28 20:14

嵐：
棒

09-28 20:47

死神：
我愛你-///-

09-28 20:49

死神：
我要收起來ㄌ-///-感恩...

09-28 20:50

蒼冷之月：
消化中~~
感謝你

09-28 20:55

物業經理人研修中：
感謝解答~~再加上我現在正在學CSS的應用~~!

09-28 21:26

武藤奈奈：
請問BLOG最後面的背景
怎麼放上自己喜歡的圖呢?
因為好像沒看到這段教學

09-28 21:54

夏日薔薇：
/*背景*/
BODY {
background-image: url(http:XXXXX.gif);
}09-29 13:07

捷運都是人：
感謝

09-28 22:15

PotatoChips：
-.-+ 整理的很詳細

09-28 22:39

°♀冰糖可樂♂°：
真的可以問嘛

我想請問大大耶
可是我不知道那個地方教作什麼

不知道大大可以點近來看嗎= =
就是我的小屋
那個好友創作那邊

他下方的大空白要怎麼用QQ

09-29 00:19

夏日薔薇：
把你的CSS原檔私信給我我幫妳看看^^09-29 13:12

潘朵拉：
感謝提供好文~供人鑑賞，大家的鼓勵將會是大大持續向上的原動力

09-29 05:05

比爾森：
好文章@@

09-29 16:30

白冬＊糟糕老廢渣：
不推對不起自己

09-29 21:15

武藤奈奈：
感謝妳我成功囉^^
我是貼到最上面那裡
我把這篇收藏起來囉

09-30 14:00

小糸むらさき：
必推~!

09-30 17:08

天宮的守衛：
感謝大大的教學我找了好久喔!==
我可能比較晚去了解這套版本
但沒關西!
還是讓我找到了
感謝喔!︿＆︿
　　　　　３　Ｙ
( ′▽`)-oGP　　　＋＋＋＋＋＋＋＋＋＋＋＋＋＋１

09-30 18:01

月遙：
大大~
還是有點不懂耶(小屋最上方圖檔高度設定)的部份
.
.
.
之前的被我一用竟然不見了！！
天啊~大大快救我＞＜

09-30 19:01

瘋狂熊：
真的不推不行了...

09-30 20:00

＊小糖兔＊：
^_^...

09-30 23:25

Tus：
受益匪淺，回禮兩座GP

10-01 01:10

龍影隨風：
感謝教學
請問大大一下~
小屋上方的背景圖是不是不能設定太高(我設定500 囧)
我的圖常常顯示不出來,還是空間問題?
我懶的去申請空間,直接用無名的,檔案很小才15k而已

10-01 02:57

夏日薔薇：
看來你好像把問題解決了^^10-01 13:43

水藍：
這個有點難....
收藏起來慢慢看....

10-01 13:04

龍影隨風：
大大~並沒解決啦
我是用別人網站的圖片@@
我自己還沒申請空間囧

10-01 14:20

夏日薔薇：
你的小屋上方圖的css與法+你的圖檔丟上來我幫你看看10-01 14:28

°♀冰糖可樂♂°：
大大
我有寄給你囉@.@
希望大大您抽空時後幫我看看^_^

10-01 23:13

夏日薔薇：
妳給我的css好像跟你目前的小屋css是不一樣的?10-02 19:29

Fei：
推推!!超實用的~

10-01 23:32

七葉一支花：
嘎哩A一下

10-02 09:57

°♀冰糖可樂♂°：
因為後來我補了滑鼠.連結跳動.(右選單背景&透明)有嗎?

我想問的就是為什麼好友創作那邊下方會是大空白
還是我要再寄一次呢>.<

補推推推..˙ˇ˙

10-02 22:19

夏日薔薇：
好像正常了-.-10-03 16:02

酷呆：
Good

10-03 10:38

°♀冰糖可樂♂°：
= =?

還是大大你有別的那個...
我寄圖片給你看="=

10-03 17:19

夏日薔薇：
啥@@?10-05 13:45

熾守玄兒：
感謝你

10-04 04:46

飄沄：

值得收藏

推～推～

10-04 22:08

巧靈：
在下愚魯，還是看不懂。

不過還是要推

10-04 23:21

墮落腐海の小兔子：
哇!!圖文教學耶
大大你太強了Q口Q
這篇一定是要幫推的>"<

我看的好開心喔...
這下可以更努力改造我的小屋
非常感謝！！！

PS.我可以收藏嗎?＠＠

10-05 22:03

野菜果汁：
這個也很好。

10-08 23:34

aa6622：
推推推～受用無窮～ＸＤ

10-10 11:36

公主‧公主：
讚!!

10-10 11:55

☆Destiny☆：
收藏下來啦^^
謝謝分享

10-19 17:37

紫苑：
謝謝

10-19 23:11

小魚：
太棒嚕~~

10-24 11:02

睡仙tom：
推推~~~

10-24 23:34

睡仙tom：
不錯的教學

10-24 23:35

居家型暗黑凶宅：
最近想玩玩看!我推!!

10-28 00:29

離翮：
Good>w<

10-29 10:06

輕輕：
good
先吃下來
再來慢慢消化
謝謝大大分享

10-29 17:27

幻~☆：
教學的好~

11-02 10:19

雪梅娘：
寫的太棒了^^

11-02 22:31

風楓瘋：
有妳這篇CSS教學讓我更加了解(還在努力學習中) 謝謝^^

11-04 00:33

卡歐斯：
大推薦~

11-05 03:13

道端の十円玉：
日本最高です！！

11-05 10:19

：
嗯，不錯哦

11-07 12:23

*~亞亞~*：
先打包起來收藏!!慢慢研究(剛看了一些CSS教學~發現真是神奇)
奉上GP~感激您的熱心教學!!

11-08 22:33

小牛牛公主：
非常感謝你提供的詳細教學法！

11-10 23:10

廢賢：
很有用的東西,非常感謝

11-13 21:19

大頭：
妳好

11-17 11:42

晴月 Hare Tsuki：
感謝大大無私的分享與教學<(_ _)>

某月受益良多

另外問大大一個問題

小屋最上面那兩邊

某月都無法變成黑色

是因為這個地方嗎?

div.rightTop {
background: #000000;
}

可是某月用了按確定後

巴哈都會直接將某月的div.rightTop 吃掉

請問是哪裡出問題呢?

如圖連結

不好意思，第一次就問您那麼多問題

如果不方面的話此篇大大可以不回應沒關係

感恩！

11-21 22:17

夏日薔薇：
應該是有兩個背景語法重疊到

把背景圖部分改成這樣
/*背景*/
BODY {
background-image: url(http://xxxxx.gif);
background-attachment: fixed;
}
/*全板背景*/
div.left {
background: none;
}
div.leftOut1{
background: none;
}
div.leftOut2{
background: none;
}
div.leftDown {
background: none;
}
div.right {
background: none;
}
{
background: none;
}
div.rightDown {
background: none;
}
div.container {
background: none;
}
div.main {
background: none;
}
div.mainOut {
background: none;
}
div.footer {
background: none;
}11-22 14:07

Jigang：
謝謝分享XD

11-22 10:53

晴月 Hare Tsuki：
我找到問題了

經過大大的解析

才發現原來是少了一個背景的語法= =|||

再次感謝大大無私的教學<(_ _)>

11-23 00:07

小Ｃｈｕ秋秋：
改天試試看
謝謝分享!

12-07 16:33

以殺悟禪：
謝謝你

12-07 20:21

和風散月：
感謝大大的分享，這樣一來，我終於可以拿CSS來改我的版面了(淚)

12-09 22:26

小啵：
我看不到圖片〒△〒

12-16 22:33

夏日薔薇：
圖被吃掉了= =12-17 12:41

混沌的六翼天使：
感謝你的教學

12-22 00:39

櫻桃漾漾：
收下嚕>\\\<正在找一大堆語法斗

01-03 10:17

泡澡真蘇胡~：
（￣▽￣）y

01-05 18:26

*~飄飄娃~*：
我想問一下我改了右下綠色標點的圖但是底色是白色的...我想用黑色的要怎麼改
這是我設的語法...
.post_list{
BACKGROUND:url(http://materialland.ckza.com/material172ck/other_plant/materialland_032.gif) no-repeat;
}
還有想問的是回應的分格線我想改成圖片...但是我的圖都出不來..請幫我看看我哪裡設錯了
}/*個人部落閣文章版主回應分色線*/
這是我設的語法
.article_hr{
border:0px;
background-color:#000000;
background:url(http://img456.imageshack.us/img456/8029/00714sp.gif);
height:16px;/*圖片高度*/
麻煩哩了.....

01-14 11:27

夏日薔薇：
右下綠色標點的圖是圖檔的關係因為你那個星星底色是白的所以呈現出來的也會是白的

回應的分格線
background-color:#000000;
background:url(http://img456.imageshack.us/img456/8029/00714sp.gif);
妳這邊重覆到了
把background-color:#000000;<==這個拿掉試試01-14 18:48

*~飄飄娃~*：
background-color:#000000;
這個我拿掉了還是一樣圖出來是一條白白的...

01-16 10:57

夏日薔薇：
打開妳的自定CSS
由下往上找到/*----個人精華區----*/
把
.article_hr{
到
}/*個人部落閣文章版主回應分色線*/

兩者之間的語法修改成這樣
.article_hr{
border:none;
background:url(http://img456.imageshack.us/img456/8029/00714sp.gif);
height:26px;
color:url(http://img456.imageshack.us/img456/8029/00714sp.gif);
}/*個人部落閣文章版主回應分色線*/
/*----個人精華區----*/01-16 19:45

*~飄飄娃~*：
YA!!真是非常的謝謝哩....我終於用好ㄖ...
送哩GP要接住唷.....*ˇ*

01-17 11:38