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

前言：＜本文發表於2007/09/02 最後修改於2007/09/03 19:55　如語娃娃＞
　　其實網路上隨便打CSS教學，自然能找到許多相關的網頁，如果想知道更多不妨在搜尋器打上「CSS 教學」。
　　在這邊，如語只是將自己曾有使用到的CSS語法記錄下來，除了分享，也是方便自己個人日後想修改時方便尋找。當然，要自己方便尋找，文不會全部擠再一起，慢慢的分類…慢慢的增加囉（直到某語膩了，倒）。

基本能力：
　　1、「;」半形分號是區隔開每一語法效果的要素，如果想要下一行的語法正確呈現，前行的語法末端一定要記得分號。
　　2、不需要的語法可以不必留著，以免造成日後修改困難。
　　　(不過巴哈基本的語法不要亂刪喔，自己增加的語法才需要特別整理。)
　　3、耐心學習、檢查、測試語法，以及無法解答疑惑時求解的正確心態。

───────────────────────────────────
───────────────────────────────────
※「整體」改變最底背景、卷軸顏色、項目符號圖樣的語法。
　從BODY起到「}」結束之內容，可置於自訂編輯ＣＣＳ語法中，最抬頭，以屋主個人方便編輯的地方為主，因為此部份是整體概要方向的改造，也是需要自行增加的部份。
BODY{
border: 0px solid #ed7c76;
/*設定網頁的外框，0是無框線，數字增減可以自訂框線寬度*/
/*其中的#ed7c76是框線的顏色，可自行替換*/
background:#F6DEF0;
/*背景底色，可與底圖同時使用，也是在底圖失連時會呈現的基本色*/
background-image : url(http://myhome.apbb.com.tw/indream228/003-1.jpg);
/*背景圖片網址(http://)，圖片網址空間部分是如語家在亞固的ADSL身份下的空間*/
background-repeat:repeat; /*背景圖片重複排列*/
background-repeat:no-repeat; /*背景不重覆*/
background-repeat:repeat-x; /*背景在X軸方向重覆*/
background-repeat:repeat-y; /*背景在Y軸方向重覆*/
/*背景圖排列方式，以上擇一使用*/
background-position : right; /*背景位置靠右*/
background-position : left; /*背景圖靠左*/
background-position : center; /*背景圖置中*/　
/*背景圖呈現方式，以上擇一使用*/
background-attachment: fixed;
/*背景圖片固定，即是背景圖不會跟著畫面捲動時移動，也是一般網頁HTML常稱的浮水印*/

SCROLLBAR-FACE-COLOR: #ffffff;
/*設定軸面顏色*/
SCROLLBAR-HIGHLIGHT-COLOR:#fcb4b4;
/*設定軸面三角左邊顏色*/
SCROLLBAR-SHADOW-COLOR: #fcb4b4;
/*設定軸面三角右邊顏色*/
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
/*設定左立體邊顏色*/
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
/*設定右立體面顏色*/
SCROLLBAR-ARROW-COLOR: #fcb4b4;
/*設定箭頭的顏色*/
SCROLLBAR-TRACK-COLOR: #ffffff;
/*設定軸軌的顏色*/
/*附註：overflow:hidden(刪除捲軸)、overflow-x:hidden(刪除水平捲軸)、overflow-y:hidden(刪除垂直捲軸)*/

list-style:url(http://myhome.apbb.com.tw/indream228/006-1.gif);
/*項目符號，把網址中的圖址改成自己所需要的圖址即可*/
}

LINE 分享

留言

2007-09-02 12:09水野天成：
這幾天的小屋還真是掀起了一股CSS風潮呢ˇˇ"
不過我比較想要素材網XD
我找了好久都是找不到網頁的啦~"~
2007-09-02 12:14莉薇婭莞夢：素材?
你打「網頁收集」
MAGGY的網站還滿多素材的
2007-09-02 13:16阿罵：
阿呀!!想當初在弄部落格就弄很久了!!
小屋..慢慢來摟!!(話說我剛剛才發現可以用語法= =)
2007-09-02 13:59莉薇婭莞夢：呵呵，慢慢來ˊˇˋ
我剛剛還按到簡易版的修改送出
結果設定好的東西通通還原了~"~

要去打工了有控在來弄>///<
2007-09-02 16:47侯：
編的真細緻
很漂亮
2007-09-02 21:10莉薇婭莞夢：謝謝˙ˇ˙//
2007-09-02 20:51老爹：
好複雜喔= = 偶比較笨不過你做的不錯!!
2007-09-02 21:11莉薇婭莞夢：唔，我弄個教學?

謝謝老爹的鼓勵˙ˇ˙//
2007-09-03 19:51Beatrice：
（￣▽￣）y 期待更多教學！我的冰箱已經清出空間在等了XD
2007-09-03 19:53莉薇婭莞夢：嗯嗯～
我會加油的，話說第二篇花了我ㄧ整天在測試（汗）
2007-09-03 21:36白菊：
好清楚的教學^^
2007-09-03 21:39莉薇婭莞夢：謝謝你的誇獎@ˇ@
2007-09-03 22:54直野泉：
我推
2007-09-04 07:30昨日夢醒今日醉：
不好意思大人，這篇我再打包回去^^~推
2007-09-04 07:35莉薇婭莞夢：非常歡迎ˋ(^Q^)ˊ

---
打工去請慢用@@~
2007-09-04 16:13J i l l ~*：
寫的好仔細，可是我看的好模糊><"
怎麼固定背景，我被看不懂QQ
2007-09-05 09:03莉薇婭莞夢：background-attachment: fixed;
↑這一句貼到背景語法就可以囉˙ˇ˙
2007-09-04 16:52...：
偶然找到這裡, 受益良多 , 感謝教學分享~~O O/
2007-09-04 18:10莉薇婭莞夢：不客氣˙ˇ˙／
2007-09-04 17:03冷霜緋：
好漂亮的小屋~版美好美~收藏去~謝謝大大分享^^
2007-09-04 18:10莉薇婭莞夢：謝謝誇獎@ˇ@
不客氣^ˇ^
2007-09-04 21:38羅斯洛立安的小黃花：
寫的好清楚~
推一下:p
2007-09-05 06:21莉薇婭莞夢：謝謝˙ˇ˙//
2007-09-05 01:09Glass：
打包外帶唷，老闆　=　=+
2007-09-05 06:22莉薇婭莞夢：好的，營養便當一份~
2007-09-05 01:13依蕗：
3Q
2007-09-05 06:22莉薇婭莞夢：不客氣˙ˇ˙
2007-09-05 04:15冷焰封情：
好棒的教學文章^^
讓我對css多一層見解了^^
我要趕快收藏起來@@
謝謝大大的用心^^
2007-09-05 06:23莉薇婭莞夢：很高興有幫上你>ˇ<
2007-09-05 10:45風的名字：
謝謝妳的分享^^這個好棒喔！

來去整修小屋>\\\\<
2007-09-05 10:58莉薇婭莞夢：不客氣˙ˇ˙
祝妳裝潢大吉~XD
2007-09-05 14:19J i l l ~*：
我找不到項目符號前面，原先的綠色珠珠
沒弄掉的話，變成兩種突然都出現了><
2007-09-05 21:33莉薇婭莞夢：其實我個人也是使用覆蓋@@...
這邊我會在研究看看˙ˇ˙
2007-09-05 19:07瑜：
哇...
謝謝分享ＸＤＤ
妳整理的好好喔!
受益良多呢?
2007-09-05 21:35莉薇婭莞夢：謝謝˙ˇ˙//
2007-09-05 21:01...：
老師(舉手)--請問一下整個BLOG的背景語法要寫在哪裡?

我修改了BODY之後的背景語法, 可是不知為何只有主標題 ` 副標題的背景變更;;

那麼 , 如果我想修改整個頁面背景(像如語家的玫瑰花背景), 應該將語法寫在哪個項目呢? @ @
2007-09-05 21:37莉薇婭莞夢：請給我妳的BODY部分的語法

我看看是哪邊的問題@@"
2007-09-05 22:17...：
妳好, 我的語法如下 , 請幫我檢查一下:

/*--------------------------整體頁面設定--------------------------*/
BODY{
border:0px solid #ed7c76;

background:#ffffff

background-image:url(http://miracle-page.jp/bogantyo/sp/bg/heart-31.gif);
background-repeat:repeat;
background-attachment:fixed;

SCROLLBAR-FACE-COLOR: #ffffff;
SCROLLBAR-HIGHLIGHT-COLOR:#fcb6b6;
SCROLLBAR-SHADOW-COLOR: #fcb6b6;
SCROLLBAR-3DLIGHT-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
SCROLLBAR-ARROW-COLOR: #fcb6b6;
SCROLLBAR-TRACK-COLOR: #fcb6b6;

list-style:url(http://miracle-page.jp/bogantyo/sp/icon/heart-i11.gif); }

2007-09-06 06:55莉薇婭莞夢：您好，請將「background:#ffffff」
最後面的加上「;」分號是確定語法實行的符號之一唷，
因為你設定了無圖案顯示的背景色，
所以，系統會找到它的確定實施符號後，才會接著下一語法的呈現。
2007-09-06 04:50獄神：
謝謝
很實用的文章!!

歡迎來我的部落格留言!!
2007-09-06 06:58莉薇婭莞夢：有一ˇ一
我很乖~呵呵~
2007-09-06 14:06...：
老師(再舉手)~~我照著教學指示做 , 可是還是不行耶;;
BODY{
border:0px solid #ed7c76;
background:#ffffff;
background-image:url(http://miracle-page.jp/bogantyo/sp/bg/heart-31.gif);
background-repeat:repeat;
background-attachment:fixed;

捲軸跟選單符號都改成功了 , 不知為何只有整個頁面背景無法顯示...Orz;
2007-09-06 22:09莉薇婭莞夢：把最後面加上「}」
基本上您的背景設定沒問題，
應該是少了畫分群組休止點的「}」

如果加上去後還是不能的話，請給我你在到/*--整體文字--*/前的全部語法。
2007-09-06 14:57...：
啊~~!! 對不起;; , 剛剛用1024x768才注意到改成功了 , 謝謝~~m(__)m

不過還是想請如語傳授一下修改文章頁面的背景...

(不太會形容;; 就是如語小屋後面的玫瑰花背景, 請問是設在哪個項目下呢?)
2007-09-06 22:13莉薇婭莞夢：BODY
也就是現在您發言的這個教學語法@ˇ@
2007-09-07 12:04美聲♀淚小喵：
謝謝教學^^~ 很棒~
2007-09-07 13:10莉薇婭莞夢：謝謝~
2007-09-08 06:13木壴寸：
不推就太對不起自己了...
2007-09-08 09:03莉薇婭莞夢：謝謝˙ˇ˙
2007-09-08 17:35Beautiful Things：
在次謝謝你的分享^^
我要如何跟你左邊這背景一樣，只顯示在左就好?
目前左邊是正常但是右邊也有被切一半0.0
我已經用靠左的語法了，還缺什麼@@?大小問題?
BODY {
background-image:url(http://XXXXX);
background-position : left; /*背景圖靠左*/
}

*圖片大小:1024*120
2007-09-08 18:12Beautiful Things：
有...我用這個語法成功了^^"
background-repeat:repeat-y; /*背景在Y軸方向重覆*/
2007-09-11 11:57莉薇婭莞夢：恭喜呀>ˇ<
2007-09-09 22:22糖水‧不加糖：
讚
2007-09-11 11:58莉薇婭莞夢：謝謝˙ˇ˙//
2007-09-10 09:01*摘星子*：
感謝分享^^
2007-09-11 11:58莉薇婭莞夢：不客氣>///<
2007-09-10 13:09美聲♀淚小喵：
這個..貼上去的語法都沒有成功..

↓
list-style:url(http://myhome.apbb.com.tw/indream228/006-1.gif);
/*項目符號，把網址中的圖址改成自己所需要的圖址即可*/
}

我是貼在
/*--------------------------整體頁面設定--------------------------*/
的下面..
哪裡錯了嗎?
2007-09-11 12:27莉薇婭莞夢：一樣要放在BODY{}中間唷~
2007-09-10 13:11美聲♀淚小喵：
沒事了...
我發現是少了 → BODY{

2007-09-11 11:58莉薇婭莞夢：好˙ˇ˙~
2007-09-11 19:40烏鴉：
我只是CSS的新手(第一次用而已)

我好像失敗了....

現在我不小心把一開始的 TD{ 給消掉而且也按了確定

現在我想補回來...

但是消掉後底下的確定就不見了><"

該怎麼辦>皿<？？
2007-09-11 19:52莉薇婭莞夢：看到小屋首頁的佈置小屋了嗎XD?
點進去，最下面有沒有確定送出的按鈕?
有的話確定送出，就會回歸根本畫面(最素的畫面XD)
2007-09-11 19:54莉薇婭莞夢：如果沒有的話，問這位大大「毀滅者(yannan1)」怎麼將版面還原
2007-09-13 01:44babyfish：
呼~~~感謝阪大的教學唷~~~

雖然還在摸頭緒~~~>"<
2007-09-13 13:21莉薇婭莞夢：慢慢來，有問題可以發問的˙ˇ˙
2007-09-13 13:21﹢趴呆雪　,,　﹡：
超讚的，謝謝你><
2007-09-13 13:22莉薇婭莞夢：不客氣唷>///<
2007-09-18 14:22瑞希‧アサリン：
如語姊我想問一下右邊那排的背景要怎樣讓它變成透明的Q^Q

另外你的游標好可愛喔>///<怎麼做的0.0
2007-09-18 15:47顆顆顆顆：
好棒優
妳太厲害啦= 口 = !
2007-09-21 14:40深知：
謝謝大大提供我這麼多的資料~
我的小屋終於改完摟!~
不過雖然有些有了大大的代碼
但是看不懂代碼意思~.~
2007-09-22 10:09莉薇婭莞夢：多嘗試會懂得ＸＤ
跟ＨＴＭＬ的多數相似＠ˇ＠

ＣＳＳ玩完還可以玩變化更多的ＨＴＭＬ

還有ＪＡＶＡ、ＦＬＡＳＨ……
全部搭配起來效果非常的豐富～
2007-10-04 22:22Labyrinth：
大大~
真的好用心喔)))
厲害厲害...
我推推推~~~~
2007-10-05 21:04莉薇婭莞夢：謝謝＞／／／＜
2007-10-06 22:27RAIN：
推)))
抓起來收藏
有空偶也要改看看^^
2007-10-08 21:04天才小釣獸：
請問為什麼我輸入以下的CSS語法，上方圖沒出現耶！？

.banner{
background: repeat;(http://pic.fksite.com/08/fk_08085257.jpg)height:120px;
padding-left:20px;
padding-top:15px;
}/*小屋上方主圖*/

請問有哪裡輸入錯誤了嗎？

2007-10-08 21:28莉薇婭莞夢：.banner{
background: repeat;(http://pic.fksite.com/08/fk_08085257.jpg);/*這邊的「;」你忘記了唷，加上去就會顯示了˙ˇ˙*/
height:120px;
padding-left:20px;
padding-top:15px;
}/*小屋上方主圖*/

2007-10-08 21:30莉薇婭莞夢：糟一.一
不只

這樣才對↓
.banner{
background: repeat;
background:url(http://pic.fksite.com/08/fk_08085257.jpg);
/*這邊的「url」「;」少了，加上去就會顯示了˙ˇ˙*/
height:120px;
padding-left:20px;
padding-top:15px;
}/*小屋上方主圖*/
2007-10-13 09:44Steven：
為什麼我用這樣它還是不理我= =?

BODY{
backgronud-image:url(http://img27.picoodle.com/img/img27/9/10/12/f_m_78852ae.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
Background-position:75% 25%;
border:0px;
}

有用錯嗎?
還是語法擺放位置錯誤?
(請記住！這人很笨！)
2007-10-14 07:35莉薇婭莞夢：圖片的網址我沒看到東西＠＠
網址是否正確？
2007-10-14 07:39Steven：
恩!我看的到...

還是說我應該換上傳空間?

2007-10-14 10:22莉薇婭莞夢：換個空間看看吧，我也無法進入你的圖片網址的網站
或許有點關聯＠＠：
2007-10-18 18:12°♀冰糖可樂♂°：
我終於會用全版背景了
不好意思界抓依下你的項目符號網址@"@

我會去找別的圖圖來蓋掉的><"
因為我想試試項目符號是啥....||||

感謝大大喔~~好開心~~~
2007-10-20 07:40莉薇婭莞夢：其實在這篇教的項目符號只能掩蓋綠色的原點，
如果想要完全的取代它是有別的方法的，

沒關係，喜歡的話就帶走吧ˊˇˋ
因為我也是網路抓的圖片，如果它能夠與你家的感覺符合，
套用也不要緊，只是別直接連結我的圖片網址，
以免哪天我整理檔案翻新時，資料會不見。
2007-10-24 11:03小魚：
讚~~推推拉~~
2007-10-28 21:02莉薇婭莞夢：謝謝～（灑花花）
2007-10-26 01:33健：
雖然看過好多次了,不過還是不了解...
小弟打包回去摸索了~"~ ( ′▽`)-oGP
2007-10-28 21:19莉薇婭莞夢：因為沒附圖的關係吧＠＠Ａ
有時間再補充吧（←懶人一枚）
2007-10-28 18:45飛明神將：
還是改不出來...(默)

白搞了一兩個小時阿....(遠目)

跟語法有關的果然還是苦手阿...

不過你的部落格做的很好。(茶)
2007-10-28 21:23莉薇婭莞夢：不知道您的問題在哪裡呢＠＠
2007-10-28 22:18ChiriS：
剛用完手機認證
摁......想說去布置小屋看看
找到這篇文仔細的看了一下
我既然看不懂
對語法還真的是不行阿我
2007-10-29 20:00莉薇婭莞夢：直接套用會比較容易董
在套用之前記得先備份檔案
2007-11-04 11:57喧嘩百段：
好厲害呦~><
說明的超詳細
我也要趕快來試試看!!
謝謝你~~
2007-11-08 08:47小白菜：
嗚...請問歐

如果有了背景之後怎麼把邊框變成透明色阿(聽的董嘛= =)

有了背景圖會像我這樣點我
2007-11-08 14:22阿基仔：
好清楚的教學喔
先打包
再慢慢玩
謝謝大大無私的教學~
推一下啦~
2007-11-19 20:05Wilson：
謝謝大大的教學與解說，但小弟想問背景圖要如何隨著解析度自動變換大小呢?
>>>小弟的小屋ˇˇ"<<<

當使用1280 X 1024時可以看到整張完整背景圖，但用1024 X 768時背景圖周圍都被消掉
，請問大大我要插入哪段語法才可讓背景圖以"100%"呈現呢?
2007-11-19 20:45張弦：
感恩
2007-12-21 08:57吉綱高蓋：
3q
2007-12-29 00:31還差得遠呢0_0：
讚！
不推怎麼行
2008-01-04 19:57赫爾萊恩。小赫：
太棒了～！
我找了好久呢＞＜
小屋的語法通通看不懂．．．
我想要把它變的美美的啦！
2008-01-21 15:54狼喚夜：
謝謝~~!!!幫助了我XD!!!
2008-02-02 11:05蜜拉貝兒：
謝謝分享唷
終於會po背景圖了>"<3Q~
2008-04-21 23:36風釆鈴：
感謝如語娃娃大大的寶貴教學，小妹獲益良多，感恩^O^。
2008-05-15 12:55amomomo：
:D
2008-05-15 21:38莉薇婭莞夢：:D
2008-09-13 14:24闇葉：
感謝^0^~很實用的教學ˇ((心
2009-03-28 11:13miya：
想問一下如語
項目符號是什麼?
2009-03-28 21:03莉薇婭莞夢：就是一般巴哈預設那個綠色的點點
例如如語家←文章列表等等前方的紫色圓圈
甚至是相關文章欄位中的那個紫色圓
((兩者是通用的
2009-05-07 21:27Michaella：
謝謝分享0ˇ0
2009-10-04 18:18奶茶紋章：
幫了我很多呢!!
2009-12-29 14:17﹑為你心碎φ：
我想使用您的背景，但是套用上去了他卻沒有任何顯示 - -..
請交交我吧ˊˇˋ

小屋創作

日誌2007-09-02 12:03
【小屋】CSS自訂版面：進階─網頁外框、背景、卷軸、項目符號

相關創作

[達人專欄] 2024四月底黑糖看動畫寫超短心得

2024/04 觀看作品紀錄簡單心得視覺小說

香x無x腐~已對完答案了

留言

日誌2007-09-02 12:03【小屋】CSS自訂版面：進階─網頁外框、背景、卷軸、項目符號

相關創作

[達人專欄] 2024四月底 黑糖看動畫寫超短心得

2024/04 觀看作品紀錄簡單心得 視覺小說

香x無x腐~已對完答案了

留言

日誌2007-09-02 12:03
【小屋】CSS自訂版面：進階─網頁外框、背景、卷軸、項目符號

[達人專欄] 2024四月底黑糖看動畫寫超短心得

2024/04 觀看作品紀錄簡單心得視覺小說