妙味零基础前端开发“PC 端+移动端+响应式开发”课程(远程班)

你想进入 IT 行业?没有什么编程类的课程比这个更容易入门了:

  • 编程入门的最佳课程
  • 步入 IT 行业的必备技能

学完本课程,可完成各种 PC 类、移动端静态网页:

更多学员作品:https://miaov.com/index.php/example/exampleList


课程总费用:1580 元

课程优惠信息:

☩ 前 15 位学员报名,预交 100 元预报名费可抵扣 400 元课程费用(名额有限,报满截止)

学习周期:45 天

*在学习周期内,我们会安排全套的直播课、录播课、视频复习、讲师全天答疑、作业辅导、练习批改、结课考核等一系列完善的学习安排;

开班时间:2018 年 4 月下旬,20 人以上即开班


课程咨询:

咨询QQ:2852509867 QQ:2852509868

微信咨询:miaov-class


适用人群:

1、熟悉电脑键盘输入、可快速输入 26 个英文字母;
2、可独立下载并安装软件,对 “新建文件夹、重命名” 等电脑文件操作必须熟练;
3、年满 18 周岁、兴趣浓厚 + 肯做练习;

报名本课程可享受到的服务:

1. 直播 + 录播双管齐下: 确保授课体验立体丰富
2. 全职老师 14 小时轮换在线答疑: 确保问题消失在萌芽状态
3. 作业批改与练习讲解服务: 老师耐心批复所有作业并详细讲解课后练习
4. 阶段式测评: 每阶段测试题必不可少,确保校验学习效果
5. 项目作品辅导: 辅助每一位学员打造自己精湛的前端项目
6. 丰富的奖学金激励:各种丰厚大奖鼓励大家好好完成学业
7. 学习成果考核: 由讲师为大家定制专业的测试题
8. 阶段学习内容建议: 讲师根据大家测试结果给出下阶段学习建议


附录《零基础课程大纲》

HTML5 & CSS3 零基础修炼、PC 整站与移动端、less、bootstrap

1
第一章 代码初识:前端工作流位置、工作职责、编程语言、页面结构、样式表、盒模型
1.1 - 前端开发工程师在整个工作流中所处的位置

1.1.1 - 产品经理

1.1.2 - 设计 UI / 用户体验研究

1.1.3 - 前端开发工程师

1.1.4 - QA 质量保障工程师

1.1.5 - 运维(开发)工程师

1.2 - 前端开发工程师的工作内容

1.2.1 - 工作职责

1.2.1.1 - 基本职责:常规开发、界面交互、数据交互

1.2.1.2 - 职位职责:用户体验把控、对性能的追求

1.2.2 - 软素质:具有探索精神、每天都在进步

1.3 - 前端开发环境及软件

1.3.1 - Photoshop 切图、修图、测量

1.3.2 - 编辑器 WebStorm、HBuilder、Atom、Visual Studio Code、…

1.3.3 - 浏览器

1.3.3.1 - IE浏览器:IE6、IE7、IE8、IE9、IE10、IE11

1.3.3.2 - 标准浏览器:firefox(fireBug)、chrome、safari…

1.4 - 什么是语言

1.4.1 - 人与人之间的沟通交流,我们会用到各种语言,比如:汉语,英语……

作为一个前端工程师,要与浏览器沟通交流,就要用到浏览器所能识别的语言

1.5 - 什么是语言

1.5.1 - html(Hypertext Markup Language)超文本标记语言 - 结构

1.5.2 - css(Cascading Style Sheets)层叠样式表 - 样式

1.5.3 - js(javascript)- 行为

1.6 - 页面基本结构

1.6.1 - 声明文档类型:< !DOCTYPE HTML>

1.6.2 - 标签:标签对、单标签

1.6.3 - 标签嵌套结构:父子级嵌套、兄弟级并列

1.6.4 - < div>标签内容< /div> div标签,一块内容

1.7 - 样式表的书写规则及出现的位置

1.7.1 - 行间样式表

1.7.1.1 - IE浏览器:IE6、IE7、IE8、IE9、IE10、IE11

1.7.1.2 - 标准浏览器:firefox(fireBug)、chrome、safari…

1.7.2 - 内部样式表

1.7.2.1 - < style>…………< /style> 写在页面专门的 style 标签中

1.7.2.2 - 标签选择器: 标签名 {样式…}

1.7.2.3 - 样式写法:样式名:样式值

1.7.3 - 外部样式表

1.7.3.1 - < link href="style.css" rel="stylesheet"/> 写在专门的css文件中,通过link引入当前页面

1.8 - 常见样式汇总

1.8.1 - px 像素 计量单位

1.8.2 - width 宽度

1.8.3 - height 高度

1.8.3.1 - 在ps中测量区域宽高

1.8.4 - border 边框

1.8.4.1 - 边框的组成

1.8.4.1.1 - border-width 边框宽度

1.8.4.1.2 - border-style 边框样式

1.8.4.1.3 - border-color 边框颜色

1.8.4.2 - 设置颜色的三种模式

1.8.4.2.1 - 颜色英文关键字:pink、plum、red、…

1.8.4.2.2 - 三原色:rgb(255, 255, 0)

1.8.4.2.3 - 十六进制颜色代码: #1215AC

1.8.4.3 - 制作三角形边框

1.8.4.4 - 练习:网易线框练习(边框版)

1.8.5 - background 背景

1.8.5.1 - background-color: gray; 背景颜色

1.8.5.2 - background-image: url(bg.jpg); 背景图

1.8.5.3 - background-repeat: no-repeat; 背景图是否重复

1.8.5.4 - background-position: center 0px; 背景图位置

1.8.5.5 - background-attachment: fixed; 背景是否滚动

1.8.5.6 - background复合样式

1.8.5.7 - 练习:网易线框练习(背景版)

1.8.6 - 文字设置

1.8.6.1 - font-weight 文字着重

1.8.6.2 - font-style 文字倾斜

1.8.6.3 - font-size 文字大小(一般均为偶数)

1.8.6.4 - line-height 行高

1.8.6.5 - font-family 字体(中文默认宋体)

1.8.6.6 - font复合样式: font-style | font-weight | font-size/line-height | font-family

1.8.6.7 - 中英文字体的字体大小及行高测量

1.8.7 - 文本设置

1.8.7.1 - color 文字颜色

1.8.7.2 - text-align 文本对齐方式

1.8.7.3 - text-indent 首行缩进(em缩进字符)

1.8.7.4 - text-decoration 文本修饰

1.8.7.5 - letter-spacing 字母间距

1.8.7.6 - word-spacing 单词间距(以空格为解析单位)

1.8.7.7 - white-space 强制不换行

1.8.7.8 - 关于空格的认知及计算

1.8.7.9 - 练习:关键字颜色区分

1.8.8 - padding 内边距

1.8.8.1 - padding-top 上边内边距

1.8.8.2 - padding-right 右边内边距

1.8.8.3 - padding-bottom 下边内边距

1.8.8.4 - padding-left 左边内边距

1.8.8.5 - padding复合样式: top right bottom left;

1.8.8.6 - padding的注意事项: 内边距相当于给一个盒子加了填充厚度会影响盒子大小。

1.8.9 - margin 外边距

1.8.9.1 - margin-top 上边外边距

1.8.9.2 - margin-right 右边外边距

1.8.9.3 - margin-bottom 下边外边距

1.8.9.4 - margin-left 左边外边距

1.8.9.5 - margin复合样式: margin: top right bottom left;

1.8.9.6 - 外边距的问题

1.8.9.6.1 - 上下外边距会叠压

1.8.9.6.2 - 父子级包含的时候子级的margin-top会传递给父级

1.8.10 - 盒模型

1.8.10.1 - 盒子大小 = border + padding + width/height

1.8.10.2 - 盒子宽度 = 左border+左padding+width+右padding +右border

1.8.10.3 - 盒子高度 = 上border+上padding+height+下padding+下border

1.8.11 - 超链接 < a href="">< /a>

1.8.11.1 - href

1.8.11.1.1 - 页面跳转

1.8.11.1.2 - 锚点

1.8.11.1.3 - 下载

1.8.11.1.4 - target 链接打开方式

1.8.11.2 - 相关伪类

1.8.11.2.1 - :link 未访问的链接

1.8.11.2.2 - :visited 访问过后的链接

1.8.11.2.3 - :hover 鼠标悬停的链接

1.8.11.2.4 - :active 激活的链接

1.8.12 - 练习:网易产品模块

本章节案例&练习:

网易线框练习(一)
关键字颜色区分
网易产品模块
模拟右键系统菜单 — 扩展
模拟系统警告框弹出窗 — 扩展
简洁导航文字设置 — 扩展

2
第二章 常用标签:结构标签、块级标签、行内标签、SEO、选择器、优先级、编码规范

2.1 - 常用标签

2.1.1 - < header></header> 主要用于页面的头部的信息介绍,也可用于板块头部

2.1.2 - < article></article> 用来在页面中表示一套结构完整且独立的内容部分 可以用来呈现论坛的一个帖子,杂志或报纸中的一篇文章,一篇 - 博客,用户提交的评论内容,可互动的页面模块挂件等。

2.1.3 - < aside>< /aside> 包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组,以及其他类似的有别与主要内容的部分

2.1.4 - < section>< /section> 用于划分页面上的不同区域,或者划分文章里不同的节

2.1.5 - < footer>< /footer> 页面的底部 或者 版块底部

2.1.6 - < nav>< /nav> 导航 (包含链接的的一个列表)

2.1.7 - < div>< /div> 无意义块

2.1.8 - h1-h6 标题

2.1.9 - < p>< /p> 段落

2.1.10 - < ul>< /ul> 无序列表

2.1.11 - < ol>< /ol> 有序列表

2.1.12 - < li>< /li> ol或者ul的列表项

2.1.13 - < img src="" /> 图片

2.1.13.1 - src

2.1.13.1.1 - 相对路径

2.1.13.1.2 - 绝对路径

2.1.13.2 - img特性

2.1.13.2.1 - 支持宽高

2.1.13.2.2 - 只设置宽度或者高度等比缩放

2.1.13.2.3 - img的空隙问题

2.1.14 - < figure>< /figure> 用于媒体元素进行组合

2.1.15 - < figcaption> < /figcaption> 用于对figure的内容 进行说明

2.1.16 - < dl>< /dl> 定义列表,dl下边只能包含dt和dd

2.1.17 - < dt>< /dt> 列表中的项目,dt是dl的子元素

2.1.18 - < dd>< /dd> 描述列表中的项目,dd是dl的子元素

2.1.19 - < span>< /span> 区分样式

2.1.20 - < base /> 为页面上的所有链接规定默认地址或默认目标

2.1.21 - <strong></strong> 强调(粗体)

2.1.22 - < em>< /em>` 强调(斜体)

2.1.23 - < time>< /time> 时间

2.1.24 - < mark>< /mark> 标记

2.1.25 - < progress>< /progress> 进度条

2.1.25.1 - max

2.1.25.2 - value

2.2 - 浅析SEO

2.2.1 - SEO :搜索引擎优化

2.2.2 - 部分方法

2.2.2.1 - a、页面标签语义化

2.2.2.2 - b、使用对SEO有利的标签:h1/h2/h3/strong/em……

2.2.2.3 - c、提高页面关键词密度

2.2.2.4 - d、……等等

2.2.3 - SEM:搜索引擎营销;(包含SEO

2.3 - 常用选择器

2.3.1 - id选择器 #id{}

2.3.2 - 类选择器 .class{}

2.3.3 - 标签选择器 div{}

2.3.4 - 群组选择器 #id, .class, div{}

2.3.5 - 包含选择器 #id .class{}

2.3.6 - 通配符 *{}

2.3.6.1 - 通配符的优缺点

2.4 - 选择器优先级

2.4.1 - 选择器优先级计算规则

2.4.2 - 基础选择器优先级 style > id > class > 类型选择 > *

2.4.3 - 包含选择器优先级计算

2.4.4 - 群组选择器优先级

2.5 - 标签样式初始化订制方案

2.5.1 - css reset 原则:但凡是浏览默认的样式,都不要使用。

2.6 - 标签类型

2.6.1 - 块元素

2.6.1.1 - 默认独占一行

2.6.1.2 - 没有宽度时,默认撑满一行

2.6.1.3 - 支持所有css命令

2.6.1.4 - 支持所有css命令

2.6.2 - 内嵌(内联、行内)

2.6.2.1 - 同排可以继续跟同类的标签

2.6.2.2 - 内容撑开宽度

2.6.2.3 - 不支持宽高

2.6.2.4 - 不支持上下的margin

2.6.2.5 - 代码换行被解析

2.7 - 标签类型转换

2.7.1 - display 显示

2.7.1.1 - block 显示为块 使内联元素具备块属性标签的特性

2.7.1.2 - inline 显示为内嵌 使行块属性标签具备内联元素的特性

2.8 - inline-block

2.8.1 - 特性

2.8.1.1 - 块在一行显示

2.8.1.2 - 行内属性标签支持宽高

2.8.1.3 - 没有宽度的时候内容撑开宽度

2.8.2 - 问题

2.8.2.1 - 代码换行被解析

2.8.3 - inline-block的应用

2.8.4 - vertical-align 垂直对齐方式

2.9 - cursor

2.9.1 - cursor 指针样式 (规定要显示的光标的类型)

2.9.2 - cursor:pointer | text | move ……

2.9.3 - cursor:url(hand.cur),pointer

2.10 - 编码规范

2.10.1 - HTML编码规范

2.10.2 - CSS编码规范

2.10.3 - 其他规范

2.10.3.1 - 所有书写均在英文半角状态下的小写

2.10.3.2 - id,class必须以字母开头

2.10.3.3 - 所有标签必须闭合

2.10.3.4 - html标签用tab键缩进

2.10.3.5 - 属性值必须带引号

2.10.3.6 - ul,li/ol,li/dl,dt,dd拥有父子级关系的标签

2.10.3.7 - p,dt,h标签 里面不能嵌套块属性标签

2.10.3.8 - a标签不能嵌套a

2.10.3.9 - 内联标签不能嵌套块标签

2.11 - 练习:商品推荐横排列表

2.12 - 练习:热卖商品竖排列表

本章节案例&练习:

商品推荐横排列表(编写H5结构)
热卖商品竖排列表(编写H5结构)
热卖单品关键字(100%还原设计稿)— 扩展
主推商品与关键字组合模块(编写H5结构)— 扩展

3
第三章 浮动:文档流、浮动特性、clear、清除浮动的方法、BFC、overflow
3.1 - 文档流:文档流是文档中可显示对象在排列时所占用的位置

3.2 - 浮动的前世今生

3.2.1 - 浮动:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。

3.3 - 基础语法

3.3.1 - float:left | right | none | inherit;

3.4 - 浮动的特性

3.4.1 - 块在一排显示

3.4.2 - 内联支持宽高

3.4.3 - 默认内容撑开宽度

3.4.4 - 脱离文档流

3.4.5 - 阻止margin叠压

3.5 - clear:left | right | both | none | inherit

3.5.1 - 元素的某个方向上不能有浮动元素

3.6 - 为什么需要清除浮动?

3.7 - 清除浮动的几种方法

3.7.1 - 加高 - 问题:扩展性不好

3.7.2 - 空标签清浮动 - 问题:IE6 最小高度 19px(解决后IE6下还有2px偏差)

3.7.3 - br清浮动 - 问题:不符合工作中:结构、样式、行为,三者分离的要求

3.7.4 - after伪类 清浮动方法

3.8 - BFC (Block Formatting Context)

3.8.1 - 作用

3.8.1.1 - 包含浮动元素

3.8.1.2 - 不被浮动元素覆盖

3.8.1.3 - margin传递撑开宽度

3.8.2 - 触发BFC的条件

3.8.2.1 - float的值不为none

3.8.2.2 - overflow的值不为visible

3.8.2.3 - overflow

3.8.2.4 - display的值为 table-cell、table-caption和inline-block之一

3.8.2.5 - position的值不为 static或 relative中的任何一个

3.9 - overflow: hidden | scroll | auto

3.10 - 练习:全球通业务模块

3.11 - 练习:综合性复杂模块

本章节案例&练习:

全球通业务模块
本周主打模块
电影主打模块
时尚秀模块 — 扩展
节气列表模块 — 扩展
明星荐片模块 — 扩展

4
第四章 定位进阶:相对定位、偏移量、绝对定位、层级提升、固定定位、透明度、多背景、滤镜
4.1 - position:relative 相对定位

4.1.1 - 不影响元素本身的特性

4.1.2 - 不使元素脱离文档流(元素移动之后原始位置会被保留)

4.1.3 - 如果没有定位偏移量,对元素本身没有任何影响

4.1.4 - 提升层级

4.2 - 偏移量

4.2.1 - top/right/bottom/left 定位元素偏移量。

4.3 - position:absolute 绝对定位

4.3.1 - 使元素完全脱离文档流

4.3.2 - 使内嵌支持宽高

4.3.3 - 块属性标签内容撑开宽度

4.3.4 - 如果有定位父级相对于定位父级发生偏移,没有定位父级相对于document发生偏移

4.3.5 - 相对定位一般都是配合绝对定位元素使用

4.3.6 - 提升层级

4.4 - z-index:[number] 定位层级

4.4.1 - 定位元素默认后者层级高于前者

4.4.2 - 建议在兄弟标签之间比较层级

4.5 - position:fixed 固定定位

4.5.1 - 与绝对定位的特性基本一致,的差别是始终相对整个文档进行定位

4.5.2 - 问题:IE6不支持固定定位

4.6 - opacity 透明度

4.7 - 多背景设置

4.8 - linear-gradient 线性渐变

4.9 - radial-gradient 径向渐变

4.10 - text-shadow 文字阴影

4.11 - box-shadow 盒子阴影

4.12 - filter 滤镜

4.13 - border-radius 圆角设置

4.14 - 练习:鼠标移入线框变色

4.15 - 练习:大练习-影片标高清图标层

本章节案例&练习:

图片层上方设置半透明层
综合练习-影片标高清图标层
大练习-影片标高清图标层
鼠标移入底红消失 — 扩展
鼠标移入线框变色 — 扩展

5
第五章 表格和表单:表格标签、表格样式重置、横跨列数、行数、form、表单控件、属性选择器、伪类
5.1 - 表格标签

5.1.1 - table 表格

5.1.2 - thead 表格头

5.1.2.1 - th 元素定义表头

5.1.3 - tbody 表格主体

5.1.3.1 - tr 表格行

5.1.3.2 - td 元素定义表格单元

5.2 - 表格样式重置

5.2.1 - table{border-collapse:collapse;} 单元格间隙合并

5.2.2 - th,td{padding:0;}重置单元格默认填充

5.3 - colspan 属性规定单元格可横跨的列数

5.4 - rowspan 属性规定单元格可横跨的行数

5.5 - form 表单

5.5.1 - action

5.5.2 - method

5.6 - < input type="…" name="" value="" /> 表单元素

5.6.1 - text 文本框

5.6.2 - password 密码

5.6.3 - radio 单选

5.6.4 - checkbox 复选

5.6.5 - submit 提交

5.6.6 - image

5.6.7 - reset 重置

5.6.8 - button 按钮

5.6.9 - file 上传

5.6.10 - hidden 隐藏

5.6.11 - email 电子邮箱文本框

5.6.12 - tel 电话号码

5.6.13 - url 网页的URL

5.6.14 - search 搜索引擎

5.6.15 - range 特定范围内的数值选择器

5.6.16 - number 只能包含数字的输入框

5.6.17 - color 颜色选择器

5.6.18 - datetime-local 显示完整日期,不含时区

5.6.19 - time 显示时间,不含时区

5.6.20 - date 显示日期

5.6.21 - week 显示周

5.6.22 - month 显示月

5.7 - label标签 input元素定义标注

5.8 - select/option 下拉选框

5.9 - textarea 文本域

5.10 - 表单元素属性

5.10.1 - checked属性 在页面加载时默认选定的 input 元素

5.10.2 - disabled属性 属性规定应该禁用 input 元素

5.10.3 - placeholder 输入框提示信息

5.10.4 - autocomplete 是否保存用户输入值

5.10.5 - autofocus 指定表单获取输入焦点

5.10.6 - required 此项必填,不能为空

5.10.7 - pattern 正则验证 pattern=”d{1,5}”

5.10.8 - formaction 在submit里定义提交地址

5.11 - 属性选择器

5.11.1 - E[attr]只使用属性名,但没有确定任何属性值

5.11.2 - E[attr=”value”]指定属性名,并指定了该属性的属性值

5.11.3 - E[attr~=”value”]指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的“〜”不能不写

5.11.4 - E[attr^=”value”]指定了属性名,并且有属性值,属性值是以value开头的

5.11.5 - E[attr$=”value”]指定了属性名,并且有属性值,而且属性值是以value结束的

5.11.6 - E[attr*=”value”]指定了属性名,并且有属性值,而且属值中包含了value

5.11.7 - E[attr|=”value”]指定了属性名,并且属性值是value或者以“value-”开头的值(比如说zh-cn)

5.12 - 表单相关伪类

5.12.1 - E:disabled 表示不可点击的表单控件

5.12.2 - E:enabled 表示可点击的表单控件

5.12.3 - E:checked 表示已选中的checkbox或radio

5.13 - 练习:综合表单实例

本章节案例&练习:

综合练习-天气预报
综合表单实例-表格布局

6
第六章 结构选择器:元素下、相邻、同级、n 个子节点、类型匹配
6.1 - E>E 找到元素下的第一层子元素

6.2 - E+E 相邻元素选择器

6.3 - E~E 同级元素选择器

6.4 - E:nth-child(n) 表示E父元素中的第n个子节点

6.4.1 - :nth-child(odd) 匹配奇数行

6.4.2 - :nth-child(even) 匹配偶数行

6.4.3 - :nth-child(3n+1) 根据自然数匹配

6.5 - E:nth-last-child(n) 表示E父元素中的第n个子节点,从后向前计算

6.6 - E:nth-of-type(n) 表示E父元素中的第n个子节点,且类型为E

6.7 - E:nth-last-of-type(n)表示E父元素中的第n个子节点,且类型为E,从后向前计算

6.8 - E:first-child 表示E元素中的第一个子节点

6.9 - E:last-child 表示E元素中的最后一个子节点

6.10 - E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的

6.11 - E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的

6.12 - E:only-child表示E元素中只有一个子节点。注意:子节点不包含文本节点

6.13 - E:only-of-type 表示E的父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。注意:子节点不包含文本节点

本章节案例&练习:

隔行变色
综合练习-影片标高清图标层
表单美化 — 扩展

7
第七章 PC 端整站开发:CSS 精灵(sprites)、项目文件管理规划、难点解析、特殊布局
7.1 - css sprites 精灵/雪碧图

7.2 - 项目文件管理

7.3 - 页面规划

7.4 - 难点解析

7.4.1 - 通栏banner处理方案

7.4.2 - 电商类网站导航结构分析

7.4.3 - 视频类网站细节处理

7.5 - 练习:整页练习

本章节案例&练习:

整页练习:完成类似大小的单页面一个

8
第八章 Less:编译、常用语法、变量、混合、参数、嵌套、运算、作用域、注释、循环
8.1 - less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充

8.2 - less编译

8.2.1 - less 本身不被浏览器识别,我们在使用 less 时,一定要经过编译

8.2.2 - 编译方法

8.2.2.1 - 第三方工具编译(Koala)

8.2.2.2 - 客户端编译,引入 less.js 文件进行编译,但是不推荐在生产环境中使用

8.2.2.3 - 利用 node.js 在服务端进行编译

8.3 - less 常用语法

8.3.1 - 变量,为数据起个简单的名字方便重复调用,需要注意的是,less 中的变量只能定义一次,其本质就是“常量”

8.3.1.1 - 在选择器中使用变量

8.3.1.2 - 在 url 中使用变量

8.3.1.3 - 在属性名中使用变量

8.3.1.4 - 在属性值中使用变量

8.3.2 - 混合,混合类似于我们在其他程序中的函数,我们可以用 id class 等方式把一个代码块包起来,这样的话,就可以重复去调用一个代码块

8.3.3 - 混合防止编译,在选择器后边跟一个括号,本代码块在编译时就不会被编译

8.3.4 - 带参数混合,在混合中我们可以定义参数,这样的话我们就可以在调用混合是传递数据进去

8.3.4.1 - 默认情况下,参数要与传入的数据一一对应

8.3.4.2 - 定义参数的默认值

8.3.4.3 - 给传入的数据起名字

8.3.5 - 嵌套,在写包含选择器时,可以直接写在父代码块中

8.3.5.1 - & 父选择器

8.3.6 - 运算,在 less 中 我们可以进行加减乘除等运算

8.3.7 - 作用域 ,在代码块中定义的数据,就只能在该代码块中进行使用

8.3.8 - 注释

8.3.8.1 - 单行注释,编译时不会被编译

8.3.8.2 - 多行注释,编译时会被保留

8.3.9 - merge 对于 通过,分割的复合样式,进行合并

8.3.10 - Guards 其实就是我们所说的判断,我们可以给一个代码块定义一个判断条件在实际使用时当条件成立时,才会调用到代码块中的内容

8.3.10.1 - 逻辑运算符:>,>=,=,=<,<

8.3.11 - 循环,在 less 中想要使用循环的话,我们就必须采取递归的形式

本章节案例&练习:

整页练习:完成类似大小的单页面一个

9
第九章 移动端开发与适配:测试环境搭建、服务器配置、rem 布局、弹性盒模型
9.1 - 移动端

9.1.1 - 移动端测试环境

9.1.2 - Emulation

9.1.3 - 本地服务器配置

9.1.4 - 物理分辨率和显示分辨率

9.1.5 - window.devicePixelRatio 像素比

9.1.6 - 清除IOS下按钮的圆角

9.1.7 - 移动端链接和按钮的阴影消除

9.1.8 - 移动端rem布局

9.1.9 - background-size

9.1.10 - box-sizing 怪异盒模型

9.1.11 - background-origin

9.1.12 - background-clip

9.2 - 案例: 妙味商城

9.3 - 练习:淘宝移动端

9.4 - 练习:百度移动端

9.5 - 弹性盒模型

9.5.1 - display:flex

9.5.2 - flex-direction

9.5.3 - row

9.5.4 - row-reverse

9.5.5 - window.devicePixelRatio 像素比

9.5.6 - justify-content

9.5.7 - align-items

9.5.8 - flex-wrap

9.5.9 - align-content

9.5.10 - flex-flow

9.5.11 - order

9.5.12 - 弹性盒模型的margin:auto

9.5.13 - align-self

9.5.14 - flex

9.6 - 案例: 移动端淘宝banner

本章节案例&练习:

百度(baidu)
京东(jd)
淘宝(taobao)
移动端价格列表
移动端简单页面布局

10
第十章 Bootstrap 和响应式:媒询、自定义字体图标、bootstrap 特性、源码、栅格系统
10.1 - Media Queries

10.1.1 - 媒体类型

10.1.2 - 关键字

10.1.3 - 媒体类型

10.2 - 练习:jQuery响应式官网(头部)

10.3 - bootstrap

10.3.1 - font-face和自定义文字图标

10.3.2 - 预处理脚

10.3.3 - Bootstrap的特性

10.3.4 - Bootstrap工程环境

10.3.5 - Bootstrap源码

10.3.6 - Bootstrap设计思想

10.3.7 - 安装方式

10.3.8 - Bootstrap页面的基本结构

10.3.9 - 栅格系统

10.3.10 - 栅格大小屏控制

10.3.11 - 媒体查询参数说明

10.3.12 - offset 偏移设置

10.3.13 - 栅格系统响应式工具

10.3.14 - bootstrap的默认UI设置

10.3.15 - 字体图标

10.3.16 - 下拉菜单

10.3.17 - 按钮组

10.3.18 - 输入框组

10.3.19 - 相关导航

10.3.20 - 缩略图

10.3.21 - 媒体对象

10.3.22 - 具有响应式特性的嵌入内容略

10.4 - 实战:Ghost中文网

本章节案例&练习:

jQuery响应式官网
UC官网

11
第十一章 git 和 github 使用:SVN、集成式、图形界面、git 命令、github 创建


报名咨询:

• 咨询QQ:2852509866、2852509867、2852509868
• 微信:miaov-class
• 电话:010-57269690

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

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
联系我们

点我咨询QQ客服

010-57269690

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

工作日:9:30~18:00

周六:10:00~17:00

妙味公众号