小屋創作

日誌2007-09-04 19:47

【小屋】CSS自訂版面:三、最上方顯示大圖篇

作者:莉薇婭莞夢

前言:<本文發表於2007/09/04 最後修改於2007/09/04 19:58 如語娃娃>
  以下內容可以對照「CSS自訂面板」的語法內容。
  ‧本篇僅提供顯示大圖篇,因為選單部份、選單與內文銜接部分將一次說明。
  ‧只要是有「#」後接著6個英數混合成的色碼──十六進位數值,第一組表示紅色數量、第二組表示綠色、第三組表示藍色──都可以不同的色碼替代原本的色碼,只是「#」不要忘記加了。
   例如:#FFFFFF(白色)可換成#b23535(咖啡紅),簡單取得色碼的方法
    1.參考巴哈小屋提供的色盤
    2.到日本網站的「原色大辭典(連結)」
  ‧說明文字會以「 /**/ 」包夾,「/**/其中的說明文字」以及「CSS編輯中空格跟空行」皆不會造成語法上的影響,可以放心留著。

───────────────────────────────────────────
───────────────────────────────────────────
/*-----------------------最上方顯示大圖-----------------------*/
.banner{
background: url(http://pic.bahamut.com.tw/HOME/92/head_indream228.JPG);
background-repeat:no-repeat;

/*背景圖不重複,重複樣式可參考之前的教學。*/
background-attachment: fixed;
/*背景圖浮水印,其實它在表格中不會動,可以不用加這個(笑)。*/
background-position:50% 100%;
/*背景圖放置的位置(X軸<越大越右方>,Y軸<越大越下方>)*/
/*基礎: top(向上對齊)、bottom(向下對齊)、lef(向左對齊)、right(向右對齊)、center(置中對齊)*/
/*進階:90% 90%(背景圖片x與y軸的位置)*/

height:200px;
/*表格的高度。無法設定寬度,原寬度設定已鎖。*/
padding-left:20px;
/*內文與表格左邊邊界的距離。可以以邊界距離來調整內文呈現的位置。*/
padding-top:2px;
/*內文與表格上邊邊界的距離*/
}
/*小屋上方主圖*/

.banner_t1{
color:#003322;

/*無連結效果的文字顏色「()」*/
font-weight:bold;
filter: Alpha(opacity=0);
height : 0px;

/*隱藏無連結效果的文字*/
}

.banner_t1 a:link,.banner_t1 a:visited,.banner_t1 a:hover{
color: #003322;
font-weight:bold;
text-decoration:inherit;

/*連結文字樣式,無效果。*/
filter: Alpha(opacity=0);
height : 0px;

/*隱藏有連結效果的文字*/
}
/*暱稱和帳號文字*/

.banner_t3{
color:#003333;
height:150px;

/*格子的高度,搭配文字的位置可以以此來拉開它和「暱稱與帳號」或下方「官階與稱號」間的距離*/
line-height : 20px;
/*設定當下文字的行高(不會影響到其他的文字),太小的話小心文字不見唷XD*/
text-align:right;
/*文字靠右對齊。其他:left文字靠左對齊、center文字置中對齊、justify文字分散對齊*/
vertical-align:text-top;
/*文字垂直向上對齊。bottom垂直向下對齊、middle垂直置中對齊、text-top文字垂直向上對齊、text-bottom文字垂直向下對齊*/
}
/*碎碎唸文字顏色*/
/*實際效果可參考我家的頂圖@ˇ@*/

.banner_t4{
color:#b23535;
}

/*顯示官階的文字顏色,沒什麼用啊這個設定@@…*/

.banner_t5{
color:#b23535;

/*顯示稱號的文字顏色*/
text-align:center;
padding-left:100px;

/*顯示稱號的文字,與左邊稱號圖章距離*/
padding-right:100px;
/*顯示稱號的文字,與右邊勳章距離*/
}

------
  有些人家的暱稱和稱號會在中間是調整邊界距離的結果˙ˇ˙
  不過,如果你有習慣用個人的碎碎念文字的話,這個功能就不太方便囉。
  不然就是參考「羅侯(helmet)」的聰明方式,將碎碎唸加到背景圖去。

───────────────────────────────────────────
───────────────────────────────────────────
對於本篇設定頂圖的後語:
  雖然拉開頂圖不是不好,不過屋主可能需要稍為考慮到訪客在觀看每一篇文章的方便性,因為頂圖是套用到每一區的,在頂圖過大的狀況下,會使訪客常常要拉畫面才看得到內文喔──週而復始之下,像我這種懶人會覺得有點……。
  頂圖的必要性或許在接下來講解到設定小屋區背景時,或許可以不用調那麼開,呵。

23

27

LINE 分享

相關創作

西北雨心得:電影《特技玩家》

香x無x腐~最倒楣又最幸運的愛

【劇透心得】【文學小說】強風吹拂

留言

開啟 APP

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

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