向过去挥手道别,开始学习吧!北京全日制班名额预订中...

古语云:“活到老,学到老” ——这既是一种态度,也是如今这疯狂进步的社会环境下必然的选择。

如果你对从前的自己不满意;
如果你觉得自己的技能水平还不够;
如果你想在职场上更进一步;

眼下,一个恰当的学习机会来了!北京妙味实体班开课在即,欢迎所有想要学习进步的你。

《WEB 前端开发零基础课程:PC\移动端\响应式\bootstrap\less》

开课时间:2017 年 9 月 12 日

课程内容详情:http://www.miaov.com/index.php/course/coursedetail/cid/33

乘车路线

课程简介

本课程共需要 2 个月时间,讲解内容涵盖 PC 端静态页面制作所需的全部知识,以及移动端静态页面制作、响应式开发、 CSS3 相关的新特性、3D 与动画等内容。完成所学课程以后,最终检验学员们能否顺利毕业的依据,是我们精心安排的整站级别的项目,例如:PC 端电子商城、移动端企业站、微信端静态页面、响应式项目…

课程服务

1、全程有资深讲师授课
2、海量 VIP 视频
3、学习期间不断向授课讲师提问
4、辅导做出优秀的学员作品
5、绝佳的工作推荐机会

学成可以做什么

http://miaov.com/index.php/example/exampleList

课程大纲

第一章 前端代码初识

  • 1.1 - 前端开发工作流程介绍
  • 1.2 - 前端开发所需软件、 Photoshop、编辑器、 浏览器:
  • 1.3 - 前端开发语言介绍:html、CSS、JavaScript
  • 1.4 - 第一个 HTML 页面、 标记(标签)、标签嵌套关系
  • 1.5 - 样式表 行间样式表、内部样式表、外部样式表
  • 1.6 - 常见样式、属性:属性值、width/height
  • 1.7 - border:width、style、color、top、right、bottom、left
    • 常用颜色模式—关键字
    • 常用颜色模式—rgb
    • 常用颜色模式—十六进制
  • 1.8 - background:
  • 1.9 - 文字设置:
  • 1.10 - 文本设置:
  • 1.11 - 超链接、
  • 1.12 - padding:
  • 1.13 - margin
  • 1.14 - 盒模型、盒子大小、盒子宽度、盒子高度
  • 本章节案例&练习:

1-网易线框练习(一)
2-关键字颜色区分
3-简洁导航文字设置
4-网易产品模块
5-模拟右键系统菜单
6-模拟系统警告框弹出窗

第二章:H5标签与CSS选择器

  • 2.1 - a 标签
  • 2.2.1 - 常用标签:
  • 2.2.2 - HTML5 新增标签:
  • 2.3 - 特殊的img
  • 2.4 - 常用选择器
    • id 选择器
    • 类选择器
    • 标签选择器
    • 群组选择、包含选择器
    • 通配符
  • 2.5 - 选择器优先级
    • 基础选择器优先级
    • 包含选择器优先级计算
    • 群组选择器优先级
  • 2.6 - css reset
  • 2.7 - 块元素及特征
  • 2.8 - 内联元素及特征
  • 2.9 - 块与内联的转换
  • 2.10 - inline-block
    • inline-block的特性
    • inline-block的问题
  • 2.11 - vertival-align
  • 本章节案例&练习:

1-IT产品有序列表(100% 还原设计稿)
2-热卖单品关键字(100% 还原设计稿)
3-商品推荐横排列表(编写 H5 结构)
4-热卖商品竖排列表(编写 H5 结构)
5-主推商品与关键字组合模块(编写 H5 结构)

第三章:浮动的深度剖析

  • 3.1 - float
    • 浮动的特性
    • 浮动的表现
    • 文档流
  • 3.2 - clear
  • 3.3 - 清浮动方法
    • 给容器加高度
    • 以浮制浮
    • br 清浮动
    • inline-block 清浮动
    • after 伪类 清浮动方法
  • 3.4 - BFC
    • BFC 的作用
    • 触发 BFC 的条件
    • overflow
  • 本章节案例&练习:

1-全球通业务模块
2-明星荐片模块
3-本周主打模块
4-节气列表模块
5-时尚秀模块
6-电影主打模块
7-综合性复杂模块

第四章 定位进阶

  • 4.1 相对定位:相对定位的表现
  • 4.2 绝对定位
    • 绝对定位的表现
    • 定位层级
  • 4.3 透明度/透明滤镜
    • opacity:0~1
    • filter:alpha(opacity=0~100)
  • 4.4 固定定位
    • 固定定位的表现
    • 固定定位的问题
  • 本章节案例&练习:

1-鼠标移入线框变色
2-鼠标移入底红消失
3-图片层上方设置半透明层
4-综合练习-影片标高清图标层
5-大练习-影片标高清图标层

第五章:表格详解

  • 5.1 - 表格标签:table、thead、tbody、th、td
  • 5.2 - 表格样式重置
    • 单元格间隙合并
    • 重置单元格默认填充
  • 5.3 - colspan
  • 5.4 - rowspan
  • 本章节案例 & 练习:

1-综合练习-天气预报

第六章 单及相关属性

  • 6.1 - 表单 form:action
  • 6.2 - input 类型及属性:
  • 6.3 - label
  • 6.4 - select/option 下拉选框
  • 6.5 - textarea 文本域
  • 6.6 - 表单常用属性:
  • 6.7 - 表单的默认样式重置:
  • 本章节案例 & 练习:

1-综合表单实例-表格布局

第七章 浏览器兼容性

  • 7.1 - CSS 兼容性常见问题
  • 7.2 - 代码调试:调试工具、手动调试
  • 7.3 - CSS hack:常用 hack 写法、!important
  • 7.4 - Html 条件注释语句
  • 7.5 - PNG24 兼容性问题:IE6 固定定位兼容
  • 本章节案例 & 练习:

手机飞信专题页

第八章 PC 端整站开发

  • 8.1 - 网站目录划分
  • 8.2 - 页面结构规划
    • min-width
    • max-width
    • max-width
    • max-height
    • text-overflow
  • 8.3 - 命名规划
  • 8.4 - CSS sprites
  • 8.5 - border-radius
  • 8.6 - box-shadow
  • 8.7 - CSS 滑动门
  • 本章节案例 & 练习:

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

第九章 Html5 表单 & 属性选择器

  • 9.1 - 新特性的浏览器支持情况
  • 9.2 - HTML5 新增表单类型:
  • 9.3 - HTML5 新增表单属性:
  • 9.4 - 属性选择器
  • 9.5 - 表单相关伪类:
  • 9.6 - 结构选择器:
  • 9.7 - 其他伪类:
  • 本章节案例 & 练习:

1-表单美化
2-隔行变色

第十章 CSS3 新增属性

  • 10.1 - rgba
  • 10.2 - text-shadow
  • 10.3 - text-stroke
  • 10.4 - direction 和 unicode-bidi
  • 10.5 - font-face 和自定义文字图标
  • 10.6 - css3 边框新增设置:
  • 10.7 - css3 背景新增设置
  • 10.8 - mask:
  • 10.9 - box-reflect
  • 10.10 - box-sizing
  • 10.11 - filter、grayscale、s
  • 本章节案例 & 练习:

iphone 开机动画
mask
进度条
移动端的“字体图标”设置

第十一章 移动端开发与适配

  • 11.1 - 测试环境:Emulation、本地服务器
  • 11.2 - 移动端布局和 PC 端的区别
  • 11.3 - 物理分辨率和显示分辨率
  • 11.4 - viewport 视口设置
  • 11.5 - window.devicePixelRatio 像素比
    • 1px 的边框设置
    • 图片发虚问题
  • 11.6 - rem 布局
    • 动态设置 html 的 font-size
    • rem 中页面最大宽度设置
    • 最小字体限制
  • 11.7 - 移动端的默认样式处理
    • 链接和按钮的阴影消除
    • 清除 IOS 下按钮的圆角
  • 11.8 - 横竖屏检测
  • 本章节案例 & 练习:

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

第十二章 弹性盒模型 & 响应式

  • 12.1 - display:flex
  • 12.2 - flex-direction 设置主轴方向:
  • 12.3 - justify-content:
  • 12.4 - align-items:
  • 12.5 - flex-wrap:
  • 12.6 - align-content:
  • 12.7 - flex-flow
  • 12.8 - flex 子元素相关属性:
  • 12.9 - Media Queries 媒体查询:
  • 本章节案例&练习:

1-jQuery 响应式官网
2-UC官网

第十三章 CSS3 动画与 3D 变换

  • 13.1 - transition
  • 13.2 - transform
  • 13.3 - 3D 变换
    • perspective
    • perspective-origin
    • transform-style
  • 13.4 - transform 新增函数
    • rotateX()、rotateY()、rotateZ()
    • translateZ()
    • scaleZ()
  • 本章节案例 & 练习:

1-3d 盒子
2-滚动相册

第十四章 CSS 预处理:LESS

  • 14.1 - 什么是 css 预处理器
  • 14.2 - Less 的使用和编译方式
  • 14.3 - Variables 变量
    • 属性值中的变量
    • 属性名中的变量
    • 选择器中的变量
    • url 中的变量
    • 变量名中的变量
  • 14.4 - Extend
  • 14.5 - Mixin 混合
    • 带参数的 Mixin
    • 作为函数使用的 Mixin
  • 14.6 - 嵌套
  • 14.7 - 父选择符
  • 14.8 - 合并
  • 14.9 - Guards
    • Mixin Guards
    • CSS Guards
  • 14.10 - 循环

第十五章 Bootstrap 前端开发框架

  • 15.1 - bootstrap 页面的基本结构
  • 15.2 - 栅格系统
    • 栅格大小屏控制
    • 媒体查询参数说明
    • offset 偏移设置
    • 栅格中的列嵌套
    • 栅格中的列排序
  • 15.3 - 栅格系统
    • 栅格大小屏控制
    • 媒体查询参数说明
    • offset 偏移设置
    • 栅格中的列嵌套
  • 15.4- 响应式工具
  • 15.5 - bootstrap 的默认 UI 设置
  • 15.6 - 辅助样式
  • 15.7 - 字体图标
  • 15.8 - 常用组件

课程内容详情:http://www.miaov.com/index.php/course/coursedetail/cid/33


课程咨询:

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

想了解妙味最新公开课消息?长按二维码关注吧:

妙味网友
请登录后留言,请登录注册