線上書籍

Home

[1031]XOOPS佈景設計

一、 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盒狀模型

三、 用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 ，花邊圖2）
  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（空的內容時）