CSS排版：盒子模式 靜宜大學 資管系 楊子青
The CSS Box Model 邊界 邊框 邊界留白 HTML元件 一個 Box 的實際寬度 (高度) 是由 padding + border + width (height) 所組成
練習實例：pucsim_intr.htm <!DOCTYPE html> #csim2 { <html lang="zh-TW"> <head> <title>靜宜資管特色</title> <meta charset="utf-8"> <style type="text/css"> div { color: blue; font-family: "標楷體"; } #csim1 { background-color: yellow; margin-top: 10px; margin-bottom: 20px; margin-left: 30px; border-style: double; border-width: 5px; padding-top: 20px; padding-left: 50px; width: 500px; height: 30px; #csim2 { background-color: #55ffaa; position: relative; top: -20px; left: 50px; z-index: 1; width:250px; height:150px; } #csim3 { background-color: #EAD3EB; border-style: ridge; position: absolute; top: 100px; left: 300px; z-index: 2; width: 250px; height: 200px; </style> </head> <body> <div id="csim1"> 靜宜大學資管系<a href="http://www.csim.pu.edu.tw/intro/super_pages.php?ID=intro1">教學特色</a> </div> <div id="csim2"> 專案實作課程：透過此課程的設計，讓學生瞭解尊重專業分工、講究團隊合作的重要性，並學習能在一個團隊中善盡責任、與其他成員合作無間，更進而激發所有成員的潛能，造就整個團隊的成功。 <div id="csim3"> 畢業專題成果展：資訊學院三系每年共同舉辦的畢業專題成果展，包括口試、競賽與展覽三階段，透過此嚴謹驗收的程序，讓學生嚴肅、認真面對自己的作品，並學習如何進行作品的行銷與包裝。 </body> </html>
大綱 邊界 邊框 邊界留白 定位
1. 邊界 (Margin) 設定四個邊界，例如： 一次設定好邊界值，例如： margin-top:100px; (上邊界) margin-right:50px; (右邊界) margin-bottom:100px; (下邊界) margin-left:50px; (左邊界) http://www.w3schools.com/css/tryit.asp?filename=trycss_margin_sides 一次設定好邊界值，例如： margin:25px 50px 75px 100px; 表示top margin is 25px; right margin is 50px; bottom margin is 75px; left margin is 100px margin:25px 50px 75px; 表示top margin is 25px; right and left margins are 50px; bottom margin is 75px margin:25px 50px; 表示top and bottom margins are 25px; right and left margins are 50px margin:25px; 表示all four margins are 25px
練習實例：pucsim_intr.htm 請自行調整#csim1之樣式，觀看結果： margin-top: 10px; margin-bottom: 20px; margin-left: 30px;
2. 邊框 (Border) 屬性 屬性名稱 設定值 border-style 邊框樣式 none(預設值) solid double groove ridge inset outset border-top-style border-left-style border-bottom-style border-right-style 上下左右四邊的邊框樣式 同border-style border-width 邊框寬度 寬度數值+單位 thin(薄) thick(厚) medium(中等，預設值) border-top-width border-left-width border-bottom-width border-right-width 上下左右四邊的寬度 同border-width
邊框 (Border) 屬性 屬性名稱 設定值 border-color 邊框顏色 顏色名稱 16進位(HEX)碼 RGB碼 border-top-color border-left-color border-bottom-color border-right-color 上下左右四邊的邊框顏色 同border-color border 綜合設定 border-radius 邊框導圓角 長度(px)或百分比(%) border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius 上下左右四邊導圓角 border-image 花邊框線
練習實例：pucsim_intr.htm 請自行調整#csim1之樣式，觀看結果： border-style: double; border-width: 5px;
線上網站：邊框 CSSMatic 網址：http://www.cssmatic.com/ GRADIENT GENERATOR (漸層) BORDER RADIUS (圓角) NOISE TEXTURE BOX SHADOW
線上網站：邊框 LAYERSTYLES 網址：http://layerstyles.org/
padding 會在元素內容的周圍加上我們所指定大小的空間 padding-top 上邊界留白距離 padding-right 右邊界留白距離 padding-bottom 下邊界留白距離 padding-left 左邊界留白距離
練習實例：pucsim_intr.htm 請自行調整#csim1之樣式，觀看結果： padding-top: 20px; padding-left: 50px;
4. 定位 一般定位 屬性 屬性名稱 設定值 position 設定元件位置的排列方式 absolute relative static width 指定元件寬度 寬度數值 height 指定元件高度 高度數值 left 指定元件與左邊界的距離(X座標) 距離數值 top 指定元件上邊界的距離(Y座標) overflow 超出邊界的顯示方式 visibility 設定是否顯示 visible hidden inherit
定位 z-index： 層次數值，例如： <img src="sample.gif" style="position:absolute; top:30; left:30; z-index:1;">
練習實例：pucsim_intr.htm 請自行調整#csim2與#csim3之樣式，觀看結果： #csim2 { position: relative; top: -20px; left: 50px; z-index: 1; width:250px; height:150px; } #csim3 { position: absolute; top: 100px; left: 300px; z-index: 2; width: 250px; height: 200px; }
實作：網頁置中排版實例
Step 1 <!DOCTYPE html> <html lang="zh-TW"> <head> <title>置中排版實例</title> <meta charset="utf-8"> </head> <body> <div id="title1">標題一</div> <div id="content1">本文一</div> <div id="title2">標題二</div> <div id="content2">本文二</div> <div id="title3">標題三</div> <div id="content3">本文三</div> <div id="content4">版權所有：靜宜大學資管系<br />楊子青</div> </body> </html>
Step 2 <style type="text/css"> #content1, #content2 { * { font-family: "標楷體"; font-size: 14pt; } body { background-color: #BCB1F0; width: 100%; #title1 { color: white; background-color: #A63C6F; #title2 { background-color: #7FB33D; #title3 { background: #FFACAA; #content1, #content2 { color: black; background-color: #F5F5dd; } #content3 { background-color: #EBE298; #content4 { background-color: #51629C; color: #C5EBE7; text-align: center; </style>
Step 3 #wrapper{ width:960px; height: 850px; margin:0 auto; } </style> </head> <body> <div id="wrapper"> <div id="title1">標題一</div> <div id="content1">本文一</div> <div id="title2">標題二</div> <div id="content2">本文二</div> <div id="title3">標題三</div> <div id="content3">本文三</div> </div>
Step 4 #title1, #title2{ width: 590px; height: 30px; border: 5px; border-style: solid; border-color: white; } #content1, #content2 { width: 570px; height: 300px; padding: 10px;
Step 5 #title3 { width: 350px; height: 30px; border: 5px; border-style: solid; border-color: white; position: relative; top: -740px; left: 600px; }
Step 6 #content3 { width: 330px; height: 670px; border: 5px; border-style: solid; border-color: white; padding: 10px; position: relative; top: -740px; left: 600px; }
參考資料 教科書 網路資源 榮欽科技、陳婉凌，網頁設計必學的程式實作技術：HTML5+CSS3+JavaScript，2012年，博碩。 Chap 14: CSS排版技巧 網路資源 http://www.w3schools.com/css/ http://www.jaceju.net/blog/archives/17/