創作內容

50 GP

整體CSS語法簡單教學

作者:HARU 南草靖│2008-03-16 16:24:25│贊助:62│人氣:10444
文字撰寫、圖片製作:KAEDE–嵐(wsp86145)

【部分資料參考:如語娃娃(indream228)異(u4)兔(sindsiona)

--

整體CSS語法簡單教學(Flash網路版)

--
因CSS修改區域過多,以下為目次簡圖,請善用瀏覽器搜尋功能搜尋(Ctrl+F)方便查看:

◎圖層
 └【注意事項】
◎主圖(上)相關設定
◎主選單按鈕設定
 ├《橫式選單》
 ├《直式選單》
 └《次選單框線》
◎主圖(下)相關設定
◎勇造相關修改
◎資料區框架相關設定
◎背景設定(div.left)
◎背景設定(body)
◎標題設定、文中設定
 ├《標題設定》
 └《文中設定》
◎標底設定(框架結束部分)
◎整體文字、部落格文字設定
 ├《整體文字設定》
 └《部落格文字設定》
◎右短標題、人氣曲線圖設定
 ├《右短標題設定》
 └《人氣曲線圖設定》
◎右短標題內容、項目符號設定
 ├《右短標題內容設定》
 └《項目符號設定》
◎按鈕設定
◎背景設定(div.footer)
◎部落格設定
 ├《部落格標題設定》
 ├《留言區設定》
 └《頁數按鈕設定》
◎捲軸設定

--

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎圖層

在講解小屋製作之CSS之前,先了解目前小屋的圖層架構:

■ 若在下本篇不清楚,亦可參考[如語娃娃(indream228)]之[【小屋】CSS自訂版面:進階─修改中間背景篇]此篇文章。

▼圖一

  巴哈小屋架構共分有「div.main」、「div.left」、「div.footer」、「div.right」、「div.container」等等,總共五個圖層。另外,除了上述五種圖層以外尚有基底圖層,也就是「Body」。
  目前大家最常看見的小屋佈置,就是把巴哈原來預設的小屋圖片改為自己上傳網頁空間的版面元件圖片。然而覆蓋或取代原來預設的小屋圖片之後,自己想要的小屋圖片要放在哪些圖層?據個人所悉,最常使用到的圖層是「div.left」、「div.footer」和「Body」這三者。
  或許不少人會想瞭解到底要怎麼才能掀屋頂而達到整套的小屋佈置,在此還是一樣不會提供教學,為避免不熟悉CSS操作而造成版面或系統破壞之前提,敬請有心要學的另尋高手私下教導。
  除了基本的圖層以外,亦須知道其他地方CSS代表修正哪裡,可以在巴哈設定的地方查詢:http://home.gamer.com.tw/homeSetIntro.php

--

【注意事項】
 ●要CSS修改之前請務必將CSS做備份,以免失敗不得恢復。
 ●以下教學語法為漸進式修改CSS,亦可單獨修改部分CSS。
 ●。。。 。。。←此分隔線之中CSS語法為「原始語法」,【說明】才會有修改相關設定。
 ●‧‧‧ ‧‧‧←此分隔線之中CSS語法才是「加入語法」。
 ●搜尋語法時,請注意可能會多一個半形空白鍵就造成搜尋不到。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎主圖(上)相關設定

▼圖二

  目前所要調整之主圖(上)的地方是圖二裡面綠框圈選處。我們要將它加高並且讓原預設的圖片消失。
  請用搜尋功能搜尋「.banner{」。

這是11週年慶巴哈小屋預設原始碼:
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。
/*----------小屋上方主圖---------*/
.banner{
background:url(http://pic.bahamut.com.tw/home/theme/750b.gif) repeat;
height:120px;
padding-left:25px;
padding-top:15px;
}
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。

【說明】
 (1) 若要將圖片不見,有很多種方法,不過避免資料不正確,請將「background」此行語法
   設為『background:transparent;』或是『background:none;』,表示這地方沒有圖片。
  △「transparent」表示物為透明;「none」表示沒有存在。
 (2) 倘若要把原來的預設圖改為自己喜愛的圖片,請在「background」此行語法做設定:
   『background:url(圖片連結) repeat;』。
  △「repeat」表示框架的高度大於圖片大小,圖片會自動反覆填滿;若不重複圖片則設定為『no-repeat』。
 (3) 如果想要把它加高跟圖片一樣高度的話,在「height」的地方中做設定。
   如圖片高度是250pixels:『height:250px;』。
 (4) 暱稱帳號、小屋碎碎唸、稱號勳章三列文字之設定:
   「padding-left」表示自左基準線向右距離為多少pixels(數字愈大愈偏右);
   「padding-top」表示自上基準線向下距離為多少pixels(數字愈大愈偏下)。

▼參考結果

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎主選單按鈕設定

▼圖三–1

  目前所要調整的地方是圖三裡面紅框圈選處。(不過例圖是11週年的小屋)
  請用搜尋功能搜尋「.menu{」。

--
《橫式選單》
這是巴哈小屋預設原始碼:(非巴哈11週年小屋)
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。
/*---------------------------主選單---------------------------*/
.menu{
background:url(http://pic.bahamut.com.tw/home/menubar.gif) no-repeat;
height:35px;
}/*選單背景圖*/
/*----選單所在頁面狀態----*/
.menuIN{
background:url(http://pic.bahamut.com.tw/home/menu_in.gif) 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(http://pic.bahamut.com.tw/home/menu_in.gif) no-repeat;
font-weight:bold;
color:#0055CB; height:35px;
line-height:35px;
text-align:center;
text-decoration: none;
DISPLAY: block;
}
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。

【說明】
 (1) 可在「.menuout a:hover {」的上方標註「/*----移入所在選單狀態*/----」。
 (2) 如不想要主選單之橫向圓弧框底圖,將「.menu{」之「background」設定為
   『background:transparent;』或是『background:none;』。
 (3) 更換按鈕圖方式一樣更改「background」之「url:(http://);」括號內的圖片連結即可。
 (4) 「color」代表連結文字顏色,如黑色則設定為:『color:#000000;』。

▼參考結果

--
《直式選單》
■ 若在下本篇不清楚,亦可參考[異(u4)]之[【CSS】直立式選單寫法]此篇文章。
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。
/*---------------------------主選單---------------------------*/
.menu{
background:transparent;
border:none;
position:relative;
top:-53px;
left:-300px;
width:150px;
height:20px;
}/*選單背景圖*/
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。

【說明】
 (1) 「top」代表選單自上基準線向下距離為多少pixels(數字愈大愈偏下);
   「left」代表選單自左基準線向右距離為多少pixels(數字愈大愈偏右);
   「width」表示選單的表格寬度為多少pixels(數字愈大愈分開)。
 (2) 若要調整選單的上下文字距離,請在主選單裡分別在「.menuIN{」、「.menuIN a:link,.menuIN a:visited{」、「.menuout {」、「.menuout a:link,.menuout a:visited {」及「.menuout a:hover {」當中找到「line-height」做設定。
   如預設的『line-height:35px;』,數字愈小上下文字距離愈擠。
 (3) 若欲在選單做框線,可加入:「border-left:1px solid #顏色色碼;」、
   「border-right:1px solid #顏色色碼;」、「border-top:1px solid #顏色色碼;」、
   「border-bottom:1px solid #顏色色碼;」。
  △「left」表左邊;「right」表右邊;「top」表上方;「bottom」表下方;
   「solid」代表實線,亦可更改為虛線『dashed』。

▼參考結果

--
《次選單框線》

▼圖三–2

  如上圖,假若是巴哈預設的小屋佈景,會有藍灰色相漸的兩條橫線,要怎麼把它改掉呢?
  請用搜尋功能搜尋「.menubarA1{」。

這是巴哈最原始佈景小屋語法:
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。
/*----無次選單狀態----*/
.menubarA1{
background:#AFE8F0;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:0px;
border-bottom:1px solid #5CBAC8;
}/*次選單與主選單連接部分*/

.menubarA2{
background:#EBEBEB;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:0px;
border-bottom:0px;
}/*次選單結束部分*/

/*----有次選單狀態----*/
.menubarB1{
background:#AFE8F0;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:0px;
border-bottom:0px;
}/*次選單與主選單連接部分*/

.menubarB3{
background:#D8F1F4;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-top:0px;
border-bottom:1px solid #5CBAC8;
padding:6px;
text-align:left;
}/*放次選單按鈕的背景色*/

.menubarB2{
background:#EBEBEB;
}/*次選單結束部分*/
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。

【說明】
  (1) 請將以上部份所有「background」改為『background:transparent;』。
  (2) 請將以上部份所有「border」改為『border:none;』或者此行都刪除。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎主圖(下)相關設定

▼圖四

  目前所要調整之主圖(下)的地方是圖二裡面藍框圈選處。可將它原預設的圖片以及灰外框都消失。
  請用搜尋功能搜尋「.cover_pic{」。

這是11週年慶巴哈小屋預設原始碼:
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。
.cover_pic{
background:url(http://pic.bahamut.com.tw/home/theme/610b.gif) repeat;
}/*COVER圖*/
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。

【說明】
 (1) 將圖片消失一樣的方法:「background」設定為『background:none;』。
 (2) 將灰色外框蒸發的方法:鍵入『height:0px;』此行語法即可。

▼參考結果

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎勇造相關修改

  這應該不需要我做例圖吧?但這地方建議不要去隱藏會比較好。
  請用搜尋功能搜尋「.apprise_bg{」(評價區底色分類)或任一處加入以下語法:
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧
.infom_bk img{display:none;}
.infom_bk A{display:none;}
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧

【說明】
 (1) 「.infom_bk img{display:none;}」表示將勇者造型圖片、GP;BP圖、線狀圖隱藏。
 (2) 「.infom_bk A{display:none;} 」表示將前往勇造相本、能力及屬性說明的連結按鈕隱藏。
 (3) 若為任一處加入語法時,敬請善用『/*註解內容*/』的方式標註以免忘記。
 (4) 因為涉及GP;BP圖、線狀圖被隱藏(剩單線),故設定語法時請三思。

▼參考結果

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎資料區框架相關設定

▼圖五

  請用搜尋功能搜尋「.infom_bk{」。

這是11週年慶巴哈小屋預設原始碼:
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。
/*小屋首頁-勇者資料區背景色*/
.infom_bk{
border-left:1px solid #3D3836;
border-right:1px solid #3D3836;
padding-top:12px;
padding-bottom:10px;
background:#ffffff;
}
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。

【說明】
 (1) 「border-left」、「border-right」表示左框線及右框線,若不需框線可此行刪除。
 (2) 「padding-top」、「padding-bottom」文字內容與上下部份相距多少pixels。
 (3) 倘若不要白底當背景,可更改顏色或將「background」設定成『background:none;』即為透明無底。

  現在將框線、白底取消後,會變得非常不好看,我們來一一講解:

▼參考結果(一)

【說明】
 (1) 框線:
   ⊙搜尋「.box1{」。
   ⊙將「.box1{」、「.box_title{」、「.box_list1{」、「.box_list2{」之「border」、「background」及「background-color」皆不設定。(刪除或設定為none)
 (2) 數值:
   ⊙搜尋「.ability{」。
   ⊙「background-color」設定為『background:none;』即透明無底。
   ⊙以下是11週年慶巴哈小屋預設原始碼:(不需框線即設定none或刪除)
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。
/*--勇者各素質區*/
.ability {
background-color:#FFF;
BORDER-RIGHT:#969696 2px solid;  ←右邊框線設定
BORDER-TOP:#bfbfbf 1px solid;   ←上方框線設定
BORDER-LEFT:#bfbfbf 1px solid;   ←左邊線設定
BORDER-BOTTOM:#969696 2px solid;   ←下方線設定
PADDING-RIGHT:4px;   ←文字距右多少pixels
PADDING-LEFT:4px;   ←文字距左多少pixels
PADDING-BOTTOM:1px;   ←文字距下多少pixels
PADDING-TOP:1px;   ←文字距上多少pixels
LINE-HEIGHT:14px;   ←行高多少pixels
HEIGHT:0pt;   ←高度多少pt
TEXT-ALIGN:center;   ←文字置中對齊
TEXT-DECORATION:none;   ←文字字型樣式
}
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。

   ⊙若要新增或更改GP、BP圖,請搜尋「.ability_pad{」。
   ⊙這地方分有兩種狀況分為不同作法:
    【情況一】已設定『.infom_bk img{display:none;}』將勇造等圖都隱藏時,
         請直接在「.ability_pad{」加入『background:url(圖片連結);』。
    【情況二】未設定『.infom_bk img{display:none;}』時,
         請在「.ability_pad img{」加入『height:0px;』此行語法,
         再加上『background:url(圖片連結);』換上自己做好的GP、BP圖片。
         (GP、BP圖片維度約250╳25)
 (3) 好感度圖:
   ⊙搜尋「.apprise_bg{」。
   ⊙圖片設定即『background-image:url(圖片連結);』(圖片維度175╳105)
 (4) 標底:
   ⊙搜尋「.category_footer{」。
   ⊙取消標底『background:none;』。
   ⊙取消標底的高度『height:0px;』。
   ※注意:若此部份取消標底,則個人相關資訊、部落閣最新文章、勇者小屋聯播等其它項目之標底皆會被取消。

▼參考結果(二)

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎背景設定(div.left)

▼圖六–1

▼圖六–2

  圖六–1要怎變圖六–2呢?請利用搜尋功能找「div.left{」,或加入以下語法。
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧
div.left{
background:url(圖片連結)no-repeat;}
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧

【說明】
 (1) 「no-repeat」表示圖片不會重複。
 (2) 圖片維度約774╳577。
【注意】
 設定此圖層插入自己的圖片當中,若加入圖片時會有灰色圖塊遮住請注意,
 務必要將其灰色圖塊的圖層給隱藏才會顯現自己插入的圖片,參考以下語法:
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧
div.left{background:url(圖片連結)no-repeat;}  ←就是上面介紹的語法
div.leftout1{background:none;}
div.leftout2{background:none;margin:0;}
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧

【說明】
 (1) 「div.leftout1{」與「div.leftout2{」是造成灰色圖塊的原因之一,
   可在備份現有CSS語法後測試看看。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎背景設定(body)

▼圖七(left圖層在body圖層的上方)

  如上圖,加上背景圖讓小屋更好看,加上以下語法:
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧
body{
background:url(圖片連結) repeat-y;}
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧

【說明】
 (1) 「repeat-y」表示圖片會重複顯示。
 (2) 如背景圖片想要做成浮水印(意思是滾動捲軸時背景圖不會隨之變動)時,
   請加入『background-attachment:fixed;』此行語法,表示背景為浮水印。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎標題設定、文中設定

▼圖八

--
《標題設定》
  請用搜尋功能搜尋「.category_title{」。

巴哈小屋預設語法:
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。
.category_title{
background:url(http://pic.bahamut.com.tw/home/category_title.gif) no-repeat;
height:40px;
}/*主標題一使用*/

.category_title2{
background:url(http://pic.bahamut.com.tw/home/category_title2.gif) no-repeat;
height:40px;
}/*主標題二以下使用*/

.category_word{
color:#117E96;
font-size:15px;
font-weight:bold;
padding-left:85px;
padding-top:0px;
padding-bottom:2px;
}/*主標題文字設定*/
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。

【說明】
 (1) 建議要改標題的話,「主標題一」和「主標題二以下使用」兩個請一起改。
   更換圖片請將「url()」裡括號的圖片連結改自己的圖(圖片寬度750pixels)
 (2) 「height」表示圖片的高度(自訂)。
 (3) 「font-size」表示標題文字大小;「font-weight:bold;」代表文字為粗體。
 (4) 「padding-left」表示文字距左多少pixels,若不要讓文字靠左固定距離,
   亦可將標題文字設定為置中,則鍵入『text-align:center;』。
   ※若設定文字置中後,可將「padding」等三行設定刪除。
 (5) 設定字元間距,如想要文字間距為5:『letter-spacing:5px;』。

--
《文中設定》
  首先,我們先將左邊的巴哈姆特龍圖像更換或刪除。

▼巴哈姆特龍圖樣

  請用搜尋功能搜尋「.article_pic{」。

巴哈小屋預設語法:
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。
.article_pic{
border-left:1px solid #C4C4C4;
border-right:3px solid #C4C4C4;
border-top:1px solid #C4C4C4;
border-bottom:3px solid #C4C4C4;
}/*文章或畫作的縮圖邊框*/
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。

【說明】
 (1) 上述「border」表示圖像的邊框設定,刪除或設定『none』則無邊框。
 (2) 若再加入以下語法,則該圖像圖片就消失匿跡了:
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧
height:0px;
width:0px;
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧


■ 若想要讓巴哈姆特龍圖增加特效,可參考[異(u4)]之[【CSS】IE濾鏡特效與火狐半透明語法]此篇文章。

▼參考結果(一)

  再來,修改部落格文章預告的版面調整和框線。

【說明】
 (1) 搜尋「.articlebox{」。
 (2) 以下是巴哈預設小屋語法:
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。
.articlebox{
border:1px solid #7DC8D0;
background-color:#FFFFF4;
padding:5px;
width:100%;
}/*個人部落閣最新文章及GP值底色*/
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。

 (3) 請將「width:100%;」的「100%」更改為「px」,即設定寬度為多少pixels。
 (4) 在框內插入圖片:將「background」改為『background:url(圖片連結);』。
   △圖片維度可自訂:「width」:寬度、「height」:高度。
 (5) 文字對齊方式:建議設定為『text-align:center;』,若需要設定「padding」,
   則建議不要將距離拉太長,否則會變形。因為此圖片與部落格GP底圖相對應。

▼參考結果(二)

 (6) 如上圖指示圖,GP欄位的底圖是和部落格文章預告區底圖相通的,不過,
   在GP欄位底圖的範圍內可自由選擇要顯示右邊、顯示左邊還是顯示中間:
   加入『background-position:right;』(right:右邊、left:左邊、center:中間)。

▼參考結果(三)

  最後,更改框架中間的框線。請搜尋「.category_bk{」。

這是敝人小屋的語法:
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。
.category_bk{
background-color:#181645;  ←內文的背景色
border-left:1px solid #D0CFDE;   ←欄位左邊線條
border-right:1px solid #D0CFDE;   ←欄位右邊線條
border-top:1px solid #D0CFDE;   ←欄位上方線條
border-bottom:1px solid #D0CFDE;   ←欄位下方線條
padding:12px;   ←框線與內容距離
}/*內文的背景色*/
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。


▼參考結果(四)

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎標底設定(框架結束部分)
  請用搜尋功能搜尋「.category_footer{」。

巴哈小屋預設語法:
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。
.category_footer{
background:url(http://pic.bahamut.com.tw/home/bottom.gif);
height:25px;
}/*框架結束部分*/
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。

【說明】
 (1) 更換圖片請將「url()」裡括號的圖片連結改自己的圖(圖片寬度750pixels)
 (2) 「height」代表高度,故圖片的高度可自訂。
 (3) 取消標底(框架結束部分)在之前的資料區設定已有講解過,在此再講一次:
   取消標底『background:none;』、取消標底的高度『height:0px;』。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎整體文字、部落格文字設定
--
《整體文字設定》
  請利用搜尋功能找尋「TD{」。

巴哈預設小屋語法:
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。
TD{
color:#464646;
font-size:13px;
line-height:150%;
font-family:"Arial";
word-break: break-all;
word-wrap:break-word;
}

A:link{
color:#464646;
text-decoration:none;
}/*還未造訪連結狀態*/

A:visited{
color:#464646;
text-decoration:none;
}/*造訪過後連結狀態*/

A:hover{
color:#0064AF;
text-decoration:underline;
}/*滑鼠移入連結狀態*/
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。

【說明】
 (1) 「TD{」表示小屋整個的所有文字設定(除已有設定的文字區段外)。
 (2) 「color」:文字顏色、「font-size」:文字大小、「font-family」:文字字體。
 (3) 「text-decoration」表示文字字型樣式設定,『underline』是底線的意思。

--
《部落格文字設定》
  在小屋任一處加入以下語法(建議加在自己找得到或要標註清楚)。

‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧
.home_t3{font-family:"Arial ";font-size:11pt;}
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧

【說明】
 (1) 「font-family」:文字字體、「font-size」:文字大小。
 ※注意,若設定字體為特殊字體,瀏覽時對方的電腦未安裝你的特殊字體時,會顯示不出來,
  進而自動改變為預設字體,即「新細明體」。

■ 若需要瞭解更多,可參考[異(u4)]之[【CSS】巴哈小屋字體使用全破解與字體介紹]此篇文章。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎右短標題、人氣曲線圖設定

▼圖九

--
《右短標題設定》
  搜尋或加入「.post_title{」。(因預設巴哈小屋好像沒有)
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧
.post_title {
height:40px;
background:url(圖片連結) no-repeat;
padding-left:50px;
color:#191747;
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧

【說明】
 (1) 「height」表示高度,故圖片高度可自訂。
 (2) 更換圖片請將「url()」裡括號的圖片連結改自己的圖(圖片寬度約172 pixels)
 (3) 「padding-left」表示文字對齊,自左基準線往右距離多少pixels。
 (4) 「color」代表標題文字顏色。

--
《人氣曲線圖設定》
  讓人氣曲線圖消失,任一處自己曉得的地方加入以下語法:
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧
#Flash_curve{
display:none;}
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧


■ 若想要將右邊內容做特效,可參考[兔(sindsiona)]之[【css教學】右邊背景圖PII 教學,及透明語法運用]此篇文章。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎右短標題內容、項目符號設定

▼圖十

--
《右短標題內容設定》
  在小屋任一處加入以下語法(建議加在自己找得到或要標註清楚)。

這是敝人小屋的某段語法:
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧
.home_c1{color:#191747;}
.home_c1 a:link, .home_c1 a:visited{color:#363299;}
.home_c1 a:hover{color:#6E6C9C;}
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧

【說明】
 (1) 「.home_c1」:右邊短標題的內容文字顏色
 (2) 「.home_c1 a:link, .home_c1 a:visited」:右邊短標題的連結顏色(滑鼠未移入)
 (3) 「.home_c1 a:hover」:右邊短標題的連結顏色(滑鼠移入後)
 (4) 更改顏色請直接在「color」的後方將色碼填上,如紅色『color:#FF0000;』。

  現在一般文字顏色、連結文字顏色都講了,那「by 帳號」後面的日期顏色呢?
  請用搜尋功能搜尋「.extend3{」。

這是敝人小屋的某段語法:
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。
.extend3{
color:#9595B1;
}/*By之後的日期顏色*/
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。

【說明】
 (1) 更改顏色請直接在「color」的後方將色碼填上。

--
《項目符號設定》
  在小屋任一處加入以下語法(建議加在自己找得到或要標註清楚)。

這是敝人小屋的語法:
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧
.post_list{
Background:url(圖片連結) no-repeat;}
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧

【說明】
 (1) 更換圖片請將「url()」裡括號的圖片連結改自己的圖(圖片維度約15╳15pixels)

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎按鈕設定

▼圖十一

■ 若在下本篇不清楚,亦可參考[異(u4)]之[【CSS】巴哈預設按鈕更動法]此篇文章。

  在小屋任一處加入以下語法(建議加在自己找得到或要標註清楚)。

‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧
.button,.button2,.button3,.button4,.button_h1,.button_h2{
background-image:url(圖片連結);
background-repeat:no-repeat;
height:20px;
border-top: 1px solid #FFF;
border-bottom:1px solid #FFF;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
color:#000;}

.button:hover,.button2:hover,.button3:hover,.button4:hover{
background-image:url(圖片連結);
background-repeat:no-repeat;
height:20px;
border-top:1px solid #FFF;
border-bottom:1px solid #FFF;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
color:#000;}

.button_c1 img{display:none;}
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧

【說明】
 (1) 更換圖片請將「url()」裡括號的圖片連結改自己的圖。
 (2) 「no-repeat」表示圖片不會反覆填滿;若要重複圖片則設定為『repeat-y』。
 (3) 「height」:表示按鈕的高度。
 (4) 「border」:「left」表左邊;「right」表右邊;「top」表上方;「bottom」表下方;
   「solid」代表實線,亦可更改為虛線『dashed』。
 (5) 「color」:某些按鈕的文字顏色。
 (6) 「.button_c1 img{display:none;} 」:將『+收藏』的+圖案取消。

  另外,怎麼修掉「訂閱我的小屋」這個按鈕?請加入以下語法:
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧
.home_order_button{visibility:hidden;}
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧


■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎背景設定(div.footer)

▼圖十二

  在小屋任一處加入以下語法(建議加在自己找得到或要標註清楚)。
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧
div.footer{
background:none;  ←將原本的白底取消
border:none;}  ←將原本的框線取消
background-image:url(圖片連結);  ←加上自己的圖片(圖片維度約995╳70pixels)
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧


■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎部落格設定

▼圖十三

--
《部落格標題設定》

巴哈預設小屋語法:
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。
.article_t1{
color:#FF6600;
font-weight:bold;
}

.article_t1 a:link, .article_t1 a:visited{
color:#FF6600;
font-weight:bold;
}/*個人部落閣文章標題顏色*/
。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。 。。。。。

【說明】
 (1) 「.article_t1{」代表文章內「--相關文章--」等文字顏色。
 (2) 「color」表文字顏色。
 (3) 「font-weight」代表文字樣式為粗體字型。
 (4) 「.article_t1 a:link, .article_t1 a:visited{」代表部落格標題;
   可加入『background:url() no-repeat;』,則括號內可貼上項目符號之圖片連結。
 (5) 文章摘要等文字內容顏色,請搜尋「.extend{」並可在『color』調整文字顏色。
 (6) 註解文字與「by 帳號」後面的日期顏色相同。

--
《留言區設定》
  在小屋任一處加入以下語法(建議加在自己找得到或要標註清楚)。
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧
textarea{
background-image:url(圖片連結);
width:500px;
height:210px;
background-position:left;
}
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧

【說明】
 (1) 加入圖片請將「url()」裡括號的圖片連結改自己的圖。
 (2) 圖片維度可自由設定,即『width』:寬度、『height』:高度。
 (3) 此與部落格GP欄位相同,可自由選擇要顯示右邊、顯示左邊還是顯示中間,如:
   『background-position:left;』表示顯示左邊(right:右邊、center:中間)。

--
《頁數按鈕設定》
  在小屋任一處加入以下語法(建議加在自己找得到或要標註清楚)。
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧
.tsmal{
color:#fff;}

.p_nolink{
background:url(圖片連結) repeat;
color:#201B7F;
border:1px #FFF solid;}

.p_nextprev{
Background:url(圖片連結) repeat;
color:#201B7F;
border:1px #FFF solid;}

.pag{
background:url(圖片連結) repeat;
color:#201B7F;
border:1px #FFF solid;}

.pag:hover{
background:url(圖片連結) repeat;
color:#201B7F;
border:1px #FFF solid;}
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧

【說明】
 (1) 「.tsmal{」表示「第幾頁,共幾頁 (共幾項)」之文字設定。
 (2) 「.p_nolink{」表示非連結頁數按鈕設定。
 (3) 「.p_nextprev{」表示所在的頁數按鈕設定。
 (4) 「.pag{」表示非在的頁數按鈕設定。
 (5) 「.pag:hover{」表示滑鼠移入按鈕設定。
 (6) 「background」:更換按鈕圖片請將「url()」裡括號的連結改為自己的圖。
 (7) 「color」:按鈕文字顏色。
 (8) 「border」:按鈕框線設定。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
◎捲軸設定

▼圖十三

  以下語法和BODY圖層編排在一起。
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧
body{
scrollbar-3dlight-color:#;
scrollbar-arrow-color:#;
scrollbar-darkshadow-color:#;
scrollbar-face-color:#;
scrollbar-highlight-color:#;
scrollbar-shadow-color:#;
scrollbar-track-color:#;}
‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧ ‧‧‧‧‧

【說明】
 (1) 「scrollbar-3dlight-color」:左立體邊顏色。
 (2) 「scrollbar-arrow-color」:箭頭顏色。
 (3) 「scrollbar-darkshadow-color」:右立體邊顏色。
 (4) 「scrollbar-face-color」:軸面顏色。
 (5) 「scrollbar-highlight-color」:軸面左角邊顏色。
 (6) 「scrollbar-shadow-color」:軸面右角邊顏色。
 (7) 「scrollbar-track-color」:軸軌顏色。
 (8) 倘若自己設定太麻煩,可至此網頁:http://www.moninet.com.tw/easypage/css.php
   設定,不過請注意該網頁還多一個「整體顏色 scrollbar-base-color」。這可不用設定,
   因為有點類似「軸面顏色 scrollbar-face-color」。

--

以上,歡迎指證錯誤 ̄︶ ̄∕

(累癱了)
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=170089
All rights reserved. 版權所有,保留一切權利

相關創作

同標籤作品搜尋:|教學|小屋發表|

留言共 62 篇留言

雷亞克
大大這篇教學太精彩了
圖文並茂
讓人一看就懂了^^

03-16 16:31

HARU 南草靖
謝謝:)

不過倒是挺擠的(未了節省空間(啥)
(因為目前一天只能發表三篇文章囧)03-16 17:00

我期待好久哩,終於是出來嚕XD"
趕快收起來收起來@@"

03-16 16:52

HARU 南草靖
謝謝:)

趕快收起來,或許改天就消失了(咦?)03-16 17:01
皇羅
真的太用心了~不推不行吶

03-16 17:27

HARU 南草靖
謝謝:)03-16 20:53
沙漠植物
雖然還沒看...
不過收起來,再加一個GP機關槍。
等我月考過後
就會開始閱看
有問題的話去在這裡留言,
老大看的到嗎?(畢竟將來會被新文給淹沒[喂

03-16 20:13

HARU 南草靖
謝謝收藏:)
--
我看的到,可以用最新留言看有誰的留言沒回到;
不過我怕你看不懂,因為我寫太擠、太亂囧〣03-16 20:55
Wind Cloud
I'm appreciated...

03-17 11:24

HARU 南草靖
don't mention it.03-17 21:15
Souldout
大大真有心呢~

收藏起來改天慢慢研究

03-17 13:36

HARU 南草靖
謝謝收藏:)03-17 21:16
ㄔㄌ
從頭到腳都寫出來了 很豐富!XD

03-17 18:40

HARU 南草靖
謝謝您的讚賞:)03-17 21:17
aiko銓
真是豐富
相信一定花了不少時間
先收藏~

03-17 19:00

HARU 南草靖
歡迎收藏:)

這我花了大概快一禮拜(其實都是在拖→懶(被打)03-17 21:18
不營養大雞排-Snow
不錯的教學!!推!

03-17 20:54

HARU 南草靖
謝謝讚賞:)03-17 21:18
冰煌瑀☆〞
不錯優!

我收下囉!

推上去~

03-17 23:49

HARU 南草靖
歡迎收藏,也謝謝你的支持:)03-18 20:09
有菜命滴小梅子
厲害!!厲害!!
真是厲害~改天我再看個仔細~~
現在在上課~~等到假日比較有空時`~
再利用大大所教的教法~
把我的小屋好好的改造一番~
噓~老師快要走過來~就留到這裡了喔!!

03-18 09:38

HARU 南草靖
謝謝讚賞,有空在看沒關係:)

上課偷開巴哈不好唷XD(結果自己也不是一樣)03-18 20:10
小角落..
寫的真好~~借引用XD

03-18 10:58

HARU 南草靖
謝謝,歡迎飲引用:)03-18 20:11
皇羅
這篇整個受益良多
再推一次

03-18 11:30

HARU 南草靖
謝謝推文 ̄︶ ̄∕03-18 20:11
舞星-天宮舞乙姬
正在學習CSS的我
這篇文章幫助好大^^

03-18 12:01

HARU 南草靖
加油哦,很高興能幫上妳的忙:)03-18 20:12
隱藏腳色
CSS真是一門艱深的學問阿 (搔頭)

大大好棒=ˇ=

03-18 23:03

HARU 南草靖
只要努力就會懂一些的(雖然在下也不是很厲害@@)

謝謝讚賞:)03-19 19:57
沙漠植物
剛剛我試著改小房屋
所以我先取消了惡魔CSS,
然後開始試著改,
結果上圖崩壞了(炸
最後還是歸途(?)
回到老大的惡魔CSS(炸

03-20 19:54

HARU 南草靖
=_=建議問過高手再改會比較安全喔03-20 20:16
沙漠植物
先改一下,
惡魔CSS轉換成天使CSS了XD

03-20 20:05

HARU 南草靖
恩:)03-20 20:16
幸福蜜桃
Although it is a terse teaching,it still teachs me many tips. ^^

03-20 23:31

HARU 南草靖
Thanks.03-21 18:50
沙漠植物
KAEDE―嵐 (wsp86145) 回應日期:2008-03-20 20:16:25
=_=建議問過高手再改會比較安全喔

--
那我請教你不就得了?(喂

03-21 17:12

HARU 南草靖
不給請教(誤)

沒啦,我不是高手0.003-21 18:51
沙漠植物
有疑問QQ
----
﹝《文中設定》
  首先,我們先將左邊的巴哈姆特龍圖像更換或刪除。﹞
我已經照這個語法做了,
巴哈龍確實被炸飛(?)
可是放圖片沒辦法取代巴哈龍的位子(啥鬼!)
而放的圖片卻跑到框框裡,
沒跑到外面= =
感覺卡卡的...
怎麼放到框框的外面@@?

03-22 07:15

HARU 南草靖
我記得本來就是出現在框內@@

只要把框架放大、或者框線取消,應該可以達到比較好的效果。
框外好像是本身主題框架的內文顏色,改了畫可能其他都會改。
(ex:改了部落格文章,其他勇者小屋聯播等等背景亦會改掉)03-22 09:51
沙漠植物
設背景色

body{
background:url(圖片連結) repeat-y;}

可是沒有小屋動靜=_=
圖片網址是放什麼的...

03-23 11:19

HARU 南草靖
上傳到網路空間的圖片網址。03-23 13:52
香香薇
只能說"太讚了XD"
這對小妹的幫助超大阿(燦笑)←某人屬於久久看膩型XD
在一次感謝(拜)
在小妹略看之後,還是覺得有點複雜,有時間再來好好深研(考生的可悲QQ)
CCS等我吧!!我會好好改造你的XD
最後,還是謝謝嵐大囉^^

(小妹很喜歡你的惡魔版喔XD)

03-25 20:51

HARU 南草靖
謝謝!這是大家不嫌棄敝人的作品:)

或許我寫的不夠好,不過可以參考看看其他高手的教學噢!
--
最近也要考試了(不過一樣散漫)03-25 21:21
新手來的
本篇留言已被〔wsp86145〕刪除

03-28 15:43

Mr.巫毒
清楚易懂!

04-02 09:05

HARU 南草靖
謝謝、若哪裡寫不清楚也可以問我:)04-02 18:16
小桔
感謝教學^^
打包回去 慢慢摸索>"<

04-02 18:09

HARU 南草靖
不客氣;加油!04-02 18:16
>m<
謝謝你的教學 讓我清楚多了^^~
抱歉 想請問一下
文章中是否不可 自行修改語法
我找不到切換語法模式這個選項
是不是文章只能 插入他預設的圖片之類的?
抱歉打擾你 問個問題︿︿謝謝

04-03 21:47

HARU 南草靖
不客氣噢:)
--
看了好幾遍閣下的問題,還是弄不懂。

文章中?使指哪裡呢囧?不好意思,敝人理解邏輯推理能力很差= ="
如果指CSS請直接點【自訂面板】找修改文章的地方就可以修改語法;
倘若不是指CSS而是一般部落格發表文章做修改,那請點擊【編輯】。04-05 10:46
Nao*直
~很棒耶~~

04-04 06:45

HARU 南草靖
謝謝讚賞^^04-05 10:47
crockavons
齁齁! 看完之後真是收獲良多>__<

今天自己改版面,幾乎都是看你這個的>< 我只能說  大大 受我一拜>口<!

04-04 19:57

HARU 南草靖
不客氣:)

小屋不錯唷XD 接受一拜太敬重了,不膽當0.004-05 10:49
口力口口非
感謝你的指導,小弟在此向你道謝

04-14 18:49

HARU 南草靖
不客氣,祝改造小屋成功:)04-26 11:34
翔嵐@只是個圓桌廚
很棒的教學♡XD

04-14 19:47

HARU 南草靖
謝謝誇獎XD04-26 11:35
風釆鈴
感謝 嵐 大大的寶貴教學,小妹獲益良多,感恩^O^。

04-21 23:53

HARU 南草靖
不客氣噢,希望大大看得懂,也但願能在改小屋時幫助各位:)04-26 11:36
水無月 雫
QQ

04-25 02:07

HARU 南草靖
@@04-26 11:36
Beatrice
( ̄▽ ̄)y

05-03 15:33

HARU 南草靖
( ̄▽ ̄)/05-18 11:18
宅宅
寫的很詳細的教學^^...雖然我看懂的真的很少(汗)
看來要把小屋弄成像您這樣漂亮還早得很Orz

感謝您熱心的教學^^

05-20 03:21

HARU 南草靖
不客氣,很高興能幫到大家的忙 ̄︶ ̄∕
沒關係啦,大家努力過後一定可以製作得比我還要漂亮!05-20 07:39
沙漠植物
我好囧,
我加了div.left{這個語法
結果圖沒出來,反而灰灰一片...囧|||

05-25 14:55

HARU 南草靖
要看看是否與其它圖層相衝到或是寫得不完全呢!?
或許也有其他複雜的原因囧05-27 16:22
化外良民
感謝分享,請笑納!

06-27 08:40

HARU 南草靖
不客氣,有錯誤請指教:)07-05 12:04
紫羽
好棒ˇ有了這個就不會煩惱了!

07-05 19:41

HARU 南草靖
謝謝,希望真的能解決大大的問題噢:)08-19 08:52
*綠芙*
我收~
等到能改小屋了我會慢慢再研究的~

07-20 20:24

HARU 南草靖
加油,希望研究成功:)08-19 08:52
破壞神
謝謝你的解說

07-22 14:14

HARU 南草靖
感謝你的留言08-19 08:53
無緣
一看就懂了...給GP

08-13 08:35

HARU 南草靖
謝謝,希望大大小屋變得更加精美!08-19 08:54

我也是輸入了div.left{這個語法後,
有用了圖片網址,
一樣是一片灰ˊˋ
難道沒有解決方法嗎……

08-18 21:02

HARU 南草靖
應該是我沒寫清楚,
要注意是否有「其他圖層」擋住變成灰色。

如果有,就要把其灰色的圖層給隱藏掉(Background:none;)08-19 08:55
HARU 南草靖
其他圖層意指「div.left{」以外的圖層(見◎圖層部分)

另外除了「div.left{」還有其他兩個地方,如:
「div.leftout1{background:none;}
 div.leftout2{background:none;margin:0;}」
上述就是將其圖層隱藏,可建議大大備份現有CSS後測試看看:)08-19 09:00

還是不行耶(汗
這是我的語法:
div.left{background:url(http://hk.geocities.com/juanliany06/p121526162166.jpg)no-repeat;}  ←就是上面介紹的語法
div.leftout1{background:none;}
div.leftout2{background:none;margin:0;}
Background:none;
可以幫我看看嗎@@?

發現如果把 no-repeat;} 這一句拿掉就有圖片,
可,會重複-  -變成兩張哩……

08-20 17:34

HARU 南草靖
CSS語法不可以直接把中文文字打上去@@
不然這行語法就會不成立,也就是無效。

如果要加文字一定要前後加上「/*」和「*/」
所以CSS語法裡面除了英文字以外,中文字和特殊符號一定前後都有/**/

「  ←就是上面介紹的語法」
這句是註解,不必照抄Copy到語法裡。

另外還有一個很重要的地方,
每一段語法開頭「.XXX{」的前大括號完一定最後有後括號「}」
否則語法利用火狐瀏覽器(FireFox)會看不到。08-20 18:12
HARU 南草靖
還要確定圖片有沒有上傳成功0.0
圖片失連一定會變成看不到的結果。08-20 18:16

嗯嗯,拿掉了。
圖片有上傳成功

div.left{background:url(http://hk.geocities.com/juanliany06/p121526162166.jpg) no-repeat;}
div.leftout1{background:none;}
div.leftout2{background:none;margin:0;}
Background:none;

↑現在語法
會變成
勇照上方有圖,但,下方都沒圖= =
一片白

08-20 18:22

HARU 南草靖
網路空間有時效嗎?
怎麼又失連了…囧09-08 20:07
闇葉
好棒得教學>口<ˇ又很容易懂ˇ好物收藏+推推OWO/

09-12 15:57

HARU 南草靖
感謝支持噢^^09-26 14:02
天空-Juang
問一個問題...

我用了div.rightTop
把廣告的邊框去掉
可是儲存的時候
巴哈會自動把div.rightTop吃掉....

有沒有辦法可以把邊框去掉..

白色的邊不是很好看說

09-14 02:19

HARU 南草靖
這是我的語法,給大大參考:)
--
div.right{background:none;}
div.righttop{background:none;}
div.rightdown{background:none;}
--09-26 14:03
碰碰
小妹有問題要問大大

背景設定(div.left)


語法:

div.left{background:url(http://i479.photobucket.com/albums/rr159/abc456582/200441320491244501.jpg) no-repeat;}
div.leftout1{background:none;}
div.leftout2{background:none;margin:0;}

預覽時有成功顯出來
可是按確定送出後卻沒有顯示出來
看語法時 那段語法不見了
已經試過幾十次了- -

09-24 21:32

HARU 南草靖
如樓下大大所述;
確定有成功送出,如沒有就試試看重新整理。

倘若依然不行的話,
可能是瀏覽器或巴哈CSS的網頁問題,
這就超出所能提供解決辦法範圍了Q_Q09-26 14:05
yuu
回樓上大大
妳試試F5重新整理再確認看看

09-25 16:24

HARU 南草靖
感謝這位熱心大大的幫忙!^^09-26 14:06
卡爾.J.山德羅
非常感謝你的教學文
我將它收藏起來^^
方便讓更多人有機會看到

03-01 21:24

HARU 南草靖
謝謝支持:)05-03 15:06
乾癬人
想改背景...


有規定圖片大小嗎???!

03-03 15:38

HARU 南草靖
沒有,看你要多大就能多大囉@@
且要視網路空間有限大小與否。05-03 15:06
潛水娘
這篇教學不錯唷,雖然我已經會囉
不過還是希望能更深入了解一點!!

05-03 00:11

HARU 南草靖
深入一點的話,恐怕要另請高明ˊˋ
--
ex:拆屋頂...etc05-03 15:07
小將☆真藍
真的是超棒的教學~
收藏再看~ 因為現在眼睛很累了 .-.~+"
再一次感謝大大 ^-^

06-04 04:24

彩色爆炸頭
遲來的雞皮

07-18 20:32

性感紳士大屌哥
請問為什麼我搜尋找不到div.left ??

10-19 14:53

頭文字D ZERO 練習中
研究ing~~!

01-06 21:56

Ring
真是太優秀了!!XD
一直還滿想換小屋的 不過很不熟+一次看太久容易頭暈 所以每次都只能挑重點和能理解的地方先下手
圖文並茂的教學真是讓人感動^^
下次想挑戰新進度前先把這篇複習一遍= =+

03-18 01:49

沉海浮流
很清楚的解說,謝謝

04-17 18:59

= w =
推!

04-20 19:50

魔法相消
詳盡精闢~我收藏嚕!

05-22 03:23

被打馬賽克
THX~!

07-23 15:03

神奈
真是簡單易懂,有不懂的地方請幫忙了

此篇將收藏^^

10-01 04:29

艾妮
安安,表示看完後,我瘋了[e26]

10-12 04:05

我的頭髮骨折
想請問一下 現在的版面還可以使用此文所提的這些與法嗎?

08-27 09:21

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

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

前一篇:CSS教學撰寫進度70%... 後一篇:Today is my ...

追蹤私訊

作品資料夾

Immbasa5所有人
號外:動視暴雪逃漏稅超過十億美元https://wokholibasa.blogspot.com/2019/08/taxwatch.html看更多我要大聲說4小時前


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

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