項目1 彈性盒布局
任務1.1 認識nex彈性盒布局
1.1.1 為什么使用彈性布局
1.1.2 初識flex彈性布局
任務1.2 使用彈性盒容器的屬性整體控制子元素
1.2.1 flex-direction設置主軸及其方向
1.2.2 flex-wrap設置換行方式
1.2.3 flex-flow設置主軸方向和換行方式
1.2.4 justify-content設置主軸元素的排列方式
1.2.5 align-items設置側軸(交叉軸)元素的排列方式
1.2.6 align-content多行元素在側軸(交叉軸)的排列方式
任務1.3 使用彈性子元素的屬性控制個別子元素
1.3.1 align-self設置子元素在側軸(交叉軸)的對齊方式
1.3.2 flex-grow設置子元素主軸放大比例
1.3.3 flex-shrink設置子元素主軸縮小比例
1.3.4 flex-basis設置子元素主軸的基準尺寸
1.3.5 flex綜合屬性設置子元素空間分配
1.3.6 order設置子元素的順序
項目評價表
項目小結
項目2 響應式頁面設計
任務2.1 初識響應式設計和媒體查詢
2.1.1 響應式設計
2.1.2 媒體類型
2.1.3 媒體查詢
2.1.4 媒體特性
2.1.5 引入方式
任務2.2 利用媒體查詢實現響應式
任務2.3 應用彈性盒與響應式設計頁面
項目評價表
項目小結
項目3 Bootstrap布局
任務3.1 初識Bootstrap
3.1.1 下載、使用Bootstrap
3.1.2 個Bootstrap示例
3.1.3 認識視口
任務3.2 使用容器
任務3.3 使用柵格系統進行頁面布局
3.3.1 引入柵格系統
3.3.2 柵格參數
3.3.3 列的自動布局
3.3.4 多種屏幕情況柵格的使用
3.3.5 柵格的對齊、排列與偏移
3.3.6 列嵌套
項目評價表
項目小結
項目4 Bootstrap內容
任務4.1 應用Bootstrap排版
4.1.1 全局設置
4.1.2 標題