創作內容

28 GP

【小屋】CSS自訂版面：二、框架─外部框架＆表格篇

作者：莉薇婭莞夢│2007-09-03 19:25:54│巴幣：0│人氣：9507

前言：＜本文發表於2007/09/03 最後修改於2007/09/03 19:37　如語娃娃＞
　　以下內容可以對照「CSS自訂面板」的語法內容。
　　‧本篇起，若有前篇詳解過的語法便不再做補充說明。因為CSS語法設定其實大都類似，很多都是可以做增減的，有基本基礎的人可以試著增減語法。
　　‧只要是有「#」後接著6個英數混合成的色碼──十六進位數值，第一組表示紅色數量、第二組表示綠色、第三組表示藍色──都可以不同的色碼替代原本的色碼，只是「#」不要忘記加了。
　　　例如：#FFFFFF(白色)可換成#b23535(咖啡紅)，簡單取得色碼的方法
　　　　1.參考巴哈小屋提供的色盤
　　　　2.到日本網站的「原色大辭典(連結)」
　　‧說明文字會以「 /**/ 」包夾，「/**/其中的說明文字」以及「CSS編輯中空格跟空行」皆不會造成語法上的影響，可以放心留著。

───────────────────────────────────────────
/*--------------------------框架------------------------------*/
.infom_bk{
border-left:1px solid #b23535;
border-right:1px solid #b23535;
border-top:1px solid #b23535;
padding-top:10px;
padding-bottom:10px;
background:#fffffc
}
/*小屋首頁－勇者資料區背景色*/
/*「border-top」從前篇後段端教學可知它有上下左右的框線可設定，這邊原是沒有上框線的設定，在如語的小屋是因個人的需要而額外加上的。*/
/*「padding-bottom」下表格外框與內文的間距。一定有些人或許和如語一樣不懂為何資料區下面的兩條線會黏的緊緊的，這個時候你就可以設定它的寬度。*/
/*進階：有信心的人可以試著增加「background-image : url( );」背景圖。*/

/*----外部大框架設定----*/
.category_title{
background:#ffffff;
height:80px;
background-image : url(http://myhome.apbb.com.tw/indream228/004-22.gif);
background-repeat:no-repeat;
background-position:center;
}
/*主標題一使用*/
/*注意到文章上方那個文字後方的圖片了嗎，它就是在這邊設定的。*/
/*「height」高度，是主標題的表格高度。高度可以修改，但不建議大家修改weight(寬度)。*/
/*background-image(圖片)、repeat(呈現方式)、position(對齊方式：center<置中>、left<置左>、right<置右>，background-position:90% 90%<設定背景圖片於平面座標位置>)*/
.category_title2{
background:#ffffff;
background-image : url(http://myhome.apbb.com.tw/indream228/004-25.gif);
background-position:right;
text-align:center;
height:30px;
}
/*主標題二以下使用*/
/*目前在巴友流灠小屋時看不到這一項設定，因此可設不設，隨屋主的喜好。目前，屋主在設定小屋時，基本設定的畫面看得到副標題。*/
.category_word{
color:#b24747;
font-size:15px;
font-weight:bold;
text-align:center;
padding-left:px;
padding-top:10px;
padding-bottom:2px;
}
/*主標題文字設定*/
/*「text-align」文字的對齊方式──right(文字靠右對齊) 、left(文字靠左對齊)、center(文字置中對齊)、justify(文字分散對齊)*/
/*「padding」表格外框與內文的間距。若後面沒有接「-方位」就是四方都改。*/
.category_bk{
background:#ffe1e5;
border-top:1px solid #b23535;
border-left:1px solid #b23535;
border-right:1px solid #b23535;
padding:12px;
text-align:center;
}
/*內文的背景色*/
/*簡單說就是各篇文章的背景色。*/
/*「padding」表格外框與內文的間距。若後面沒有接「-方位」就是四方都設定。*/
.category_footer{
background:#ffffff;
height:33px;
background-image : url(http://myhome.apbb.com.tw/indream228/002.gif);
border-top:1px solid #b23535;
}
/*框架結束部分*/
/*進階：例如如語小窩表格末的花花分隔線˙ˇ˙"，有加「background-image」*/

/*----表格設定(置於大框架中)----*/
.box1{
border:1px solid #663333;
}
/*表格框線顏色*/
/*例如：各文章留言區、留言欄的外框線。*/
.box_title{
color:#FFFFFF;
/*表格標題文字色，這是如語自行增加的*/
background:#028760;
font-weight:bold;
letter-spacing:2px;
}
/*表格標題底色*/
/*勇者資料區中標題底色。或，例如：各文章的留言區、留言欄標題底色。或，文章下方非瀏覽中的標題底色。*/
.box_list1{
background-color:#E6E6E6;
}
/*表格內文底色 1*/
/*勇者資料區中第一項資料底色。或，例如：各文章標題底色、文章內容下方表格"瀏覽中"的標題底色、回應者的資料底色。*/
.box_list2{
background-color:#F4F4F4;
}
/*表格內文底色 2*/

/*－「icon」實際影響處還不知道－*/
.box_icon1{
background-image:url(http://myhome.apbb.com.tw/indream228/006-3.gif) no-repeat;
}/*三角形箭頭icon*/
.box_icon2{
background-image:url(http://pic.bahamut.com.tw/home/list_icon2.gif) no-repeat;
}/*圓形彈珠icon*/

------------------表格設定─進階---------------
　　如果，想將"文章內容下方表格"的連結顏色改變，則加上以下語法（連結的設定方式可參考第一篇教學）。
　　修改本資料另影響「文章的右上留言人數顯示色」、「文章右上留言連結顯示色」、「勇者評價顯示色」。
.box1 a:link{color:#FFFFFF}
.box1 a:visited{color:#FFFFFF}
.box1 a:hover{color:#FFFFFF}

喜歡 28 收藏 140 引用 2 留言推上首頁檢舉

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

相關創作

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

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

【小屋】CSS自訂版面：一、整體文字＆其他共用部分篇

【小屋】CSS自訂版面：進階─網頁外框、背景、卷軸、項目符號

【小屋】CSS自訂版面：文章標題和下方的上下篇連結顏色分開設定

【小屋】CSS自訂版面：進階─部落閣:相關文章欄位篇

留言共 47 篇留言

Beatrice：
編輯得相當美觀整習，一目了然！通通收走了，謝謝！

09-03 19:35

莉薇婭莞夢：
謝謝鼓勵˙ˇ˙//
歡迎打包XD~09-03 19:40

侯：
寫的很棒
小屋越做越細了
呵呵

09-03 19:58

莉薇婭莞夢：
謝謝˙ˇ˙

越玩越細=ˇ=+
其實第一篇的教學說的還不夠^^"09-03 20:07

侯：
捲軸圖樣可以改嗎
從一推出CCS後就想改捲軸圖了
失敗 Orz

09-03 20:14

莉薇婭莞夢：
圖嗎?
除非是做個人網站，否則改不了唷一ˇ一"
因為好像還牽扯到JS之類的程式語法。

CSS頂多改顏色0.009-03 20:38

米洛：
請問一下留言區的框框裡的草是怎麼改的呢...好可愛>///<

09-03 20:24

莉薇婭莞夢：
在前一篇的其他共用部分最後一項，有說@ˇ@09-03 20:39

莉薇婭莞夢：
我忘了第一篇教學是用巴哈基本的CSS(˙-˙):
剛剛已經補充上去了>///<

這邊在貼給你參考看看
.home_input2{
color:#028760;
/*輸入文字時的文字色*/
border:1px solid #fcb4b4;
/*欄位框線色*/
background-color:#FFF;
/*無圖片時的背景色*/
background-image : url(http://myhome.apbb.com.tw/indream228/006-4.jpg);
/*背景圖的網址*/
background-repeat:no-repeat;
/*背景圖不重複*/
background-attachment: fixed;
/*背景圖不移動─浮水印*/
background-position:95% 90%;}
/*背景圖的擺放位置(X軸，Y軸)*/09-03 20:48

倫：
哇~~你已經改好了呀^^
真是很精緻呢!!
超賞心悅目的>/////<

09-03 20:45

莉薇婭莞夢：
好一半@ˇ@~
剩下的小細節慢慢來一ˇ一

昀也可以試著改看看唷(˙ˇ˙)09-03 20:49

藏鏡咪咪：
前幾天我已經改好了設定，打算發表一篇教學，
剛好看到你的教學，覺得妳好棒喔!
我的教學都只是局部性的說，一起加油唄^^

09-03 21:03

莉薇婭莞夢：
一起加油(舉手)
^O^09-03 21:37

——：
大大的小屋，真的很美。

09-03 21:29

莉薇婭莞夢：
謝謝妳的讚美^///^

如果沒有網路上的素材
要能弄成這樣也不容易呢@.@"
因為我本身很懶(哈)09-03 21:38

)＊ sｈα nｅ漩＊(：
哇哦~感覺好像路過撿到寶XD
版面好漂亮喔
說明的也很仔細呢^^

呃...容我先A走說明再慢慢消化ˇˇ
(好多=口=")

09-03 21:39

莉薇婭莞夢：
謝謝妳的讚美︿︿～

歡迎打包＞／／／＜
有問題可以討論的唷＠ˇ＠09-03 22:00

白菊：
請問右邊最新留言左邊的線

和下面本站所有文章、畫作等版權歸原作者所有，非經同意請勿轉載的上面的線

可以變顏色嗎?

09-03 21:40

莉薇婭莞夢：
如下篇所言˙ˇ˙09-03 22:01

白菊：
請問右邊最新留言左邊的線

和下面本站所有文章、畫作等版權歸原作者所有，非經同意請勿轉載的上面的線

可以變顏色嗎?

忘記推了...請刪上一篇不好意思^^"

09-03 21:41

莉薇婭莞夢：
「右邊最新留言左邊的線」
　　右邊選單列的修改，我還沒有接觸到耶，所以還沒辦法給你答案ˊˋ＂
「所有權…」
　　等我找到再跟你說ＸＤ：

　　我得休息了＠＠＂（←還沒洗澡啊，會被媽咪揍扁的…）09-03 21:58

莉薇婭莞夢：
上一篇沒關係一ˇ一
繼續留著ＸＤ09-03 21:59

直野泉：
推推～

09-03 22:54

白菊：
可以再問一個問題嗎這篇文章外圍有紅色框框是怎麼用的呀

我找不到不是外邊得超大框框唷

09-03 22:57

莉薇婭莞夢：
「紅色框框」
　　你可以試著把有ＢＯＲＤＥＲ的顏色設定都換看看會試出來的ＸＤ
　　你說的應該是下面這個吧，在分類「/*----外部大框架設定----*/」
　　下面有稍微補充了一點點內容

.category_bk{
background:#ffe1e5;
border-top:1px solid #b23535;
border-left:1px solid #b23535;
border-right:1px solid #b23535;
border-bottom:1px solid #b23535;
/*內文四面外框線色，可簡略寫成：border:1px solid #b23535;*/
padding:12px;
text-align:center;
}
/*內文的背景色*/
/*簡單說就是各篇文章的背景色。*/
/*「padding」表格外框與內文的間距。若後面沒有接「-方位」就是四方都設定。*/

－－－－－－－－－－－－－－－－
晚安嚕＠ˇ＠09-03 23:06

遺忘：
謝謝分享^^收走慢慢研究@@

09-04 00:26

莉薇婭莞夢：
不會˙ˇ˙
歡迎帶走XD09-04 06:59

米洛：
太太太感謝了!!!我終於成功的在留言區養了一隻狗...~嘎嘎

謝謝分享喔^^

09-04 00:46

莉薇婭莞夢：
呵呵~恭喜唷>ˇ<09-04 07:00

Minnie：
教學很詳細也很整齊@_@
重點是很實用!!

讓我們一起來研究CSS的奧妙吧!!!(握)

是否可以引用分享呢^ ˇ^?

09-04 06:49

莉薇婭莞夢：
謝謝誇獎，
因為本身就是要教學的東西，整齊是很重要的@0@

一起研究^口^~

歡迎引用~~嗯@ˇ@

說真的不知道那個所謂引用連結有啥鬼用途，因為引用者的文章不會出現任何引用原處的標示，只有被引用者會顯示@@。
(我試過引用別人的文章，但是沒有特別的效果，最後還是自己加上原文出處在文章中)
09-04 07:09

昨日夢醒今日醉：
不好意思大人，我想帶回去慢慢看~推

09-04 07:22

莉薇婭莞夢：
歡迎ˋ(^Q^)ˊ09-04 07:34

林鴻鈞：
做得不錯啊

剛才折騰了一下依然是沒有設計上的天賦所以放棄了

09-04 15:07

莉薇婭莞夢：
應該是圖檔不好找@@?

因為有主圖後來弄配色會容易些09-04 15:29

白菊：
謝謝

我做出來了^o^

09-04 16:45

莉薇婭莞夢：
不可氣@ˇ@

恭喜呢~09-04 17:19

莉薇婭莞夢：
ˊ口ˋ
更正「不客氣」才對，淚奔。09-04 17:20

白菊：
我推~

09-04 16:45

莉薇婭莞夢：
︿＿＿︿09-04 18:09

戀戀-晴若藍：
娃娃大的小屋給人一種溫馨的感覺，做的太棒了˙ˇ˙

ps:我從希的小屋連過來的，css真的好多要學的，我也要玩看看^^

09-04 17:53

莉薇婭莞夢：
加油嚕>ˇ<09-04 18:11

侯：
改細部的地方真的好累....

09-04 18:07

莉薇婭莞夢：
羅侯加油XD~~~09-04 18:12

侯：
娃娃...
我有問題~
留言區屋主回應那長型的圖怎麼弄呢?

09-04 18:11

莉薇婭莞夢：
哈，雖然還沒解說到那邊，不過你都問了，來請找到這個地方↓

/*---------------------各文章列表區(下方)---------------------*/
/*----個人部落閣----*/
.article_hr{
/*重點：原本此部份會有一個color的語法，一定要刪掉，不然看不到背景圖。*/
border:0px solid #F4F4F4;
/*↑這句可以忽略*/
background-image : url(http://myhome.apbb.com.tw/indream228/004-2.gif);
/*加上分隔橫線的背景圖*/
background-repeat:no-repeat;
/*背景圖不重複呈現*/
background-position : center;
/*背景圖置中，因為它不只套用在板主的文章回應，連專屬留言板的版主回應分隔線也會有。*/
height:37px;
/*重點：分隔線的高度，一定要設定，不然還是一條扁扁的線*/
}
/*個人部落閣文章版主回應分色線*/09-04 18:20

侯：
原本此部份會有一個color的語法，一定要刪掉，不然看不到背景圖
我被這個搞死一整天= =
難怪圖出不來
娃娃謝謝...我去裁圖試試
(磕頭跪拜)

09-04 18:31

莉薇婭莞夢：
不客氣＠ˇ＠09-04 19:50

羅斯洛立安的小黃花：
寫的好清楚~
推推&謝謝~

09-04 21:34

莉薇婭莞夢：
謝謝&不客氣~
呵呵09-05 06:26

依蕗：
3Q

09-05 01:12

莉薇婭莞夢：
不客氣>ˇ</09-05 06:27

歪歪：
決定妳的教學每篇都要推 GP 了！
不然會良心過意不去！ 0.0

09-05 11:13

莉薇婭莞夢：
呵～謝謝˙ˇ˙／／09-05 21:43

Boshian：
好詳細的教學...

簡單又明瞭^^

加加收藏=ˇ=

09-05 11:57

莉薇婭莞夢：
謝謝誇獎～歡迎打包ＸＤ～09-05 21:43

蜜雪莉雅：
謝謝大大的教學 >< 我成功了 ( 感激 )

如果沒有大大的教學 , 我可能還在小屋裡哭 ˊ.ˋ

09-06 00:02

莉薇婭莞夢：
不客氣˙ˇ˙09-06 06:47

木壴寸：
很棒的學喔!

09-08 06:11

莉薇婭莞夢：
呵呵~(>///<)a09-08 09:03

Beautiful Things：
感謝如語大的教學~
請教個問題..勇者資料區周圍線條及今日訪客下面那條線的顏色
要去那改呢?
所有都改好了剩這兩個@@
先謝謝你了^^

09-08 11:54

莉薇婭莞夢：
請修改
/*----外部大框架設定----*/
.category_footer{
background:none;
height:33px;
background-image : url(http://);
}/*框架結束部分*/09-08 12:36

Beautiful Things：
還有右邊那個『搜尋勇者』、『小屋統計』、『個人紀錄』、『今日訪客』
標題下面內文字的顏色要去那改呢??我找不到...
非常感謝..^^"

09-08 12:04

莉薇婭莞夢：
/*------右下的標題格式-------*/
.post_title {
padding: px;
background:url(http://myhome.apbb.com.tw/indream228/006-3.gif) 50% 50% no-repeat;
}
/*右下的標籤list格式*/
.post_list{
color: #f09199;
}
/*右下的底圖格式*/
.postbox2 {
background:#ffe1e5;
border:0px;
}
09-08 12:39

Beautiful Things：
真的非常感謝~~~><"
上面的文字搞定了
可是勇者資料區周圍線條及今日訪客下面那條線的顏色
我還是不知道怎麼改呢= =
照你這語法去改是去變動到下面標題
而不是上面的『勇者基本資料』及『勇者各項能力值』的周圍線條
抱歉...小的是門外漢= ="

09-08 13:07

Beautiful Things：
怪了...不能在給GP...@@
上面我打錯字不是『勇者基本資料』及『勇者各項能力值』的周圍線條
而是勇者資料區整塊的周圍的線條^^"

09-08 13:09

莉薇婭莞夢：
ｂｏｒｄｅｒ的色碼改成你要的

/*------------框架----------------*/
.infom_bk{
border:1px solid #b23535;
}
/*小屋首頁－勇者資料區背景色*/09-08 13:48

綾奈：
大大的部落閣很棒喔...謝謝你的分享~~

09-09 18:02

莉薇婭莞夢：
不客氣˙ˇ˙//09-11 12:13

☜♀★初戀★♂☞：
/*內文的背景色*/
/*簡單說就是各篇文章的背景色。*/
/*「padding」表格外框與內文的間距。若後面沒有接「-方位」就是四方都設定。*/
.category_footer{
background:#ffffff;
height:33px;
background-image : url(http://myhome.apbb.com.tw/indream228/002.gif);
border-top:1px solid #b23535;<<<請問這個是改內文文字顏色的嗎?

09-09 22:08

莉薇婭莞夢：
那個是改框線的顏色˙ˇ˙09-11 12:12