JVJ
看板 ott
作者
標題
 Xuite自定CSS樣式教學系列二:頁面主體(背景圖片等等)

時間 2010年11月09日 Tue. AM 09:11:44


在Xuite Blog CSS樣式裡面的第二部份是Body { ..... },定義整體畫面主體的顯示樣式,直覺地看字眼,Body:就是身體,就是主體啦。

在接下來要進入到各個更細部的定義之前,我覺得要先講一下Body跟其他區塊的關係!


首先我畫一張圖,來表示一下一個我們看到的Xuite Blog網頁區塊圖,從最上面來看,我把畫面打橫來看(網頁的上面在左邊、下面在右邊),我以三欄式來做說明,基本上我們應該可以看到最上方的區塊banner,最下面的區塊footer,以及中間區塊[包括有linksLeft、mid、linksRight(由左而右)],等等的基本區塊。

這些區塊從上圖中,我們可以看到它們是在Container區塊之上,Container又在body之上!

所以body幾乎可以算是最底層的CSS定義!當然那個HTML的區塊又更下一層。

好了!對於每個區塊我們大致上知道了它們的顯示的位置後(上下位置),這樣我們就知道,為什麼有些時候我們改掉部份的設定,確沒有看到改變,有時是因為被遮蔽在下面,所以沒有發覺它的改變。

上面的那張圖的左側我有貼一些圖片,其實它就是Xuite CSS裡面白色聖誕樣式的範例底圖,我稍為說一下↓
body{ 
    margin:0px 0px 0px 0px;
    text-align: center;
    background-image:url(http://s.blog.xuite.net/_image/skin/background/45/blogBg_2.gif);
    background-attachment:fixed;
    background-repeat:repeat;
}

在body裡面的背景圖片,有設定http://s.blog.xuite.net/_image/skin/background/45/blogBg_2.gif為底圖,這個圖片就是↓
,然後搭配background-attachment:fixed;以及background-repeat:repeat;的CSS語法定義,讓這個Body區塊層的背景圖樣是固定不動!(拉動捲軸時,它不會跟著動),而且它是重覆貼圖片,充滿整個Body層。

我擷取畫面說明一下↓

因為Body底圖在蠻下面的圖層,所以我們用捲軸拉到畫面最下方才看到部份的雪花背景,閱讀部份文章或是日誌首頁還甚至會看不到,主要是因為CSS樣式裡面的Container區塊有定義其背景色為白色↓
/*定位框*/
#container {
        position:relative;
        text-align: left;      /*width:85%;*/      behavior:expression( this.style.width =  (document.documentElement.offsetWidth<990)?"990px":"100%");
min-width:990px;
  padding:0px 0px 0px 0px;
     margin:0px auto;
  background:#FFFFFF;
        }

因此,有文章的顯示部份會填入背景色,因此我們很難看到最下層的body的背景圖。

然後我們看到banner區塊的背景圖片有定義↓

,其CSS語法為↓
/*檔頭*/
#banner{
    margin: 0px 5px 0px 5px;
 padding: 0px;
 height: 200px;
 background-image:url(http://s.blog.xuite.net/_image/skin/background/45/blogBg_1.jpg);
 background-repeat:no-repeat;
     
}
所以banner背景圖片就會遮住body的背景圖片(因為它的圖層比較上面)。

這樣子說明一次,大家就有些許瞭解了嘛!?

所以我們回過頭來看body這段CSS語法中,Xuite定義了什麼?↓
body{  
    margin:0px 0px 0px 0px;
    text-align: center;
 background-image:url(http://s.blog.xuite.net/_image/skin/background/45/blogBg_2.gif);
 background-attachment:fixed;
 background-repeat:repeat;

}
我們一行一行來說明一下↓
margin:0px 0px 0px 0px;

說明:margin語法是定義這個圖層區塊在下一層圖層裡面的顯示邊緣為多少?其標準的各個參數依序是:top, right, bottom, left。也就是↓
margin: margin-top margin-right margin-bottom margin-left;

它是定義這個圖層顯示與下一層(Parent)間的邊緣距離↓


text-align: center;

顧名思義,就是在Body這個區塊裡面的字是置中對齊(center)。
標準的text-alagn可以設定的參數有:
left;    /* Aligns the text to the left */
right;   /* Aligns the text to the right */
center;  /* Centers the text */
justify; /* 我也不知道倒底是啥意思 */

background-image:url(http://s.blog.xuite.net/_image/skin/background/45/blogBg_2.gif);
前面我們已然講過background-image圖片的部份,其語法就是background-img:url(圖片網址);可以是.jpg, .gif的格式檔(其他格式沒試過ㄝ)。

background-repeat:repeat;

這個是指背景圖片反覆貼,跟貼磁磚一樣,從左至右,從上到下貼滿。
標準的重覆貼的參數有:
repeat;    /* 背景 repeated vertically and horizontally */
repeat-x;  /* 背景 repeated horizontally 從左至右一列 */
repeat-y;  /* 背景 repeated vertically 從上到下一行*/
no-repeat; /* 背景不重覆,只顯示一張*/

另外補充一些相關的語法↓
background-attachment:fixed; /*背景固定不動 */

如果要隨著捲動,可以改為↓
background-attachment:scroll;

background-color: #00ff00; /* 背景色 填入色碼 */

background-color: transparent; /* 背景透明 */

background-position:   /* 背景圖片位置,參數有↓ */
top left;       /* 左上 */
top center;     /* 中上 */
top right;      /* 右上 */
center left;    /* 中左 */
center center;  /* 中中 */
center right;   /* 中右 */
bottom left;    /* 左下 */
bottom center;  /* 中下 */
bottom right;   /* 右下 */
x-% y-%;        /* 水平 x軸 的百分比位置, y軸 的百分比位置 */
x-pos y-pos;    /* 水平 x軸 的絕對位置, y軸 的絕對位置 */

其他跟底圖有關的,可以參考我以前寫的相關文章↓

>自定CSS將Blog底圖換掉
  ※
自定CSS將Blog底圖換掉之補充說明(將Blog的底圖換成自己想要的)


--
※ 來源: Disp BBS 看板: ott 文章連結: http://disp.cc/b/18-JVJ
※ 作者: ott  時間: 2010-11-09 09:11:44  來自: 118-166-6-55.dynamic.hinet.net
※ 看板: ott 文章推薦值: 0 目前人氣: 0 累積人氣: 266 
x)推文 r)回覆 編輯(e) 刪除(d) M)收藏 ^x)轉錄 同主題: =)首篇 [)上篇 ])下篇