創作內容

46 GP

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

作者:莉薇婭莞夢│2007-09-02 12:03:59│贊助:4│人氣:15283
前言:<本文發表於2007/09/02 最後修改於2007/09/03 19:55 如語娃娃>
  其實網路上隨便打CSS教學,自然能找到許多相關的網頁,如果想知道更多不妨在搜尋器打上「CSS 教學」。
  在這邊,如語只是將自己曾有使用到的CSS語法記錄下來,除了分享,也是方便自己個人日後想修改時方便尋找。當然,要自己方便尋找,文不會全部擠再一起,慢慢的分類…慢慢的增加囉(直到某語膩了,倒)。

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

───────────────────────────────────
───────────────────────────────────
※「整體」改變最底背景、卷軸顏色、項目符號圖樣的語法。
 從BODY起到「}」結束之內容,可置於自訂編輯CCS語法中,最抬頭,以屋主個人方便編輯的地方為主,因為此部份是整體概要方向的改造,也是需要自行增加的部份。
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);
/*項目符號,把網址中的圖址改成自己所需要的圖址即可*/
}
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=949933
All rights reserved. 版權所有,保留一切權利

相關創作

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

留言共 64 篇留言

水野天成
這幾天的小屋還真是掀起了一股CSS風潮呢ˇˇ"
不過我比較想要素材網XD
我找了好久都是找不到網頁的啦~"~

09-02 12:09

莉薇婭莞夢
素材?
你打「網頁 收集」
MAGGY的網站還滿多素材的09-02 12:14
柑罵
阿呀!!想當初在弄部落格就弄很久了!!
小屋..慢慢來摟!!(話說我剛剛才發現可以用語法= =)

09-02 13:16

莉薇婭莞夢
呵呵,慢慢來ˊˇˋ
我剛剛還按到簡易版的修改送出
結果設定好的東西通通還原了~"~

要去打工了 有控在來弄>///<09-02 13:59

編的真細緻
很漂亮

09-02 16:47

莉薇婭莞夢
謝謝˙ˇ˙//09-02 21:10
老爹
好複雜喔= = 偶比較笨 不過你做的不錯!!

09-02 20:51

莉薇婭莞夢
唔,我弄個教學?

謝謝老爹的鼓勵˙ˇ˙//09-02 21:11
Beatrice
( ̄▽ ̄)y 期待更多教學!我的冰箱已經清出空間在等了XD

09-03 19:51

莉薇婭莞夢
嗯嗯~
我會加油的,話說第二篇花了我ㄧ整天在測試(汗)09-03 19:53
白菊
好清楚的教學^^

09-03 21:36

莉薇婭莞夢
謝謝你的誇獎@ˇ@09-03 21:39
直野泉
我推

09-03 22:54

昨日夢醒今日醉
不好意思大人,這篇我再打包回去^^~推

09-04 07:30

莉薇婭莞夢
非常歡迎ˋ(^Q^)ˊ

---
打工去請慢用@@~09-04 07:35
J i l l ~*
寫的好仔細,可是我看的好模糊><"
怎麼固定背景,我被看不懂QQ

09-04 16:13

莉薇婭莞夢
background-attachment: fixed;
↑這一句貼到背景語法就可以囉˙ˇ˙09-05 09:03
...
偶然找到這裡, 受益良多 , 感謝教學分享~~O O/

09-04 16:52

莉薇婭莞夢
不客氣˙ˇ˙/09-04 18:10
冷霜緋
好漂亮的小屋~版美好美~收藏去~謝謝大大分享^^

09-04 17:03

莉薇婭莞夢
謝謝誇獎@ˇ@
不客氣^ˇ^09-04 18:10
羅斯洛立安的小黃花
寫的好清楚~
推一下:p

09-04 21:38

莉薇婭莞夢
謝謝˙ˇ˙//09-05 06:21
Glass
打包外帶唷,老闆 = =+

09-05 01:09

莉薇婭莞夢
好的,營養便當一份~09-05 06:22
依蕗
3Q

09-05 01:13

莉薇婭莞夢
不客氣˙ˇ˙09-05 06:22
冷焰封情
好棒的教學文章^^
讓我對css多一層見解了^^
我要趕快收藏起來@@
謝謝大大的用心^^

09-05 04:15

莉薇婭莞夢
很高興有幫上你>ˇ<09-05 06:23
風的名字
謝謝妳的分享^^這個好棒喔!

來去整修小屋>\\\\<

09-05 10:45

莉薇婭莞夢
不客氣˙ˇ˙
祝妳裝潢大吉~XD09-05 10:58
J i l l ~*
我找不到項目符號前面,原先的綠色珠珠
沒弄掉的話,變成兩種突然都出現了><

09-05 14:19

莉薇婭莞夢
其實我個人也是使用覆蓋@@...
這邊我會在研究看看˙ˇ˙09-05 21:33

哇...
謝謝分享XDD
妳整理的好好喔!
受益良多呢?

09-05 19:07

莉薇婭莞夢
謝謝˙ˇ˙//09-05 21:35
...
老師(舉手)--請問一下整個BLOG的背景語法要寫在哪裡?

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

那麼 , 如果我想修改整個頁面背景(像如語家的玫瑰花背景), 應該將語法寫在哪個項目呢? @ @

09-05 21:01

莉薇婭莞夢
請給我妳的BODY部分的語法

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

/*--------------------------整體頁面設定--------------------------*/
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); }

09-05 22:17

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

歡迎來我的部落格留言!!

09-06 04:50

莉薇婭莞夢
有一ˇ一
我很乖~呵呵~09-06 06:58
...
老師(再舉手)~~我照著教學指示做 , 可是還是不行耶;;
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;

09-06 14:06

莉薇婭莞夢
把最後面加上「}」
基本上您的背景設定沒問題,
應該是少了畫分群組休止點的「}」

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

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

(不太會形容;; 就是如語小屋後面的玫瑰花背景, 請問是設在哪個項目下呢?)

09-06 14:57

莉薇婭莞夢
BODY
也就是現在您發言的這個教學語法@ˇ@09-06 22:13
美聲♀淚小喵
謝謝教學^^~ 很棒~

09-07 12:04

莉薇婭莞夢
謝謝~09-07 13:10
Mat
不推就太對不起自己了...

09-08 06:13

莉薇婭莞夢
謝謝˙ˇ˙
09-08 09:03
Beautiful Things
在次謝謝你的分享^^
我要如何跟你左邊這背景一樣,只顯示在左就好?
目前左邊是正常但是右邊也有被切一半0.0
我已經用靠左的語法了,還缺什麼@@?大小問題?
BODY {
background-image:url(http://XXXXX);
background-position : left; /*背景圖靠左*/
}

*圖片大小:1024*120

09-08 17:35

Beautiful Things
有...我用這個語法成功了^^"
background-repeat:repeat-y; /*背景在Y軸方向重覆*/

09-08 18:12

莉薇婭莞夢
恭喜呀>ˇ<09-11 11:57
糖水‧不加糖

09-09 22:22

莉薇婭莞夢
謝謝˙ˇ˙//09-11 11:58
*摘星子*
感謝分享^^

09-10 09:01

莉薇婭莞夢
不客氣>///<09-11 11:58
美聲♀淚小喵
這個..貼上去的語法都沒有成功..


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

我是貼在
/*--------------------------整體頁面設定--------------------------*/
的下面..
哪裡錯了嗎?

09-10 13:09

莉薇婭莞夢
一樣要放在BODY{}中間唷~09-11 12:27
美聲♀淚小喵
沒事了...
我發現是少了 → BODY{

09-10 13:11

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

我好像失敗了....

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

現在我想補回來...

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

該怎麼辦>皿<??

09-11 19:40

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

雖然還在摸頭緒~~~>"<

09-13 01:44

莉薇婭莞夢
慢慢來,有問題可以發問的˙ˇ˙09-13 13:21
﹢趴呆雪 ,, ﹡
超讚的,謝謝你><

09-13 13:21

莉薇婭莞夢
不客氣唷>///<09-13 13:22
瑞希‧アサリン
如語姊 我想問一下右邊那排的背景要怎樣讓它變成透明的Q^Q

另外 你的游標好可愛喔>///<怎麼做的0.0

09-18 14:22

不在了
好棒優
妳太厲害啦= 口 = !

09-18 15:47

深知
謝謝大大提供我這麼多的資料~
我的小屋終於改完摟!~
不過雖然有些有了大大的代碼
但是看不懂代碼意思~.~

09-21 14:40

莉薇婭莞夢
多嘗試會懂得XD
跟HTML的多數相似@ˇ@

CSS玩完還可以玩變化更多的HTML

還有JAVA、FLASH……
全部搭配起來效果非常的豐富~09-22 10:09
Labyrinth
大大~
真的好用心喔)))
厲害厲害...
我推推推~~~~

10-04 22:22

莉薇婭莞夢
謝謝>///<10-05 21:04
RAIN
推)))
抓起來收藏
有空偶也要改看看^^

10-06 22:27

天才小釣獸
請問為什麼我輸入以下的CSS語法,上方圖沒出現耶!?

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


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

10-08 21:04

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

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

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;
}

有用錯嗎?
還是語法擺放位置錯誤?
(請記住!這人很笨!)

10-13 09:44

莉薇婭莞夢
圖片的網址我沒看到東西@@
網址是否正確?10-14 07:35
天痕隨風舞
恩!我看的到...

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

10-14 07:39

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

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

感謝大大喔~~好開心~~~

10-18 18:12

莉薇婭莞夢
其實在這篇教的項目符號只能掩蓋綠色的原點,
如果想要完全的取代它是有別的方法的,

沒關係,喜歡的話就帶走吧ˊˇˋ
因為我也是網路抓的圖片,如果它能夠與你家的感覺符合,
套用也不要緊,只是別直接連結我的圖片網址,
以免哪天我整理檔案翻新時,資料會不見。10-20 07:40
魚魚
讚~~推推拉~~

10-24 11:03

莉薇婭莞夢
謝謝~(灑花花)10-28 21:02

雖然看過好多次了,不過還是不了解...
小弟打包回去摸索了~"~ ( ′▽`)-oGP

10-26 01:33

莉薇婭莞夢
因為沒附圖的關係吧@@A
有時間再補充吧(←懶人一枚)10-28 21:19
飛明神將
還是改不出來...(默)

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

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

不過你的部落格做的很好。(茶)

10-28 18:45

莉薇婭莞夢
不知道您的問題在哪裡呢@@10-28 21:23
ChiriS
剛用完手機認證
摁......想說去布置小屋看看
找到這篇文仔細的看了一下
我既然看不懂
對語法還真的是不行阿我

10-28 22:18

莉薇婭莞夢
直接套用會比較容易董
在套用之前記得先備份檔案10-29 20:00
喧嘩百段
好厲害呦~><
說明的超詳細
我也要趕快來試試看!!
謝謝你~~

11-04 11:57

小白菜
嗚...請問歐

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

有了背景圖 會像我這樣'點我'

11-08 08:47

阿基仔
好清楚的教學喔
先打包
再慢慢玩
謝謝大大無私的教學~
推一下啦~

11-08 14:22

Wilson
謝謝大大的教學與解說,但小弟想問背景圖要如何隨著解析度自動變換大小呢?
'>>>小弟的小屋ˇˇ"<<<'

當使用1280 X 1024時可以看到整張完整背景圖,但用1024 X 768時背景圖周圍都被消掉
,請問大大我要插入哪段語法才可讓背景圖以"100%"呈現呢?

11-19 20:05

張弦
感恩

11-19 20:45

吉綱高蓋
3q

12-21 08:57

還差得遠呢0_0
讚!
不推怎麼行

12-29 00:31

赫爾萊恩。小赫
太棒了~!
我找了好久呢><
小屋的語法通通看不懂...
我想要把它變的美美的啦!

01-04 19:57

狼喚夜
謝謝~~!!!幫助了我XD!!!

01-21 15:54

蜜拉貝兒
謝謝分享唷
終於會po背景圖了>"<3Q~

02-02 11:05

風釆鈴
感謝 如語娃娃 大大的寶貴教學,小妹獲益良多,感恩^O^。

04-21 23:36

阿默
:D

05-15 12:55

莉薇婭莞夢
:D05-15 21:38
闇葉
感謝^0^~很實用的教學ˇ((心

09-13 14:24

Roy
想問一下如語
項目符號是什麼?

03-28 11:13

莉薇婭莞夢
就是一般巴哈預設那個綠色的點點
例如如語家←文章列表等等前方的紫色圓圈
甚至是相關文章欄位中的那個紫色圓
((兩者是通用的03-28 21:03
Michaella
謝謝分享0ˇ0

05-07 21:27

GOT7
幫了我很多呢!!

10-04 18:18

﹑為你心碎φ
我想使用您的背景,但是套用上去了 他卻沒有任何顯示 - -..
請交交我吧ˊˇˋ

12-29 14:17

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

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

前一篇:【小屋】項目符號變成星星... 後一篇:【小屋】CSS自訂版面:...

追蹤私訊

作品資料夾

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

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