教研中心研習:HTML5+CSS網頁設計-基礎篇(1070705-06)

日期:107年7月5、6日

地點:新北市教研中心

主題:HTML5+CSS網頁設計-基礎篇

講師:Amos Lee

課程使用軟體:

網頁開發工具簡介:

網頁開發工具

網頁開發相關教學資源:

Brackets 網頁設計 練習教學影片

主課程:HTML 5

主課程:CSS

安裝中文Lorem外掛:

  1. 按下Ctrl+Shift+P
  2. 輸入「Install Package」
  3. ChineseLoremIpsum
  4. 在網頁文件中,打 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