創作內容

46 GP

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

作者：莉薇婭莞夢│2007-09-02 12:03:59│巴幣：4│人氣：15973

前言：＜本文發表於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);
/*項目符號，把網址中的圖址改成自己所需要的圖址即可*/
}

喜歡 46 收藏 220 引用 2 留言推上首頁檢舉

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

相關創作

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

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

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

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

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

【小屋】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

瑜：
哇...
謝謝分享ＸＤＤ
妳整理的好好喔!
受益良多呢?

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

木壴寸：
不推就太對不起自己了...

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

莉薇婭莞夢：
多嘗試會懂得ＸＤ
跟ＨＴＭＬ的多數相似＠ˇ＠

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

還有ＪＡＶＡ、ＦＬＡＳＨ……
全部搭配起來效果非常的豐富～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

Steven：
為什麼我用這樣它還是不理我= =?

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

Steven：
恩!我看的到...

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

10-14 07:39

莉薇婭莞夢：
換個空間看看吧，我也無法進入你的圖片網址的網站
或許有點關聯＠＠：10-14 10:22