日誌2007-09-16 13:26

【小屋】CSS自訂版面：進階─GP、BP，妳們變了！（註：資料顯示圖）

＜本文發表於2007/09/16　最後修改於２００７／０９／２０　12：19　如語娃娃＞

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

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

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
　　這邊的圖也就是勇者資料區的區塊之ㄧ，原本的樣子。（範例是隨意取的）
　　

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

　　而這是我修改過後的。
　　

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

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

‧增加語法後，會發現顯示ＧＰ（ＢＰ）數值的框框自動變寬了，如果，您覺得無所謂，可以忽略以下的修改。
（自我修改的過程中無法自定數值框的寬度，可能需要請懂的人有興趣得話研究一下ˊˇˋ）
３、修改掉數值的邊框
　‧請找到同區的「.ability」這部份的語法
　‧將「BORDER」設定成「0px」，即可。
　　「BORDER:0px solid;」
　‧如果以後想加邊框，這邊在設定上去就好。

14

23

LINE 分享

相關創作

第三章 方緣操作手冊

[達人專欄] 【Godot Plugin】幫你的遊戲加入對話系統 —— Dialogic 2

Anya Melfissa - 口說練習的秘訣

留言

• 2007-09-16 13:38花兒朵朵開：
  設計師，我家的驗證碼還沒完成捏= =
  
  屋屋

  2007-09-16 13:46莉薇婭莞夢：聽說火狐看是正常的...
  我可能要把某句語法拿掉...
  
  一直沒弄懂為什麼=.=

• 2007-09-16 13:40林鴻鈞：
  MM真的好強喔....有耐心的說
  讚一下

  2007-09-16 13:47莉薇婭莞夢：謝謝>///<

• 2007-09-16 13:41水野天成：
  哇~~~
  好酷喔@@
  妳真的是把巴哈的小屋玩到一個極致了XD

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

• 2007-09-16 14:01侯：
  呵呵~
  看來娃娃要把整間小屋都拆了重蓋...
  

  2007-09-16 14:13莉薇婭莞夢：沒有整間ˊˇˋ
  像只想改掉右邊的廣告，巴哈卻把語法吃掉了Ｑ口Ｑ
  
  謝謝推推ＸＤ
  
  我好餓ˊˋ……
  考慮晚上吃一天的份還是現在吃兩餐的份……

• 2007-09-16 14:05小綠兒：
  真不錯呢!
  
  我想問大大 主選單下面有一條藍色的
  
  請問該怎麼去掉呢?

  2007-09-16 14:15莉薇婭莞夢：照以下的作法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;
  }

• 2007-09-16 14:09花兒朵朵開：
  感動XD
  
  設計師果然很厲害

  2007-09-16 14:17莉薇婭莞夢：是毀滅者大大跟我說的XD~

• 2007-09-16 14:19Beatrice：
  （￣▽￣）y 這個好玩

  2007-09-16 14:38莉薇婭莞夢：有想改的話就試試吧ＸＤ

• 2007-09-16 14:23侯：
  現在吃一點..
  晚上吃一點..
  這樣對身體比較好...
  也比較不易胖...
  呵呵

  2007-09-16 14:41莉薇婭莞夢：唔
  好吧　吃ㄧ下ＸＤ

• 2007-09-16 15:17小綠兒：
  謝謝你的回答^^
  
  我還想再問一個問題
  
  請問收藏旁邊的收藏人數
  
  要怎麼改呢?

  2007-09-16 17:37莉薇婭莞夢：在這裡＠＠↓
  
  /*----------------------各文章列表區(下方)----------------------*/
  /*------------個人精華區-----------*/
  /*收藏人數文字顏色和底線框色*/
  .elite_ppl{
  color:#49A1B3;
  font-weight:bold;
  font-size:12px;
  border:1px solid #9A9A9A;
  background-color:#FFF;
  }

• 2007-09-16 15:32林鴻鈞：
  三條線... = =||

  2007-09-16 17:37莉薇婭莞夢：嘎？
  為什麼？

• 2007-09-16 16:2338°C的雪娘：
  大大的教學真是太棒了
  可惜這功能Firefox無法顯示圖片
  就等日後的解決方法囉~
  
  不管怎樣還是很高興可以修改更多的東西~
  
  

  2007-09-16 17:38莉薇婭莞夢：無法顯示圖片……
  沒玩過ＸＤ＂
  
  很高興讓你多知道一點˙ˇ˙

• 2007-09-16 18:33小綠兒：
  謝謝你的幫忙^^
  
  再送你一個推推

  2007-09-16 20:01莉薇婭莞夢：謝謝你的熱心XD
  
  不過推文一篇好像只能推一次唷XD

• 2007-09-16 19:23逆時雨：
  感謝教學 又知道了一個能改的地方(￣▽￣)

  2007-09-16 20:02莉薇婭莞夢：知道一個地方
  所以
  又改了一個地方XD

• 2007-09-16 22:29毀滅者：
  其實這在無意中發現的啦！
  原本是要把小屋圖的外框拿掉只留底圖的，
  結果沒想到.infom_bk有兩個，
  而本來是想在.infom_bk後加個img試試看的，
  結果竟然在那兩個圖那裡看起來感覺也不錯，
  所以就這樣玩起來了，
  沒想到沒搞出去外框的方式，
  而試出了改gp bp背景圖的方法了。
  
  其實我用的那個圖是巴哈內定的小屋主圖，
  只不過加上某些方法後竟然會變成這樣‧‧‧
  
  .infom_bk img{
  background:url(http://pic.bahamut.com.tw/home/cover_pic.gif) right;
  }/*小屋首頁－勇者資料區背景色*/

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

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

  2007-09-20 12:22莉薇婭莞夢：慢慢來~會玩出屬於自己的風格的XD

• 2007-09-18 07:22letmedo：
  連這個都可以改~~看來不得不佩服你了~~大師^_^

  2007-09-18 08:44莉薇婭莞夢：我是小師
  也是有貴人相助呀～～～

• 2007-09-19 02:16凡斯~秀柱秀之呼吸：
  在這一部分如果單純把高度調成0px
  
  .ability_pad img{
  border:none;
  height: 0px;
  ;}
  
  那原本的笑臉哭臉就會因為沒有高度而消失
  而且也不會因此因為把整個圖檔消去而產生GP BP框架跑衛的狀況
  
  就可以直接把圖放上去了
  
  

  2007-09-19 20:56莉薇婭莞夢：0.0！
  感謝XD~~~

• 2007-10-09 21:07順其自然。：
  不錯捏XD...
  如語大~太讚勒~
  應該說自己太遜啦XD
  呵呵...>///////<

  2007-10-10 09:45莉薇婭莞夢：慢慢來~˙ˇ˙

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

  2007-11-24 17:50莉薇婭莞夢：蘭，請讓我看看您的語法，
  如果因為維修還看不了的話，就等之後吧。

• 2007-11-24 21:04奸仔蘭˙華麗閃耀：
  喔喔~
  謝謝如語大大
  那麼我把我的語法寄到你的信箱喔
  感謝你^^"

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

• 2008-01-11 10:58我猜：
  good
• 2008-02-29 12:04☆洛芙兒(．ܫ．*〞☆：
  改好了>0<
  
  感恩<(_ _)>

• 送出