:::

3. CSS3與版面布局

一、 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(空的內容時)

:::

搜尋


書籍目錄

展開 | 闔起

線上使用者

11人線上 (2人在瀏覽線上書籍)

會員: 0

訪客: 11

更多…