网页设计(Web前端开发) 十期

梁莉菁

目录

  • 1 网页设计概述
    • 1.1 网页设计概述
    • 1.2 网页开发工具
    • 1.3 浏览器开发者工具
    • 1.4 章节测试
  • 2 HTML结构基础篇
    • 2.1 Html标记与属性
    • 2.2 搭建章节作业站点
    • 2.3 章节测试
  • 3 CSS样式基础篇
    • 3.1 引入CSS样式表的四种方式
    • 3.2 CSS基础选择器
    • 3.3 CSS复合选择器
    • 3.4 章节测试
  • 4 CSS样式进阶篇
    • 4.1 制作“专题学习”模块效果1
    • 4.2 制作“专题学习”模块效果2
    • 4.3 精灵图技术_淘宝网首页局部效果
    • 4.4 章节测试
  • 5 网页布局技术
    • 5.1 模拟新浪微博发言版块布局1
    • 5.2 模拟新浪微博发言版块布局2
    • 5.3 模拟腾讯QQ网页视差效果
    • 5.4 章节测试
  • 6 超链接与导航栏
    • 6.1 超链接类型与基本语法
    • 6.2 锚点链接与图像热区链接
    • 6.3 制作纵向导航栏
    • 6.4 制作横向导航栏
    • 6.5 制作带下拉菜单的导航栏
    • 6.6 滑动门技术01_微信官网首页导航栏效果
    • 6.7 滑动门技术02_微信官网首页导航栏效果
    • 6.8 章节测试
  • 7 表格及样式设置
    • 7.1 创建表格
    • 7.2 表格的样式设置
    • 7.3 章节测试
  • 8 表单及样式设置
    • 8.1 表单基础
    • 8.2 Html5表单新属性
    • 8.3 Html5表单新元素
    • 8.4 章节测试
  • 9 JavaScript基础
    • 9.1 JavaScript基础
    • 9.2 焦点轮播图制作01
    • 9.3 焦点轮播图制作02
    • 9.4 焦点轮播图制作03
    • 9.5 跑马灯效果实现01
    • 9.6 跑马灯效果实现02
    • 9.7 章节测试
  • 10 综合实战
    • 10.1 响应式设计与媒体查询
    • 10.2 CSS3动画_旋转的太极图01
    • 10.3 CSS3动画_旋转的太极图02
    • 10.4 HTML 5 Canvas 基础01
    • 10.5 HTML 5 Canvas 基础02
    • 10.6 实战红色安源工运纪念馆首页01
    • 10.7 实战红色安源工运纪念馆首页02
    • 10.8 章节测试与期末考试
响应式设计与媒体查询
  • 1 视频教程
  • 2 知识速递
  • 3 案例欣赏
  • 4 反馈作业
  • 5 资料室

       同学们好，这节课我们将学习响应式布局技术的意义，响应式布局技术是为了让网页能兼容不同设备，兼容多屏多终端，增强用户体验的一种新技术，响应式布局可以通过媒体查询或第三方框架等实现，本节我们的重点是学习viewport视口设置的meta标签和CSS媒体查询的样式代码的用法。准备好了吗？我们开讲了！