• 课程介绍
  • 学习目标
  • 课程详情
  • 许多人制作响应式布局都会使用 bootstrap 实现栅格化方案。然而 bootstrap 中定义了大量的样式,不管是否用到都在框架范围内,导致项目体积臃肿不堪、加载缓慢……本套视频以原生方式,向大家展示一套自定义栅格化响应式框架的实现流程及每一步操作细节,极大精简代码、最终变成你自己专属的、灵活的响应式解决方案。此外,视频中配备完整响应式框架源码文件,且附带全程的项目上线操作过程。大家通过学习这个案例,可以按照视频中讲解的方案把项目上传到线上,使之变成一个真实的线上项目作品,更加从容自信的顺利通过面试。
  • 打造自己专属的、代码更加精简的、更为灵活的栅格化响应式方案;熟练掌握线下作品如何真实上传服务器并配备域名、可真实访问的完整上线流程。
  •  
    本套视频是详细介绍如何打造自己专属的、代码精简的、灵活的响应式解决方案。
     
    许多人制作响应式布局都会使用 bootstrap 实现栅格化方案。然而 bootstrap 中定义了大量的样式,不管是否用到都在框架范围内,导致项目体积臃肿不堪、加载缓慢……本套视频以原生方式,向大家展示一套自定义栅格化响应式框架的实现流程及每一步操作细节,极大精简代码、最终变成你自己专属的、灵活的响应式解决方案。此外,视频中配备完整响应式框架源码文件,且附带全程的项目上线操作过程。大家通过学习这个案例,可以按照视频中讲解的方案把项目上传到线上,使之变成一个真实的线上项目作品,更加从容自信的顺利通过面试。
     
    适用人群(学前要求):
        - 具备 css 和 html 以及原生 js 的基础(ECMAScript+DOM+EVENT)
        - 熟练使用 less
        - PS:不清楚自己是否具备学前要求?不如测一测吧,扫描二维码做一下学前测试:
         
     
     
    第1集主要讲解:响应式的介绍
    •  通过响应式网站:www.uehtml.com 和 jquery.com 举例讲解响应式网站的具体表现;
    •  描述响应式网站的定义根据浏览设备的不同、屏幕尺寸不同,显示不同的样式,做到不论大屏小屏,都可以正常展示内容给用户看;
    •  详细介绍了这个课程实战案例的主要功能和内容以及它所需要的技术栈有哪些;
    •  还提供了所涉及的相关视频的学习地址,方便用户可以补充学习课程以外的学前基础内容;
    •  讲解为什么响应式网站并不是所有网站都适用的、哪些情况不适合使用响应式布局;

    第2-3集主要讲解:bootstrap 介绍及栅格使用
    •  bootstrap的网站简单介绍、网站的侧边栏和组件的功能介绍;
    •  详细介绍 bootstrap 基本模板 中的内容;
    •  详细讲解栅格系统中 行和列、布局容器的布局规则,通过简单的小例子具体
    讲解
    •  讲解列偏移去控制当前元素所在的位置;
    •  讲解列排序去改变列的顺序;
    •  详细讲解利用框架 bootstrap 的缺点;

    第4集主要讲解:栅格化布局的功能分析和媒询
    •  布局容器主要包括固定宽度和流体布局两种;
    •  在栅格布局中的行/列的基本模板里包含列偏移、列排序;
    •  描述媒询是根据当前媒体设备(媒体特征)显示媒询内的对应样式,它处理响应式很重要的一块;
    •  课程中也详细讲解关于媒询设备、特征、关键词等内容,并通过一个小案例进行讲解;
    •  最后总结通过媒询的学习可以达到让当前样式在符合屏幕尺寸的情况下再被解析,可以起到屏幕变化的时候样式替换的效果;

    第5集主要讲解:栅格系统-布局容器(固定布局,流体布局)
    •  布局容器主要包括固定宽度(container)和流体布局(container-fluid);
    •  实现在不同屏幕尺寸下,固定宽度的布局容器内样式的变化;
    •  流体布局需宽度进行 100% 处理;
     
    第6集视频主要讲解:栅格系统-行和列(行的用途及功能,列的实现)
    •  通过栅格系统中布局容器实现行和列;
    •  使用 less 的行和列,代码更简短;
    •  行的功效:清除浮动、去除 container 上面的 padding;

    第7集视频主要讲解:栅格布局-列偏移、列排序(margin的使用,absolute、relative、fixed的区别)
    •  列的操作:列偏移和列排序;
    •  通过margin-left实现列偏移;
    •  通过相对定位实现列排序;

    第8集视频主要讲解:分析实战项目
    •  4 种尺寸的设计图:750(xs)、768(sm)、960(md)、1180(lg);
    •  分析 4 种尺寸设计图页面的区别;
    •  分析实战项目的实现步骤;
       ① 去除默认样式
       ② 响应式的不同屏幕
       ③ 分析划分小屏页面结构

    第9集视频主要讲解:实战样式的默认样式清除
    •  项目文件创建、引入;
    •  移动端默认样式清除:font-face ,引入自定义字体包;
    •  移动端默认样式清除:body,a,input,button;
     
    - PC端案例截图:头部和技能展示-
     
     
    第10-11集视频课程内容:头部-导航栏(xs-sm-md-lg的处理)(@meida样式处理,响应式分屏,hidden)
    •  小屏幕头部导航栏分析;
    •  小屏幕头部导航栏 - 背景实现;
    •  小屏幕头部导航栏 - 箭头实现;
    •  通过布局容器实现大屏幕(md)的头部导航栏;
    •  (md)和(lg)屏幕下实现头部导航栏的人名和工作职称;

    第12集视频课程内容:头部 - 个人信息 - 头像
    •  实现透明背景;
    •  在布局容器(container) - 实现头像;
    •  通过栅格布局(列) - 实现人名和工作职称
     
    第13集视频课程内容:实战项目-头部-个人信息-个签
    •  个签 - 字体大小、行高、padding;
    •  个签 - 通过伪类(before/after)实现双引号的小图标;
    •  个签 - 右引号小图标自适应处理;;

    第14-15集视频课程内容:实战项目-头部-个人信息-个人信息
    •  小屏 - 两列布局,左侧信息固定宽度,右侧信息自适应;
    •  小屏 - 左右两列间的虚线处理;
    •  小屏 - 虚线间的圆点背景处理、圆点层级处理;
    •  小屏 - 手机号码处理 - 点击可拨打;

    第16集视频课程内容:实战项目-头部-个人信息-大屏处理(一)
    •  调整sm尺寸 - 头像、姓名/职位、个签、个人信息的样式;
    •  调整md尺寸 - 使用栅格布局-列排序调整头像和个签以及个人信息的位置;

    第17集视频课程内容:实战项目-头部-个人信息-大屏处理(二)
    •  调整md尺寸 - 个签的样式 ;
    •  调整md尺寸 - 头像的样式;
    •  调整md尺寸 - 个人信息的样式;
    •  调整lg尺寸 - 使用栅格布局-列排序调整头像和个签以及个人信息的位置;
    •  调整lg尺寸 - 头像、个签、个人信息的样式;

    第18集视频课程内容:实战项目-头部-联系方式(qq在线聊天,邮件功能)
    •  使用布局容器实现- 联系方式内容居中;
    •  联系方式(xs/sm) - 设置文字、小图标样式;
    •  调整md尺寸 - 联系方式位置、样式;
    •  调整lg尺寸 - 联系方式位置、样式;
    •  联系方式 - 在小屏(xs/sm)下隐藏,在大屏(md/lg)显示;
    •  联系方式 - 点击邮箱和QQ的功能实现

    第19集视频课程内容:实战项目-技能展示一
    •  技能展示标题、描述;
       ① 居中 - 布局容器
        样式
    •  技能列表;
       ① 两列布局
        样式
    •  列表中不同颜色,通过 less中的函数实现;
    •  左侧背景 ;
       ① spin 函数
    •  右侧文字和背景颜色
     
       ① lighten 函数

    第20集视频课程内容:实战项目-技能展示二
    •  技能展示列表左侧百分比; 
       ① 通过 JS 实现 动态设置宽度
    •  调整 sm 尺寸样式; 
    •  调整 md 尺寸样式; 
    •  调整 lg 尺寸样式; 
     
    - PC端案例截图:工作时间轴- 

    第21集视频课程内容:实战项目-工作时光轴一
    •  工作时光轴标题、描述; 
       ① 布局容器 - 居中
    •  工作时间、职位、边框、圆点制作; 
       ① css3 选择器
        before
        after
        transfrom
        border

    第22集视频课程内容:实战项目-工作时光轴二
    •  圆形图标、弧形; 
       ① after
        border
        transform
        before
    •  标题、内容、左侧边框、圆点; 
       ① before
        border-radius

    第23集视频课程内容:实战项目-工作时光轴三
    •  最后一列的左侧圆点; 
    •  左侧小图标、边框颜色; 
      ① 通过样式方法实现
    •  函数调用; 
      ① after
    •  工作时间、职位、边框、圆点 通过基/偶数设置颜色; 
      ① odd
       even

    第24集视频课程内容:实战项目-工作时光轴四
    •  调整 sm 尺寸 - 样式修改; 
      ① 工作时光轴的标题、描述
       工作时间、职位、边框、圆点
       公司名称、工作内容

    第25集视频课程内容:实战项目-工作时光轴五
    •  调整md尺寸 - 样式修改; 
      ① 工作内容的位置调整 - transform
       background-clip
       基/偶数设置左边弧形
    •  调整 lg 尺寸 - 样式修改; 
     
    - PC端案例截图:案例展示 -
     
    第26集视频课程内容:实战项目-案例展示(一)
    •  工作时光轴调整 - 完善样式; 
    •  大标题; 
    •  案例小标题; 
       ① 背景
        文字(行高、字体大小、字体、文本缩进)
       ③ 边距

    第27集视频课程内容:实战项目-案例展示(二)
    •  案例大类标题; 
    小图标 - 背景图
    •  案例大类; 
       ① 小案例列表 - 图片轮播图标题
        缩进、字体颜色、行高、边框
       ③ 选中列表展开样式
       ④ 背景图、背景色、边框颜色、文字颜色

    第28集视频课程内容:实战项目-案例展示(三)
    •  展开下拉菜单内容; 
    •  标题(行高、文字大小、文字颜色); 
    •  发布时间(行高、文字大小、文字颜色); 
    •  底部虚线; 
       ① background:repeating-linear-gradient
        线性渐变:linear-gradient

    第29集视频课程内容:实战项目-案例展示(四)
    •  案例展示 - 内容; 
       ① 行高、文字大小、文字颜色、边距
    •  图片; 
       ① 宽度100%
        上边距
    •  点击预览按钮; 
       ① 背景色、宽高
        文字(大小、行高、颜色)
       ③ text-align、上边距
    •  分享至; 
       ① 文字(大小、行高、颜色)
        小图标(浮动、宽高、背景图)
       ③ 样式方法设置小图标位置
       ④ 边距


    第30集视频课程内容:实战项目-案例展示-md 侧边栏目的调整
    •  md - 侧边栏目样式调整; 
       ① 字体大小、行高、边距、text-align
       ② 列表设置固定宽度
       ③ 圆点(border-radius)

    第31集视频课程内容:实战项目-案例展示-md侧边栏目选中样式
    •  md - 侧边栏目样式调整; 
       ① 竖线
    •  md - 侧边栏目选中列表展开样式; 
       ① 左侧选中竖线样式
       ② 线性渐变(linear-gradient)
       ③ 选中状态- 圆点和竖线颜色设置
       ④ 优先级:!important

    第32集视频课程内容:实战项目-案例展示-md右侧内容调整
    •  md - 右侧内容样式调整; 
       ① 边距、高度、线性渐变、文字大小、行高
    •  md - 点击预览按钮样式调整; 
       ① 宽高、字体、背景色、行高
       ② 鼠标移入颜色:hover
    •  md - 分享至样式调整 ; 
       ① 文字大小、颜色、行高
       ② 小图标宽高、边距

    第33集视频课程内容:实战项目-案例展示-lg 尺寸调整
    •  md 屏幕 - 分享至样式调整; 
       ① 调用样式方法 - 设置小图标位置
    •  lg 屏幕 - 案例大标题; 
       ① 边距
    •  lg 屏幕 - 左侧边栏样式调整; 
       ① 左侧边栏宽度调整
    •  lg 屏幕 - 确认右侧内容样式 ; 
    •  lg 屏幕 - 确认点击预览按钮样式; 
    •  lg 屏幕 - 确认分享至样式调整; 

    第34集视频课程内容:实战项目-案例展示-二级菜单和选项卡的制作(大屏)
    •  案例展示 - 功能分析;
    •  大屏 - 选项卡实现;
       ① 点击 h2 下面对应的ul的展开收缩
       ② 给 h2 加点击事件
       ③ 点击展开/收缩
       ④ 点击加号/减号小图标切换
    •  大屏 - 点击li显示对应切换内容; 
       ① 点击设置选中当前 li
       ② 点击li切换右侧内容
    •  大屏 - 二级菜单和选项卡的制作; 

    第35集视频课程内容:实战项目-案例展示-滑屏样式(小屏)
    •  小屏 - 右侧内容滑屏显示; 
       ① vh:窗口高度
       ② vw:窗口宽度
    •  小屏 - 展开右侧内容; 
       ① 层级
    •  小屏 - 箭头设置; 
       ① 返回上一页面
    •  小屏 - 点击侧边滑出; 
       ① transform:translateX(100vw)

    第36集视频课程内容:实战项目-案例展示-滑屏样式(滑屏的显示和隐藏)
    •  划分屏幕; 
       ① 获取屏幕宽度
       ② 小于960屏幕尺寸
       ③ if(deviceWidth<960){ return"xs" }
       ④ 大于等于960屏幕尺寸
       ⑤ if(deviceWidth>960){ return"lg" }
    •  案例展示滑屏样式; 
       ① 判断屏幕尺寸
       ② 滑屏的显示和隐藏

    第37集视频课程内容:实战项目-案例展示-滑屏样式(上下滑屏处理)
    •  xs - 案例展示-滑屏样式; 
    •  xs - 滑屏(移动端自定义滑屏事件); 
       ① 手指按下:touchstart
       ② 手指移动:touchmove
       ③ 手指松开:touchend
    •  xs - 阻止默认事件; 
    •  xs - 超出屏幕尺寸处理; 
    •  md - 滑屏样式调整; 
       ① 隐藏箭头
    •  window.onresize ; 

    第38集视频课程内容:实战项目-案例展示-分享功能(qq分享)
    •  QQ分享; 
       ① 分享模板地址
    •  模板代码介绍; 
    •  QQ分享具体写法; 
       ① 参数可参照文档
    •  添加QQ分享点击事件; 
    •  介绍分享相关网站
     
     
    - PC端案例截图:项目池 -
     
    第39集视频课程内容:实战项目-项目池(flex)
    •  背景色;
    •  头部标题、简介;
       ① 字体大小、颜色、行高、文字居中
    •  项目池列表;
       ① 布局容器 - 内容居中
       ② 底部边框、图片、文字标题\时间
       ③ 弹性盒模型 display:flex
       ④ 字体大小、颜色、行高
       ⑤ 文字内容(字体大小、颜色、行高、上边距)
    •  按钮;
      
     ① 边距、边框、宽高、背景色、文字颜色
       ② box-sizing:border-box
       ③ border-radius

    第40集视频课程内容:实战项目-项目池大屏样式调整
    •  处理 margin 传递,利用 BFC 解决margin传递问题;
       ① 给父级加overflow:hidden
    •  sm - 调整头部标题、简介样式;
       ① 行高、边距
    •  sm - 调整项目池列表样式;
       ① 边距
    •  sm - 调整按钮样式;
    •  sm - 调整图片样式;
       ① 图片大小
    •  sm - 文字标题/时间;
       ① 边距、字体大小

    第41集视频课程内容:实战项目-项目池大屏样式调整(二)
    •  处理 最小高度 min-height:inherit;
    •  md - 调整头部标题、简介样式;
    •  md - 调整项目池列表样式;
       ① 边距、边框
    •  md - 调整图片样式;
       ① 宽高、边距
    •  md - 调整左侧文字标题/时间;
       ① 字体大小、颜色、行高
    •  sm - 调整按钮样式;
       ① 宽高、字体大小、字体颜色
    •  sm - 弹性盒模型;
       ① display:flex

    第42集视频课程内容:实战项目-项目池大屏样式调整(三)
    •  lg - 调整头部标题、简介样式;
    •  lg - 调整图片样式;
    •  lg - 确认左侧文字标题/时间样式;
    •  lg - 确认按钮样式;

    第43集视频课程内容:实战项目-底部
    •  更新日期;
       ① 布局容器 - 标题居中
       ② 字体颜色、大小、行高、文字居中
       ③ 大屏隐藏:md-hidden
    •  底部结构;
       ① 布局容器 - 内容居中
       ② 背景色
       ③ 文字
       ④ 图片二维码
    •  底部样式;
       ① 字体颜色、大小、行高、文字居中、换行、间距
       ② 图片宽高、背景色
    •  底部间距;

    第44集视频课程内容:实战项目-底部大屏样式调整
    •  sm - 确认更新日期样式;
    •  sm - 确认内容样式 ;
    •  sm - 确认图片二维码样式;
    •  md - 调整更新日期结构/样式;
       ① xs-hidden,md-visied
       ② 字体大小、行高、间距、边框
    •  md - 调整二维码描述结构/样式;
       ① xs-hidden,md-visied
       ② float:left  text-align:left
    •  md - 确认图片二维码样式;
       ① 背景色、圆角(border-radius)
    •  lg - 调整更新日期、图片二维码、描述样式;

    第45集视频课程内容:实战项目-返回顶部
    •  返回顶部小图标;
       ① 侧边栏:

       ② position:flxed
    •  sm/md/lg - 调整返回顶部小图标样式;
    •  鼠标移入;
       ① hover
    •  返回顶部功能;
       ① 获取元素
       ② 点击事件 - 屏幕返回最顶部
       ③ 控制滚动条位置
    •  设置返回顶部按钮显示的条件;
       ① 默认隐藏
       ② 屏幕超过规定高度后显示

    第46集视频课程内容:实战项目-上传项目
    •  ftp;
    •  URL;
    •  用户名、密码;
    •  将文件移至ftp文件目录进行上传;
    •  代码文件修改后,需重新上传,覆盖;
    •  结束语;
     
    ---
     - 手机端案例截图 
     

     

    课程费用:

    活动价:¥188.00¥199.00      VIP价:¥168.00

    知识点:

    1. css3属性Bootstrap中的栅格化布局系统(Grid System)的原理分析与实现
    2. - 列排序(Cell Sort) 
    3. - 媒询(Media queries)
    4. - @media
    5. - 媒体类型
    6. - 媒询关键字
    7. - 媒询特征
    8. - 布局容器(Layout Container)的作用与分类(Container 与Fluid Container)
    9. - 行(Row)
    10. - 列(Cell)
    11. - 列偏移(Cell Offset)
    12. css3属性
    13. - @media
    14. - box-sizing
    15. - after和before伪类
    16. - css3新选择器
    17. - transform
    18. - flex
    19. - background-clip
    20. - background-size
    21. - background-origin
    22. - 线性渐变
    23. - border-radius
    24. - animation
    25. css3属性
    26. - 事件处理(PC、移动端事件)
    27. - resize、touchstart、touchmove、touchend
    28. - DOM/BOM
    29. - clientWidth、clientHeight、innerWidth、innerHeight

    课程大纲:

     

    响应式介绍、技术栈提要、使用场景分析

    Bootstrap介绍、使用及其优缺点分析

    栅格布局功能分析、媒询(media)的使用

    布局容器的分类及实现

    行和列的实现

    列偏移

    列排序

    实战案例页面分析

    头部的实现(列、列排序)

    技能展示的实现(resize、dom操作)

    工作时光轴的实现(妙用伪类after、before、transform)

    案例展示的实现(移动端和pc端的事件处理:touchmove)

    项目池的实现

    QQ在线聊天、分享功能实现

    响应式介绍

    技术栈提要

    响应式使用场景分析

    Bootstrap介绍

    Bootstrap使用

    Bootstrap优缺点分析

    栅格化布局系统(Grid System)原理与实现

     响应式核心 - 媒询(Media queries)

              @media 的使用

    媒询设备分类

    布局容器(Layout Container)介绍

    布局容器的作用

    布局容器分类(Container与Fluid Container)

    Container与Fluid Container的区别

    列(Cell)的实现

    行(Row)的作用与实现

    列偏移(Cell Offset) - margin-left的使用

    列排序(Cell Sort)- position 的使用

    fixed、absolute、relative 的特点与适用场景

    实战开发

    页面布局分析

    页面制作

    - 头部制作

    - 大小屏隐藏与显示的切换(xs-hidden、md-visited)

    - 分列(Cell)

    - 列排序(Cell Sort)的使用

    - 两列布局

    - 伪类的使用

    - before

    - after

    - css3选择器

    - :first-of-type

    - :last-of-type

    - 拨打电话

    - 发送邮件

    - 技能展示

    - 两列布局

    - 使用js和百分比制作自适应技能条

    - 工作时光轴

    - transform

    - css3选择器

    - :nth-of-type(odd)

    - :nth-of-type(even)

    - 伪类的使用

    - before

    - after

    - 案例展示

    - 选项卡功能

    - pc端点击显示

    - 移动端滑屏处理

    - 二级菜单制作

    - 项目池

    - 弹性盒模型

    - flex

    - order

    - display:flex

     - 底部

     

    相关文章:

    >> bootstrap 响应式栅格系统解析

     

     


    课程咨询:

    • 咨询QQ:2852509866 、2852509867 、2852509868
    • 电话:010-57269690

    想要了解妙味课堂最新开课消息吗?长按二维码关注吧!

     

     

其他人在开团,您可以直接参与

  • 衣沾不足惜

    衣沾不足惜

    还差4人成团剩余 04 : 12 : 16 结束
    参团价:¥149.00
  • 佩佩琪加油成长

    佩佩琪加油成长

    还差4人成团剩余 23 : 12 : 24 结束
    参团价:¥149.00

课程目录

资料下载

购买课程后,可免费下载课件

讲师信息

Reci

主讲教师:Reci

讲师介绍:全职讲师,容颜娇俏、声音甜美的美少女讲师。参与编撰妙味课堂图书《前端 HTML+CSS 修炼之道》 职场之路先从事后端开发,而后转战 WEB 前端领域,在过去几年间为公司完成 1500+ 以上数量级的高质量网页,所开发项目横跨诸多行业,如:商城、服装、学校、汽车…等线上项目, 也曾开发过各类模板网站,解决过大小无数的兼容性问题、移动端网页适配方案。 在 vue 组件开发、angular 开发等技术栈也有诸多项目实践。 为人温柔细心,教学方式严谨且极具耐性,授课过程中,善于敏锐发现学员关键问题点所在,并施予循循善诱、快速帮助同学走出困境,是所有初学者身边最为善解人意的良师益友。

“100%中奖,幸运好礼转到手”
幸运用户
用户 奖励方式
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
恭喜: 156468712 获得一等奖
1. 中奖后请联系客服,兑换奖品;
2. 兑奖有效期:2018 年 10 月 18 日 - 2018 年 12 月 31 日;
3. 本活动最终解释权归妙味课堂所有;
您还剩余1次抽奖机会
 
“100%中奖,幸运好礼转到手”
恭喜中奖
奖品名称
“下笔消费返还10%现金”
查看奖品详情
 
“100%中奖,幸运好礼转到手”
奖品名称
下笔消费返还10%现金
奖品描述:

1、赠送1年VIP会员视频权限

2、不能赠予,仅限中奖的用户使用

3、提供ID号+绑定的手机号

4、提供个人中心的中奖截图

兑换有效期: 2018年11月31日 - 17:00:00
兑换方式:联系客服兑换

客服联系方式:

QQ:2852509866、2852509868

微信:miaov-class、miaov-study

返回
联系我们

点我咨询QQ客服

010-57269690

在线微信客服
客服1
客服在线时间

工作日:9:30~18:00

周六:10:00~17:00

妙味公众号