使用css 设计版面与特效.pdf

The Most Effective Way For Learning Front-End Web Programming 第8 章 使用CSS 設計 版面與特效 本投影片 （下稱教用資源）僅授權給採用教用資源相關之旗標書籍為教科書之授課老師 （下稱老師）專用 ， 老師為教學使用之目的 ，得摘錄 、編輯 、重製教用資源 （但使用量不得超過各該教用資源內容之80% ）以製 作為輔助教學之教學投影片 ，並於授課時搭配旗標書籍公開播放 ，但不得為網際網路公開傳輸之遠距教學 、 網路教學等之使用；除此之外 ，老師不得再授權予任何第三人使用 ，並不得將依此授權所製作之教學投影片 之相關著作物移作他用 。 著作權所有© 旗標出版股份有限公司 8-1 CSS BOX 模型 » 認識CSS BOX 模型 認識CSS BOX 模型 認識CSS BOX 模型 認識CSS BOX 模型 » margin ：最外圈的部份, 中文可稱為邊界。 » border ：框線。 » padding ：內距, 是元素內容(例如文字) 與框 線間的留白部份 » 內容區(Content Area) ：元素內容的文字或圖 片。 認識CSS BOX 模型 認識CSS BOX 模型 認識CSS BOX 模型 認識CSS BOX 模型 設定區塊大小 設定區塊大小 8-2 控制元素定位 » 使用float 屬性製作文繞圖效果 使用float 屬性製作文繞圖效果 使用float 屬性製作文繞圖效果 使用float 屬性製作文繞圖效果 » div 元素 ˃ div 是區塊元素；span 則為行內元素。想替HTML 文件局部內容套 用CSS 樣式或用JavaScript 控制, 就可以視情況使用div 或span 元 素來標示。 利用clear 屬性限制區塊左右 有無float 區塊 » none ：預設值, 維持原排列方式。 » left ：若左邊出現float 區塊, 則將本區塊向下 移, 直到左邊沒有float 區塊為止。 » right ：若右邊出現float 區塊, 則將本區塊向 下移, 直到右邊沒有float 區塊為止。 » both ：若左右任一邊出現float 區塊, 則將本 區塊向下移, 直到兩邊都沒有float 區塊為止 。 利用clear 屬性限制區塊左右 有無float 區塊 使用position 屬性定位 » static ：預設值, 表示採預設的排版方式。 » relative ：指定相對位置 使用position 屬性定位 » absolute ：指定絕對位置。 使用position 屬性定位 » fixed ：表示區塊會固定在瀏覽器視窗畫面上, 同樣不依預設方式排列 使用position 屬性定位 使用position 屬性定位 8-3 多欄版面的設計 » 兩欄式版面 兩欄式版面 兩欄式版面 兩欄式版面 8-4 CSS 特效 » 濾鏡特效 ˃ -webkit- ：適用於Chrome, Opera 和Safari 瀏覽器。 ˃ -moz- ：適用於Firefox 瀏覽器。 ˃ -ms- ：適用於Internet Explorer 瀏覽器。 濾鏡特效 濾鏡特效 濾鏡特效 濾鏡特效 濾鏡特效 濾鏡特效 陰影特效 » X 軸偏移及Y 軸位偏移：這2 個值為必要參 數 » 模糊半徑：此為選用參數, 用來設定陰影的邊 緣是平滑(預設值) 或是有模糊的效果。 » 陰影顏色：選用參數。 陰影特效 陰影特效 陰影特效 陰影特效 轉移特效 » transition-duration ：指定轉移過程時間長度, 預設為0 秒。 » transition-delay ：指定轉移延遲多久才開始, 預設為 0 秒。 » transition-property ：指定轉移的屬性, 預設為 所有屬性。 » transition-timing-function ：