• 10h

    课程时长

  • 无限期

    有效期

  • 643

    学习人数

课程参数
学前基础要求
1.具备HTML和CSS基础编程能力 2.具备一定的JS基础知识

课程简介

本课程重点讲解如何利用CSS3中的媒体查询和bootstrap响应式框架实现响应式项目开发,并且利用具体的案例进行实践。理论与实践结合,课程内容由浅入深,循序渐进,通过本课程的学习,学员会在技能和项目经验上有很大的提升!

适合人群

1. 适合有HTML和CSS基础的同学

2.掌握一定的JS基础知识的同学

课程亮点

1.案例驱动,知识点由浅入深进行学习

2.完整项目,具有布局和功能的多样性

主讲内容

第一章 响应式开发介绍

01-移动web-网页布局方式

02-移动web-响应式布局的简单说明

03-移动web-什么是响应式开发

第二章 媒体查询介绍和使用

01-移动web-初体验媒体查询的语法

02-移动web-媒体查询的条件判断的顺序说明(上)

03-移动web-媒体查询的条件判断的顺序说明(下)

04-移动web-媒体查询中的媒体功能的说明

05-移动web-媒体查询补充说明

06-移动web-使用媒体查询设置页面布局

第三章 bootstrap 响应式框架介绍

01-移动web-常见的响应式框架简单介绍

02-移动web-bootstrap简单介绍

03-移动web-bootstrap简单介绍(2)

04-移动web-bootstrap的模板文件

05-移动web-bootstrap中的布局容器

06-移动web-bootstrap中的栅格系统

07-移动web-bootstrap栅格系统的其它样式说明(上)

08-移动web-bootstrap栅格系统的其它样式说明(下)

第四章 less介绍

01-移动web-less环境的搭建

02-移动web-less语法说明

第五章 微金所项目初始化

01-移动web-wjs页面的整体结构

02-移动web-微金所页面的字体图标样式准备

第六章 微金所项目头部和导航制作

01-移动web微金所头部块制作(上)

02-移动web微金所头部块制作(中)

03-移动web微金所头部块制作(下)

04-移动web导航条组件的说明

05-移动web导航条组件的样式修改(上)

06-移动web导航条组件的样式修改(下)

第七章 微金所项目轮播图效果实现

01-移动web-轮播图的效果分析

02-移动web轮播图插件的使用说明

03-移动web移动端的轮播图效果实现

04-移动web非移动端的轮播图效果实现

05-移动web使用响应式工具实现轮播图

06-移动web使用js实现轮播图

07-移动web实现轮播图的滑动操作

08-移动web-微金所首页轮播图的完成

第八章 微金所项目标签页导航区域制作

01-移动web-微金所信息块制作

02-移动web微金所预约块制作

03-移动web-标签页的使用

04-移动web标签页导航样式修改(上)

05-移动web标签页导航样式修改(下)

第九章 微金所项目产品块区域制作

01-移动web-详细产品块结构

02-移动web-详细产品块样式(上)

03-移动web-详细产品块样式(中)

04-移动web-详细产品块样式-宝北的添加

05-移动web-产品active块的制作

06-移动web产品块标签页导航条的宽度计算

07-移动web-产品块标签页导航条的滑动

第十章 微金所项目新闻块区域制作

01-移动web-新闻块结构分析

02-移动web-新闻块结构样式(上)

03-移动web-新闻块结构样式(中)

04-移动web-新闻块结构样式(下)

05-移动web-合作伙伴块制作

06-移动web-bootstrap定制的简单说明

第十一章 rem介绍和案例使用

01-移动web-em和rem的介绍

02-移动web-rem实现适配的简单说明

03-移动web-rem案例-优惠活动(上)

04-移动web-rem案例-优惠活动(中)

05-移动web-rem案例-优惠活动(下)

实战项目

微金所项目

本项目是实现微金所首页的响应式效果,主要讲解响应式布局的方式和使用技术,其中,使用bootstrap完成页面布局、实现轮播图插件、面包屑导航组件、导航条组件的应用和定制,并演示定制bootstrap的方法,实现移动端轮播图的滑动效果;使用字体图标完成小图标的效果,详细介绍如何自定义图标的样式,保证图标的展示效果和极简维护;最后通过优惠活动讲解rem,实现优惠活动模块元素的大小能够根据视口的大小进行响应式缩放的效果。

学完收获

1.能够使用bootstrap快速的完成网页布局

2.能够使用字体图标优化页面图标效果提升用户体验

3.能够使用rem完成容器响应式缩放效果

4.能够使用LESS编译CSS,快速开发页面样式,提高开发效率。

5.能够自定义bootstrap导航条组件

6.能够使用bootstrap轮播图插件,实现移动端、PC端适配

7.能够实现标签页的面包屑导航的制作

8.能够实现标签页导航滑动效果

师资团队
  • 前端高级讲师
    高级讲师
    前端开发工程师和软件开发工程师, 具有多年软件开发项目经验,曾就职于某大型外企,在软件开发和培训方面积累了丰富的经验,精通Ajax、Linux、ThinkPHP、Yii、SVN、jQuery、Redis、Mysql、XML等,上课语言幽默,逻辑清晰。