創作內容

14 GP

【小屋】CSS自訂版面:進階─GP、BP,妳們變了!(註:資料顯示圖)

作者:莉薇婭莞夢│2007-09-16 13:26:07│贊助:0│人氣:2776
<本文發表於2007/09/16 最後修改於2007/09/20 12:19 如語娃娃>

  若要轉載、衍伸教學,請註明出處ˋˇˊ
  靈感來源「毀滅者(yannan1)」家的圖,加上自己瞎矇找語法,不過和他的方式不一樣啊,需要在看看呢。

  修改、設計方式有很多,這邊我只列出我個人修改呈現的方法。

-----------------------------------
-----------------------------------
  這邊的圖也就是勇者資料區的區塊之ㄧ,原本的樣子。(範例是隨意取的)
  

  通常只要使用近黑背景就會變成怪怪紅點(紅暈)、藍點(淚痕)。
  

  而這是我修改過後的。
  


1、準備圖片
 ‧首先想改圖就要付出一點手動合圖或繪圖的代價,
  欄位的基本寬高:寬250高24
 ‧若是你懶得製作,不然簡單點,一張圖也行。
  (只是圖會因為欄位不夠高或寬而被截圖XD)
2、增加語法
‧建議將語法置於「CSS自訂版面:五、小屋封面圖&勇者基本資訊和能力表篇」所指到的↓
  /*--------------------勇者基本資訊和能力表--------------------*/
  /*------------評價區底色------------*/
 之下。
‧增加的語法如下:
/*GP、BP顯示圖隱藏*//*如果想隱藏圖片這邊加上去即可*/
.ability_pad img{
display:none;}
  -----感謝凡斯的指導-----
   如果您使用
    .ability_pad img{
    border:none;
    height: 0px;
    ;}
   就可以不用接著第3步驟的修改。
  -----------------

/*設定GP、BP區塊的背景*/
.ability_pad{
background-color:none; /*無背景色*/
background-image : url(http://); /*背景圖址*/
background-repeat:no-repeat;} /*背景圖不重複*/

‧增加語法後,會發現顯示GP(BP)數值的框框自動變寬了,如果,您覺得無所謂,可以忽略以下的修改。
(自我修改的過程中無法自定數值框的寬度,可能需要請懂的人有興趣得話研究一下ˊˇˋ)
3、修改掉數值的邊框
 ‧請找到同區的「.ability」這部份的語法
 ‧將「BORDER」設定成「0px」,即可。
  「BORDER:0px solid;」
 ‧如果以後想加邊框,這邊在設定上去就好。
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=949999
All rights reserved. 版權所有,保留一切權利

相關創作

同標籤作品搜尋:|版面設計|勇者小屋|教學|CSS|

留言共 23 篇留言

花兒朵朵開
設計師,我家的驗證碼還沒完成捏= =

屋屋

09-16 13:38

莉薇婭莞夢
聽說火狐看是正常的...
我可能要把某句語法拿掉...

一直沒弄懂為什麼=.=09-16 13:46
林鴻鈞
MM真的好強喔....有耐心的說
讚一下

09-16 13:40

莉薇婭莞夢
謝謝>///<09-16 13:47
水野天成
哇~~~
好酷喔@@
妳真的是把巴哈的小屋玩到一個極致了XD

09-16 13:41

莉薇婭莞夢
是極致啊XD~
好像也沒啥鬼可以改了@@...09-16 13:47

呵呵~
看來娃娃要把整間小屋都拆了重蓋...

09-16 14:01

莉薇婭莞夢
沒有整間ˊˇˋ
像只想改掉右邊的廣告,巴哈卻把語法吃掉了Q口Q

謝謝推推XD

我好餓ˊˋ……
考慮晚上吃一天的份還是現在吃兩餐的份……09-16 14:13
小綠兒
真不錯呢!

我想問大大 主選單下面有一條藍色的

請問該怎麼去掉呢?

09-16 14:05

莉薇婭莞夢
照以下的作法XD

/*-------------------------------次選單-------------------------------*/
/*----------無次選單狀態----------*//*訪客瀏覽時看得到,藍白的分隔線就是這邊設定*/
/*次選單與主選單連接部分*/
.menubarA1{
background:none; /*無背景設定。要設定也可以自行調整。*/
border:0px;
height:0px; /*表格無高度,如果您想設定什麼背景,這邊就要調整高度唷。*/
}

/*次選單結束部分*/
.menubarA2{
height:0px; /*高度依需要調整*/
}

/*----------有次選單狀態----------*//*屋主瀏覽時看得到*/
/*說真的如果您很介意自己登入自己的小屋時和訪客瀏覽時一樣,這邊在設定即可。設定方式與無選單的設定雷同。*/

/*次選單與主選單連接部分*/
.menubarB1{
background:none;
border:0px;
}

/*放次選單按鈕的背景色*/
.menubarB3{
background:;
border:0px;
padding:6px;
text-align:left;
}

/*次選單結束部分*/
.menubarB2{
height:0px;
}09-16 14:15
花兒朵朵開
感動XD

設計師果然很厲害

09-16 14:09

莉薇婭莞夢
是毀滅者大大跟我說的XD~09-16 14:17
Beatrice
( ̄▽ ̄)y 這個好玩

09-16 14:19

莉薇婭莞夢
有想改的話就試試吧XD09-16 14:38

現在吃一點..
晚上吃一點..
這樣對身體比較好...
也比較不易胖...
呵呵

09-16 14:23

莉薇婭莞夢

好吧 吃ㄧ下XD09-16 14:41
小綠兒
謝謝你的回答^^

我還想再問一個問題

請問收藏旁邊的收藏人數

要怎麼改呢?

09-16 15:17

莉薇婭莞夢
在這裡@@↓

/*----------------------各文章列表區(下方)----------------------*/
/*------------個人精華區-----------*/
/*收藏人數文字顏色和底線框色*/
.elite_ppl{
color:#49A1B3;
font-weight:bold;
font-size:12px;
border:1px solid #9A9A9A;
background-color:#FFF;
}09-16 17:37
林鴻鈞
三條線... = =||

09-16 15:32

莉薇婭莞夢
嘎?
為什麼?09-16 17:37
38°C的雪娘
大大的教學真是太棒了
可惜這功能Firefox無法顯示圖片
就等日後的解決方法囉~

不管怎樣還是很高興可以修改更多的東西~

09-16 16:23

莉薇婭莞夢
無法顯示圖片……
沒玩過XD"

很高興讓你多知道一點˙ˇ˙09-16 17:38
小綠兒
謝謝你的幫忙^^

再送你一個推推

09-16 18:33

莉薇婭莞夢
謝謝你的熱心XD

不過推文一篇好像只能推一次唷XD09-16 20:01
逆時雨
感謝教學 又知道了一個能改的地方( ̄▽ ̄)

09-16 19:23

莉薇婭莞夢
知道一個地方
所以
又改了一個地方XD09-16 20:02
毀滅者
其實這在無意中發現的啦!
原本是要把小屋圖的外框拿掉只留底圖的,
結果沒想到.infom_bk有兩個,
而本來是想在.infom_bk後加個img試試看的,
結果竟然在那兩個圖那裡看起來感覺也不錯,
所以就這樣玩起來了,
沒想到沒搞出去外框的方式,
而試出了改gp bp背景圖的方法了。

其實我用的那個圖是巴哈內定的小屋主圖,
只不過加上某些方法後竟然會變成這樣‧‧‧

.infom_bk img{
background:url(http://pic.bahamut.com.tw/home/cover_pic.gif) right;
}/*小屋首頁-勇者資料區背景色*/

09-16 22:29

莉薇婭莞夢
呵呵~
感覺很好玩XD
簡單說也是幫表情圖換臉吧(笑)09-20 12:22

哇~原來這個也可以改XD
如語大果然好厲害>///<
可以改的東西越來越多了~^O^(啊..."要"改的東西也越來越多了:P)
感謝如語大~^O^
也感謝樓上的毀滅者大~^^

09-16 23:14

莉薇婭莞夢
慢慢來~會玩出屬於自己的風格的XD09-20 12:22
letmedo
連這個都可以改~~看來不得不佩服你了~~大師^_^

09-18 07:22

莉薇婭莞夢
我是小師
也是有貴人相助呀~~~09-18 08:44
凡斯~イカ給你洗了唷
在這一部分如果單純把高度調成0px

.ability_pad img{
border:none;
height: 0px;
;}

那原本的笑臉哭臉就會因為沒有高度而消失
而且也不會因此因為把整個圖檔消去而產生GP BP框架跑衛的狀況

就可以直接把圖放上去了

09-19 02:16

莉薇婭莞夢
0.0!
感謝XD~~~09-19 20:56
順其自然。
不錯捏XD...
如語大~太讚勒~
應該說自己太遜啦XD
呵呵...>///////<

10-09 21:07

莉薇婭莞夢
慢慢來~˙ˇ˙10-10 09:45
小桔
謝謝分享

11-16 19:35

奸仔蘭˙華麗閃耀
如語大
我在貼一般圖的時候沒問題
但是貼我的改圖~
http://farm3.static.flickr.com/2407/2055298380_abac0da147_o.jpg
卻是一片空白
這是為什麼啊@@
GP圖的大小可以改行高
所以應該與大小無關@@

11-23 06:11

莉薇婭莞夢
蘭,請讓我看看您的語法,
如果因為維修還看不了的話,就等之後吧。11-24 17:50
奸仔蘭˙華麗閃耀
喔喔~
謝謝如語大大
那麼我把我的語法寄到你的信箱喔
感謝你^^"

11-24 21:04

莉薇婭莞夢
蘭~
我還沒收到信喔11-25 22:03
我猜
good

01-11 10:58

☆洛芙兒(.ܫ.*〞☆
改好了>0<

感恩<(_ _)>

02-29 12:04

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

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

前一篇:【小屋】CSS自訂版面:... 後一篇:【小屋】我家落落長的CS...

追蹤私訊

作品資料夾

JRmiss全部的人
我想我需要大家的幫助,我有些問題想問大家看更多我要大聲說昨天10:58


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

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