响应式Web设计

李迎霞

目录

  • 1 课程准备
    • 1.1 课程结构
    • 1.2 课程质量报告
    • 1.3 网络课程导学（指引）
    • 1.4 学生网络课程学习指引
    • 1.5 网络直播时间
    • 1.6 考核方案
    • 1.7 课程标准
  • 2 单元一：HTML5+CSS3初体验
    • 2.1 概述
    • 2.2 知识准备-1
    • 2.3 课程思政1-爱我中华
    • 2.4 绘制HTML5logo
    • 2.5 知识准备-2
    • 2.6 构建移动版旅游网站页面
    • 2.7 测验01
  • 3 单元二：文本类网页设计
    • 3.1 概述
    • 3.2 文本类网页设计-知识准备1
    • 3.3 电子杂志页面
    • 3.4 文本类网页设计-知识准备2
    • 3.5 软文推广页面
    • 3.6 测验02
  • 4 单元三：图文展示网页设计
    • 4.1 概述
    • 4.2 图文展示网页设计-知识准备1
    • 4.3 黑马书城
    • 4.4 图文展示网页设计-2-知识准备
    • 4.5 课程思政2-时间管理意识
    • 4.6 多肉植物商场
    • 4.7 课程思政3-正视问题和解决问题
    • 4.8 测验03
  • 5 单元四：HTML5表单应用
    • 5.1 概述
    • 5.2 HTML5表单应用-知识准备1
    • 5.3 移动版登录页面
    • 5.4 HTML5表单应用-2-知识准备
    • 5.5 用户注册页面
    • 5.6 测验04
  • 6 单元五：HTML5画布
    • 6.1 概述
    • 6.2 初识canvas
    • 6.3 构建网页涂鸦板
    • 6.4 Canvas API提供的方法
    • 6.5 构建发红包才能看的照片页面
    • 6.6 测验05
  • 7 单元六：音频和视频
    • 7.1 概述
    • 7.2 视频播放
    • 7.3 视频播放器
    • 7.4 音频播放
    • 7.5 HTML5 web钢琴
    • 7.6 测验06
  • 8 期中考试
  • 9 单元七：响应式Web设计
    • 9.1 概述
    • 9.2 知识准备1-视口的概念
    • 9.3 知识准备2-媒体查询
    • 9.4 测验07
    • 9.5 知识准备3-百分比布局
    • 9.6 第一个响应式网站：环保网站
    • 9.7 知识准备4-响应式栅格系统
    • 9.8 知识准备5-弹性盒布局
    • 9.9 课程思政案例4-精益求精的工匠精神
    • 9.10 测验08
    • 9.11 社交网站个人信息页面制作
  • 10 单元八：响应式设计神器——Bootstrap
    • 10.1 概述
    • 10.2 Bootstrap框架
    • 10.3 布局容器、导航栏（navbar）
    • 10.4 测验09
    • 10.5 Bootstrap表单、按钮
    • 10.6 Bootstrap栅格系统
    • 10.7 标签页、响应式工具
    • 10.8 测验10
    • 10.9 轮播插件，Bootstrap餐饮网站之轮播广告模块
    • 10.10 测验11
    • 10.11 整合Bootstrap餐饮网站，完成footer
  • 11 第16周：期末考试
知识准备5-弹性盒布局
  • 1 任务概述
  • 2 任务学习

本节学习任务：

1. 弹性盒布局——弹性盒的结构

2. 弹性盒的属性设置

    • display

    • flex-flow、flex-direction、flex-wrap

    • justify-content

    • align-items     

重点、难点

  • 弹性盒的属性设置

  • display

  • flex-flow、flex-direction、flex-wrap

  • justify-content

  • align-items