Tad 教材網 - 線上書籍

:::

\[1031\]XOOPS佈景設計
=================

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/1031/03.zip)

### 一、 CSS框線設定

1. border: 寬度 線條類型 顏色
2. 線條類型：none（無邊框）、hidden（隱藏邊框。IE7及以下尚不支持）、dotted（ 點狀）、dashed（虛線）、solid（實線）、double（雙線）、groove（3D凹槽）、ridge（3D凸槽）、inset（3D凹邊）、outset（3D凸邊）
3. 亦可用border-top、border-left、border-bottom、border-right分開設定
 
### 二、 CSS盒狀模型

![](http://www.tad0616.net/uploads/tad_book3/image/css_box.png)

### 三、 用position來控制元件位置

1. position:static「靜態」這是網頁的預設值。
2. position:relative 「相對」指的是相對該元素原來所在的位置（下一個元素並不會隨之起舞），可用 top、bottom、left、right來調整該元素位置。
3. position:absolute「絕對」指的是相對於整個網頁最左上角的位置（此元素會飄起來，下一個元素會當作它不存在一樣遞補其位置），一樣可用top、bottom、left、right來調整該元素位置。position:absolute搭配z-index，可以將元素進行上下排列。一般而言，z-index預設值為0。
4. position:fixed「固定」指的是相對於整個視窗最左上角的位置（此元素也會飄起來，下一個元素一樣當作它不存在而遞補其位置），可用top、bottom、left、right來調整該元素位置，不管視窗如何捲動，永遠保持在固定位置（可用來做浮動視窗）。要注意的是該死的IE6要使用!DOCTYPE 聲明指定standards-compliant（標準）模式才能正常使用。
 
### 四、 position:relative + position:absolute

1. 當position:relative包著position:absolute的時候，後者就會改以前者的位置危基準，而非整個視窗。
2. 假設main包著sidebar-left（左欄）content（中欄）及sidebar（右欄）
3. 兩欄式content（中欄）及sidebar（右欄）：將main設為relative，寬為980px 
  - (1) content寬度假設為600，位置不設，或設為relative均可。
  - (2) sidebar設為absolute，寬度設為300px，高度隨意，right及top為0px;。
4. 三欄式：將main設為relative，寬度設為980px 
  - (1) sidebar-left：位置absolute，寬設為200px，高度隨意，left及top為0px;。
  - (2) content：位置relative（撐開），寬為520px，left為200px，top為0px;。
  - (3) sidebar：位置absolute，寬設為200px，高度隨意，right及top為0px;。
5. 用位置來做三欄式並不好做（因為要顧慮設為relative的元素必須是內容最長的，才能撐開版面，以避免下方元素跑上來重疊在一起），因此建議改用float方式來做為佳。
 
### 五、 用float浮動做三欄式

1. 用float浮動位置，整體寬度建議仔細計算（包含框、padding...等），寧可小於整體寬度，盡量別超出整體寬度，避免位置跑掉。
2. main寬度設為980px，overflow為auto（讓區塊高度隨內容決定），overflow其值另有visible（預設）、hidden（超出部份癮隱藏）、scroll（秀出捲軸） 
  - (1) sidebar\_left，寬度設為200px，float為left
  - (2) content，寬度設為520px，float為left
  - (3) sidebar，寬度設為200px，float為left或right都無所謂
3. 下一個元素（如footer）配合 clear:both; 可以將浮動效果清除掉。
 
### 六、 改成隨寬度變化

1. 寬度均改為百分比，padding或margin也是要改成百分比，總和勿超過100%
2. 亦可設定min-width或max-width來設定寬度的上下限，避免過小或過大。
 
### 七、 CSS3圓角框設定

1. 整體：border-radius: 5px;
2. 上左：border-top-left-radius: 5px;
3. 上右：border-top-right-radius: 5px;
4. 下左：border-bottom-left-radius: 5px;
5. 下右：border-bottom-right-radius: 5px;
6. 基本上可以分開設定寬和高，亦可用%或各種css單位來顯示
 
### 八、 一個效果各自表述：前綴詞

1. IE前綴詞：-ms-
2. FireFox前綴詞：-moz-
3. Opera前綴詞：-o-
4. chrome或safari：-webkit-
 
### 九、 box-shadow盒子陰影

1. box-shadow:none; 無陰影
2. box-shadow: 水平偏移 垂直偏移 模糊值 延伸值 顏色 inset; （除了模糊值外，其餘皆可負值）
 
### 十、 border-image花邊設定 （[花邊圖1](http://www.tad0616.net/uploads/tad_book3/file/border.png) ，[花邊圖2](http://www.tad0616.net/uploads/tad_book3/file/border.jpg)）

1. 搭配border:20px solid transparent;使用
2. border-image: 圖片來源 圖片切割範圍 背景圖片寬度 超界幅度 背景圖顯示方式 
  - (1) 圖片來源：用 url(圖片位置)來載入圖片，如url(images/border.png)
  - (2) 圖片切割範圍：將圖片以九宮格方式切開，其切割的寬高，如：27 即上右下左切用27x27去切割。若 27 13 則是上下用27切割，左右用13切割
  - (3) 背景圖片寬度：預設為1，若是2表示用一張底圖放大成兩倍位置，由於同為數字，可能會和前面的切割範圍混淆，故加個 / 以區隔之。
  - (4) 超界幅度：圖片在外框上的位置，若0則是從外框內部開始套用，越大就越往外。
  - (5) 背景圖顯示方式：repeat（重複填滿）、stretch（拉長）、round（重複填滿並自動調整圖片，預設）
 
### 十一、 CSS進階的選擇器

1. div \*{color:red;}，意指<div>下任何標籤裡的所有元素文字均為紅色。
2. div\[class\]{color:red;}，意指<div>標籤中，若有用到屬性class 者其文字為紅色。
3. div\[class="good"\]{color:red;}，意指<div>標籤中屬性 class 值等於good者，其文字為紅色。
4. div\[class~="good"\]，意指<div>標籤中屬性 class 值中有包含good 者（如class="cool good nice"），其文字為紅色。
5. div\[class|="good"\]，意指<div>標籤中屬性 class 的值中有連字號「-」，且為good開頭者（如class="good-bye"），其文字為紅色。
6. div\[class^="good"\]，意指<div>標籤中屬性 class 的值中以good開頭者（如class="goodbye"），其文字為紅色。
7. div\[class$="good"\]，意指<div>標籤中屬性 class 的值中以good結尾者（如class="very\_good"），其文字為紅色。
8. div\[class\*="good"\]，意指<div>標籤中屬性 class 的值中有含有good者（如class="mygoodness"），其文字為紅色。
 
### 十二、 CSS幾種專屬的選擇器

1. 連結有四種狀態：a:link（未參觀過的連結）、a:active（正要參觀過的連結）a:visited（參觀過的連結）a:hover（滑鼠正移到的連結）
2. 表單：input:focus（正在該輸入框中）、input:lang(zh-tw)（表單中有設定語言的輸入框）、input:enabled（表單中可用的輸入框）、input:disabled（表單中不可用的輸入框）、input:checked（表單中被選取的輸入框）
3. 其他div:target（被連結的目的地）、td:empty（空的內容時）

:::