DOCTYPE html html langzhTW pucsimintr htm csim 2
- Slides: 24
網頁設計 實務 <!DOCTYPE html> <html lang="zh-TW"> 練習實例：pucsim_intr. htm #csim 2 { background-color: #55 ffaa; <head> <title>靜宜資管特色</title> <meta charset="utf-8"> position: relative; top: -20 px; left: 50 px; <style type="text/css"> z-index: 1; div { color: blue; font-family: "標楷體"; } width: 250 px; height: 150 px; #csim 1 { background-color: yellow; } #csim 3 { background-color: #EAD 3 EB; border-style: ridge; margin-top: 10 px; margin-bottom: 20 px; margin-left: 30 px; position: absolute; top: 100 px; left: 300 px; z-index: 2; border-style: double; border-width: 5 px; padding-top: 20 px; padding-left: 50 px; width: 500 px; height: 30 px; } <body> <div id="csim 1"> 靜宜大學資管系<a href="http: //www. csim. pu. edu. tw/intro/super_pages. ph p? ID=intro 1">教學特色</a> </div> <div id="csim 2"> 專案實作課程：透過此課程的設計，讓學生瞭解尊 重專業分 、講究團隊合作的重要性，並學習能在 一個團隊中善盡責任、與其他成員合作無間，更進 而激發所有成員的潛能，造就整個團隊的成功。 </div> <div id="csim 3"> 畢業專題成果展：資訊學院三系每年共同舉辦的畢 業專題成果展，包括口試、競賽與展覽三階段，透 過此嚴謹驗收的程序，讓學生嚴肅、認真面對自己 的作品，並學習如何進行作品的行銷與包裝。 </div> width: 250 px; height: 200 px; } </style> </body> </html> </head> 3
網頁設計 實務 l 設定四個邊界，例如： – – l 1. 邊界 (Margin) margin-top: 100 px; (上邊界) margin-right: 50 px; (右邊界) margin-bottom: 100 px; (下邊界) margin-left: 50 px; (左邊界) http: //www. w 3 schools. com/css/tryit. asp? filename=trycss_margin_sides 一次設定好邊界值，例如： – margin: 25 px 50 px 75 px 100 px; 表示top margin is 25 px; right margin is 50 px; bottom margin is 75 px; left margin is 100 px – margin: 25 px 50 px 75 px; l 表示top margin is 25 px; right and left margins are 50 px; bottom margin is 75 px – margin: 25 px 50 px; l 表示top and bottom margins are 25 px; right and left margins are 50 px – margin: 25 px; l 表示all four margins are 25 px l 5
網頁設計 實務 練習實例：pucsim_intr. htm l 請自行調整#csim 1之樣式，觀看結果： margin-top: 10 px; margin-bottom: 20 px; margin-left: 30 px; 6
網頁設計 實務 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 7
網頁設計 實務 邊框 (Border) 屬性 屬性名稱 設定� border-color 邊框顏色 顏色名稱 16進位(HEX)碼 RGB碼 border-top-color border-left-color border-bottom-color border-right-color 上下左右四邊的邊框顏色 同border-color border 綜合設定 border-radius 邊框導圓角 上下左右四邊導圓角 border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-rightradius 花邊框線 border-image 長度(px)或百分比(%) 8
網頁設計 實務 練習實例：pucsim_intr. htm l 請自行調整#csim 1之樣式，觀看結果： border-style: double; border-width: 5 px; 9
網頁設計 實務 l 線上網站：邊框 CSSMatic – 網址：http: //www. cssmatic. com/ – GRADIENT GENERATOR (漸層) – BORDER RADIUS (圓角) – NOISE TEXTURE – BOX SHADOW 10
網頁設計 實務 l 線上網站：邊框 LAYERSTYLES – 網址：http: //layerstyles. org/ 11
網頁設計 實務 練習實例：pucsim_intr. htm l 請自行調整#csim 1之樣式，觀看結果： padding-top: 20 px; padding-left: 50 px; 13
網頁設計 實務 l 定位 z-index： – 層次數值，例如： <img src="sample. gif" style="position: absolute; top: 30; left: 30; z-index: 1; "> 15
網頁設計 實務 練習實例：pucsim_intr. htm l 請自行調整#csim 2與#csim 3之樣式，觀看結果： #csim 2 { } #csim 3 { position: relative; top: -20 px; left: 50 px; position: absolute; top: 100 px; left: 300 px; z-index: 1; z-index: 2; width: 250 px; height: 150 px; width: 250 px; height: 200 px; } 16
網頁設計 實務 Step 1 <!DOCTYPE html> <html lang="zh-TW"> <head> <title>置中排版實例</title> <meta charset="utf-8"> </head> <body> <div id="title 1">標題一</div> <div id="content 1">本文一</div> <div id="title 2">標題二</div> <div id="content 2">本文二</div> <div id="title 3">標題三</div> <div id="content 3">本文三</div> <div id="content 4">版權所有：靜宜大學資管系 楊 子青</div> </body> </html> 18
網頁設計 實務 <style type="text/css"> *{ font-family: "標楷體"; font-size: 14 pt; } body { background-color: #BCB 1 F 0; width: 100%; } #title 1 { color: white; background-color: #A 63 C 6 F; } #title 2 { color: white; background-color: #7 FB 33 D; } Step 2 #content 1, #content 2 { color: black; background-color: #F 5 F 5 dd; } #content 3 { color: black; background-color: #EBE 298; } #content 4 { background-color: #51629 C; color: #C 5 EBE 7; text-align: center; } </style> #title 3 { color: white; background: #FFACAA; } 19
網頁設計 實務 Step 3 #wrapper{ width: 960 px; height: 850 px; margin: 0 auto; } </style> </head> <body> <div id="wrapper"> <div id="title 1">標題一</div> <div id="content 1">本文一</div> <div id="title 2">標題二</div> <div id="content 2">本文二</div> <div id="title 3">標題三</div> <div id="content 3">本文三</div> 20
網頁設計 實務 Step 4 #title 1, #title 2{ width: 590 px; height: 30 px; border: 5 px; border-style: solid; border-color: white; } #content 1, #content 2 { width: 570 px; height: 300 px; border: 5 px; border-style: solid; border-color: white; padding: 10 px; } 21
網頁設計 實務 Step 5 #title 3 { width: 350 px; height: 30 px; border: 5 px; border-style: solid; border-color: white; position: relative; top: -740 px; left: 600 px; } 22
網頁設計 實務 Step 6 #content 3 { width: 330 px; height: 670 px; border: 5 px; border-style: solid; border-color: white; padding: 10 px; position: relative; top: -740 px; left: 600 px; } 23
1
Doctype html html head
Head body html
Bhtml?title=
Canvas доска
World map with latitude and longitude pdf
Code doctype html
Slidetodoc.com
Php doctype
Doctipe
Informtika
Anterior posterior pillars
5 steps in digestion
Language
Pu csim
Scilab csim
Csim ait
Language
Xhtml doctype
Bigollo
Www.awinfosys.com/eassessment/exams sample.htm
02.html?action=
Http://www.tvdsb.on.ca/westmin/science/snc2g1/frogresp.htm
Http://www.blueplanetbiomes.org/world_biomes.htm
Usps.com/intl/customs.htm
