CSS JavaScript 前端網頁設計概論(Day1)

經歷

講授過課程

Agenda

What is CSS?

What is CSS

CSS 的基本觀念

CSS 的基本觀念

CSS 基本語法說明

外部檔案、內嵌樣式表

註解

規則

群組

繼承

盒子模型 (box model)

CSS 的語法縮寫

基本的 CSS 語法縮寫

基本的 CSS 語法縮寫

CSS 的版面配置

CSS 的版面配置

強大的 CSS 選取器 (Selector)

強大的 CSS 選取器 (Selector)

CSS 選取器 (Selector) 的種類

類別選取器 (Class Selector)

ID 選取器 (ID Selector)

型態選取器 (Type Selector)

萬用選取器 (Universal Selector)

屬性選取器 (Attributes Selector)

各種 CSS 範例

訪間各種 CSS 範例

Bootstrap 與 RWD 網站設計概論

什麼是 RWD 響應式網頁設計？

什麼是響應式網頁設計？

以前的做法 (Adaptive)

Responsive vs Adaptive 的抉擇

Responsive Web Design 的要素

體驗 Responsive Web Design 網站

其他 Responsive Web Design 網站

Responsive Web Design 的設計原則

Bootstrap 與響應式網頁設計？

Bootstrap 與響應式網頁設計？

什麼是 Bootstrap ？

Bootstrap 的特色？

Bootstrap 裡面有什麼

Bootstrap 套件支援的功能

Visual Studio 2015 對 RWD 設計的支援

Bootstrap 套件所提供的基礎功能

依照 ( 視窗 /Device) 調整大小的 img

支援最多 12 欄位的 Grid 表格

定義 Grid 表格的欄位與寬度

Bootstrap 文字對齊

Bootstrap 文字強化效果

Bootstrap 的 Table 表格

Bootstrap 對 Form 表單的支援

Bootstrap 對 Button 增強

實作：使用 VS2015 建立一個 MVC 網站，並操作使用 Bootstrap

各瀏覽器對 HTML5/CSS3 支援程度

CSS Hack 解決 IE7,IE8,IE10,IE11,Firefox

CSS 的變種 (LESS 、 SASS)

Q&A

References

個人資訊