在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
随着移动互联网的日趋成熟，一个网站能兼容多种终端的响应式项目开发应用而生。作为一种常被用于以浏览为主网站的网页布局方式，它最主要的优点就是可以给用户带来更好的使用体验。那么，我们应该如何利用CSS3实现响应式项目开发？这里给大家介绍一个免费的学习教程，手把手帮助大家掌握CSS3实现响应式项目开发的相关技能。
一、课程简介
该课程适合有HTML和CSS基础或是掌握一定的JS基础知识的同学。课程重点讲解如何利用CSS3中的媒体查询和bootstrap响应式框架实现响应式项目开发，并且利用具体的案例进行实践。理论与实践结合，课程内容由浅入深，循序渐进，通过本课程的学习，学员会在技能和项目经验上有很大的提升！
二、课程大纲
第一章 响应式开发介绍
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，实现优惠活动模块元素的大小能够根据视口的大小进行响应式缩放的效果。
四、学习收获
该课程通过案例驱动，知识点由浅入深，大家完成课程的学习将收获许多实实在在的技能。比如能够使用bootstrap快速的完成网页布局；能够使用字体图标优化页面图标效果提升用户体验；能够使用rem完成容器响应式缩放效果；能够使用LESS编译CSS；快速开发页面样式，提高开发效率；能够自定义bootstrap导航条组件；能够使用bootstrap轮播图插件，实现移动端、PC端适配；能够实现标签页的面包屑导航的制作；能够实现标签页导航滑动效果。
关于博学谷的前端项目实战课程就介绍到这里了，大家要是能够认真学完该课程，相信就能够利用CSS3实现响应式项目开发。心动不如行动，该视频课程只要在网站注册学习账号，就能随时随地进行学习，大家还等什么？现在就来博学谷进行学习吧~
— 申请免费试学名额 —
在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！
上一篇：
六种前端排序算法代码演示
下一篇：
零基础小白如何入门前端？
相关推荐 更多
常见web前端面试题（包含答案）
入职互联网技术岗位都有一个特点，需要参加面试以及笔试。而这两个过程中都有很多涉及到技术的问题。所以博学谷为大家整理了部分常见的web前端面试题，并完善了其中答案，希望对求知的小伙伴有所帮助。
7683
2019-08-08 14:08:31
Web前端知识点之HTML规范
本文就标签规则，标签语义化，属性规则，属性顺序和布尔属性五个方面，带大家梳理一下Web前端知识点之HTML规范。
6700
2019-07-29 14:16:46
Web前端开发在线培训班靠不靠谱？学了能就业吗?
目前，前端开发工程师在人才市场上可谓是格外的紧缺，不少小伙伴也看到了其中的就业机遇。想要学习前端开发，自学太慢效率太低，那么Web前端开发在线培训班靠不靠谱？学了能就业吗?针对大家的担忧，小编就来仔细分析一下博学谷培训班的课程。
8369
2019-12-16 19:11:32
前端开发常用的编辑器有哪些？
前端开发常用的编辑器有哪些？工欲善其事必先利其器，每个前端工程师在做前端开发的时候，一定有几款自己用着顺手的编辑器。而一款好用且适合自己的前端开发编辑器，往往会达到事倍功半的效果。以下是小编为大家推荐的几款编辑器，它们分别是HBuilder、WebStorm、Sublime Text、Visual Studio Code和wampServer。
7155
2019-10-18 17:09:50
Flutter入门学习哪些内容？
入门需要学习Dart语言、Flutter控件体系、动画体系、触摸和交互机制、网络编程、数据存储、状态管理等内容。Flutter是Google力推的跨平台框架，可快速在iOS、Android构建高质量的原生用户界面，且完全免费与开源；
7296
2019-12-30 17:57:05
热门文章
- 前端是什么
- 前端开发的工作职责
- 前端开发需要会什么？先掌握这三大核心关键技术
- 前端开发的工作方向有哪些？
- 简历加分-4步写出HR想要的简历
- 程序员如何突击面试？两大招带你拿下面试官
- 程序员面试技巧
- 架构师的厉害之处竟然是这……
- 架构师书籍推荐
- 懂了这些，才能成为架构师 查看更多
扫描二维码，了解更多信息
