日期：107年7月5、6日
地點：新北市教研中心
主題：HTML5+CSS網頁設計-基礎篇
講師：Amos Lee
課程使用軟體：
網頁開發工具簡介：
網頁開發工具
網頁開發相關教學資源：
主課程：HTML 5
主課程：CSS
安裝中文Lorem外掛：
- 按下Ctrl+Shift+P
- 輸入「Install Package」
- 選 ChineseLoremIpsum
- 在網頁文件中，打 CTlorem，再按 Alt + C
CSS Box Model
名稱翻譯：
- margin: 外距
- padding：內距/留白/墊充
可見尺寸：width + padding + border
佔據空間尺寸：width + padding + border + margin
例如：
.amos{
width: 200px;
padding: 15px;
border: 10px solid #f00;
margin: 20px;
}
可見尺寸：200 + 15*2 + 10*2 = 250
佔據空間尺寸：200 + 15*2 + 10*2 + 20*2 = 290
設定 box-sizing: border-box; 後：
可見尺寸：width
佔據空間尺寸：width + margin
例如：
.box{
width: 400px;
background-color: #ccc;
border: 25px solid #f00;
padding: 25px;
box-sizing: border-box;
}
可見尺寸：400
CSS Tools: Reset CSS：
Reset CSS 過度Over的作法：
<style type="text/css">
*{
margin:0;
padding: 0;
line-height: 1;
list-style-type: none;
}
</style>
版面配置：
RWD 網頁設計
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
Bootstrap
