零基础课程

PC\移动端\响应式\bootstrap\less...

查看章节 全部展开 共0个阶段,15 章节,422 小节知识点。

1

第一章:前端代码初识
1.1 - 前端开发工作流程介绍
1.2 - 前端开发所需软件
1.2.1 - Photoshop(切图、修图、测量)
1.2.2 - 编辑器
1.2.3 - 浏览器:标准浏览器、IE浏览器
1.3 - 前端开发语言介绍
1.3.1 - html(Hypertext Markup Language) 超文本标记语言
1.3.2 - css(Cascading Style Sheets) 层叠样式表
1.3.3 - js(JavaScript) 脚本语言
1.4 - 第一个HTML页面
1.4.1 - 标记(标签)
1.4.2 - 标签嵌套关系
1.5 - 样式表
1.5.1 - 行间样式表
1.5.2 - 内部样式表
1.5.3 - 外部样式表
1.6 - 常见样式
1.6.1 - 属性:属性值
1.6.2 - width/height
1.7 - border
1.7.1 - border-width
1.7.2 - border-style
1.7.3 - border-color
1.7.3.1 - 常用颜色模式--关键字
1.7.3.2 - 常用颜色模式--rgb
1.7.3.3 - 常用颜色模式--十六进制
1.7.4 - border-top
1.7.5 - border-right
1.7.6 - border-bottom
1.7.7 - border-left
1.8 - background
1.8.1 - background-color
1.8.2 - background-image
1.8.3 - background-repeat
1.8.4 - background-position
1.8.5 - background-attachment
1.9 - 文字设置
1.9.1 - font-weight
1.9.2 - font-style
1.9.3 - font-size
1.9.4 - line-height
1.9.5 - font-family
1.9.6 - font复合样式
1.10 - 文本设置
1.10.1 - color
1.10.2 - text-align
1.10.3 - text-indent
1.10.4 - text-decoration
1.10.5 - letter-spacing
1.10.6 - word-spacing
1.10.7 - white-space
1.10.8 - TIPS:一个空格有多大?
1.11 - 超链接
1.11.1 - href属性
1.11.2 - 相对路径、绝对路径
1.11.3 - 锚点 (#)
1.11.4 - 下载
1.11.5 - target属性
1.11.6 - base标签
1.12 - padding
1.12.1 - padding-top
1.12.2 - padding-right
1.12.3 - padding-bottom
1.12.4 - padding-left
1.12.5 - padding复合样式
1.13 - margin
1.13.1 - margin-top
1.13.2 - margin-right
1.13.3 - margin-bottom
1.13.4 - margin-left
1.13.5 - margin复合样式
1.13.6 - margin的问题
1.14 - 盒模型
1.14.1 - 盒子大小
1.14.2 - 盒子宽度
1.14.3 - 盒子高度
本章节案例&练习:
>> 1-网易线框练习(一)
>> 3-关键字颜色区分
>> 4-简洁导航文字设置
>> 6-网易产品模块
>> 7-模拟右键系统菜单
>> 8-模拟系统警告框弹出窗

2

第二章:H5标签与CSS选择器
2.1 - a标签/span标签
2.1.1 - a标签四个伪类
2.1.2 - span标签
2.2 - 常用标签
2.2.1 - 常用标签:h1-h6、p、strong、em、span、ul、ol、li、dl、dt、dd
2.2.2 - HTML5新增标签:header、nav、footer、section、article、aside、time、mark…
2.3 - 特殊的img
2.4 - 常用选择器
2.4.1 - id选择器
2.4.2 - 类选择器
2.4.3 - 标签选择器
2.4.4 - 群组选择、包含选择器
2.4.5 - 通配符
2.5 - 选择器优先级
2.5.1 - 基础选择器优先级
2.5.2 - 包含选择器优先级计算
2.5.3 - 群组选择器优先级
2.6 - css reset
2.7 - 块元素及特征
2.8 - 内联元素及特征
2.9 - 块与内联的转换
2.10 - inline-block
2.10.1 - inline-block的特性
2.10.2 - inline-block的问题
2.11 - vertival-align
本章节案例&练习:
>> 1-IT产品有序列表(100%还原设计稿)
>> 2-热卖单品关键字(100%还原设计稿)
>> 3-商品推荐横排列表(编写H5结构)
>> 4-热卖商品竖排列表(编写H5结构)
>> 5-主推商品与关键字组合模块(编写H5结构)

3

第三章:浮动的深度剖析
3.1 - float
3.1.1 浮动的特性
3.1.2 浮动的表现
3.1.3 文档流
3.2 - clear
3.3 - 清浮动方法
3.3.1 给容器加高度
3.3.2 以浮制浮
3.3.3 br清浮动
3.3.4 inline-block清浮动
3.3.5 after伪类 清浮动方法
3.4 - BFC
3.4.1 BFC的作用
3.4.2 触发BFC的条件
3.4.3 overflow
本章节案例&练习:
>> 1-全球通业务模块
>> 2-明星荐片模块
>> 3-本周主打模块
>> 4-节气列表模块
>> 5-时尚秀模块
>> 6-电影主打模块
>> 7-综合性复杂模块

4

第四章:定位进阶
4.1 相对定位
4.1.1 相对定位的表现
4.2 绝对定位
4.2.1 绝对定位的表现
4.2.2 定位层级
4.3 透明度/透明滤镜
4.3.1 opacity:0~1
4.3.2 filter:alpha(opacity=0~100)
4.4 固定定位
4.4.1 固定定位的表现
4.4.2 固定定位的问题
本章节案例&练习:
>> 1-鼠标移入线框变色
>> 2-鼠标移入底红消失
>> 3-图片层上方设置半透明层
>> 4-综合练习-影片标高清图标层
>> 5-大练习-影片标高清图标层

5

第五章:表格详解
5.1 - 表格标签
5.1.1 - table
5.1.2 - thead
5.1.3 - tbody
5.1.4 - tr
5.1.5 - th
5.1.6 - td
5.2 - 表格样式重置
5.2.1 - 单元格间隙合并
5.2.2 - 重置单元格默认填充
5.3 - colspan
5.4 - rowspan
本章节案例&练习:
>> 1-综合练习-天气预报

6

第六章:表单及相关属性
6.1 - 表单form
6.1.1 - action
6.2 - input类型及属性
6.2.1 - 文本框
6.2.2 - 密码
6.2.3 - 单选
6.2.4 - 复选
6.2.5 - 提交
6.2.6 - 重置
6.2.7 - 按钮
6.2.8 - 图片
6.2.9 - 上传
6.2.10 - 隐藏
6.3 - label
6.4 - select/option 下拉选框
6.5 - textarea 文本域
6.6 - 表单常用属性
6.6.1 - name
6.6.2 - disabled与readonly的区别
6.6.3 - checked/selected
6.6.4 - label的for属性
6.7 - 表单的默认样式重置
6.7.1 - resize
6.7.2 - outline
本章节案例&练习:
>> 1-综合表单实例-表格布局

7

第七章:浏览器兼容性
7.1 - css兼容性常见问题
7.2 - 代码调试
7.2.1 - 调试工具
7.2.2 - 手动调试
7.3 - css hack
7.3.1 - 常用hack写法
7.3.2 - !important
7.4 - html条件注释语句
7.5 - PNG24 兼容性问题
7.5.1 - IE6固定定位兼容
本章节案例&练习:
>> 手机飞信专题页

8

第八章:PC端整站开发
8.1 - 网站目录划分
8.2 - 页面结构规划
8.2.1 - min-width
8.2.3 - max-width
8.2.3 - max-width
8.2.4 - max-height
8.2.5 - text-overflow
8.3 - 命名规划
8.4 - css sprites
8.5 - border-radius
8.6 - box-shadow
8.7 - css 滑动门
本章节案例&练习:
>> 整页练习:完成类似大小的单页面一个

9

第九章:Html5表单&属性选择器
9.1 - 新特性的浏览器支持情况
9.2 - HTML5新增表单类型
9.2.1 - email
9.2.2 - tel
9.2.3 - url
9.2.4 - search
9.2.5 - range
9.2.6 - number
9.2.7 - color
9.2.8 - datetime-local
9.2.9 - time
9.2.10 - date
9.2.11 - week
9.2.12 - month
9.3 - HTML5新增表单属性
9.3.1 - placeholder
9.3.2 - autocomplete
9.3.3 - autofocus
9.3.4 - required
9.3.5 - pattern
9.3.6 - formaction
9.3.7 - list与datalist
9.4 - 属性选择器
9.4.1 - E[attr]
9.4.2 - E[attr="value"]
9.4.3 - E[attr~="value"]
9.4.4 - E[attr$="value"]
9.4.5 - E[attr*="value"]
9.4.6 - E[attr^="value"]
9.4.7 - E[attr|="value"]
9.5 - 表单相关伪类
9.5.1 - :focus
9.5.2 - :placeholder
9.5.3 - :enabled
9.5.4 - :disabled
9.5.5 - :checked
9.6 - 结构选择器
9.6.1 - ">"
9.6.2 - "+"
9.6.3 - "~"
9.7 - 其他伪类
9.7.1 - :nth-child
9.7.2 - :nth-last-child
9.7.3 - :nth-of-type
9.7.4 - :nth-last-of-type
9.7.5 - :nth-of-type
9.7.6 - :empty
9.7.7 - :first-child
9.7.8 - :last-child
9.7.9 - :first-of-type
9.7.10 - :last-of-type
9.7.11 - :only-child
9.7.12 - :only-of-type
9.7.13 - :first-line
9.7.14 - :first-letter
9.7.15 - :target
9.7.16 - ::after
9.7.17 - ::before
9.7.18 - ::selection
9.7.19 - :not()
本章节案例&练习:
>> 1-表单美化
>> 2-隔行变色

10

第十章: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.6.1 - border-image
10.6.2 - border-colors
10.7 - css3背景新增设置
10.7.1 - 多背景
10.7.2 - linear-gradient
10.7.3 - repeating-linear-gradient
10.7.4 - radial-gradient
10.7.5 - background-size
10.7.6 - background-origin
10.7.7 - background-clip
10.8 - mask
10.8.1 - mask-image
10.8.2 - mask-position
10.8.3 - mask-repeat
10.9 - box-reflect
10.10 - box-sizing
10.11 - filter
10.11.1 - grayscale
10.11.2 - sepia
10.11.3 - hue-rotate
10.11.4 - saturate
10.11.5 - invert
10.11.6 - opacity
10.11.7 - brightness
10.11.8 - contrast
10.11.9 - blur
10.11.10 - drop-shadow
本章节案例&练习:
>> iphone开机动画
>> mask
>> 进度条
>> 移动端的“字体图标”设置

11

第十一章:移动端开发与适配
11.1 - 测试环境
11.1.1 - Emulation
11.1.2 - 本地服务器
11.2 - 移动端布局和PC端的区别
11.3 - 物理分辨率和显示分辨率
11.4 - viewport 视口设置
11.4.1 - width
11.4.2 - user-scalable
11.4.3 - initial-scale
11.4.4 - minimum-scale
11.4.5 - maximum-scale
11.5 - window.devicePixelRatio 像素比
11.5.1 1px的边框设置
11.5.2 图片发虚问题
11.6 - rem布局
11.6.1 - 动态设置 html 的font-size
11.6.2 - rem中 页面最大宽度设置
11.6.3 - 最小字体限制
11.7 - 移动端的默认样式处理
11.7.1 - 链接和按钮的阴影消除
11.7.2 - 清除IOS下按钮的圆角
11.8 - 横竖屏检测
本章节案例&练习:
>> 1-移动端价格列表
>> 2-移动端简单页面布局
>> 3-淘宝(taobao)
>> 4-百度(baidu)
>> 5-京东(jd)

12

第十二章:弹性盒模型&响应式
12.1 - display:flex
12.2 - flex-direction 设置主轴方向
12.2.1 - row
12.2.2 - row-reverse
12.2.3 - column
12.2.4 - column-reverse
12.3 - justify-content
12.3.1 - flex-start
12.3.2 - flex-end
12.3.3 - center
12.3.4 - space-between
12.3.5 - space-around
12.4 - align-items
12.4.1 - flex-start
12.4.2 - flex-end
12.4.3 - center
12.5 - flex-wrap
12.5.1 - nowrap
12.5.2 - wrap
12.5.3 - wrap-reverse
12.6 - align-content
12.6.1 - align-content
12.6.2 - flex-start
12.6.3 - flex-end
12.6.4 - center
12.6.5 - space-between
12.6.6 - space-around
12.7 - flex-flow
12.8 - flex子元素相关属性
12.8.1 - order
12.8.2 - margin:auto;
12.8.3 - align-self
12.8.4 - flex
12.9 - Media Queries 媒体查询
12.9.1 - 媒体类型
12.9.2 - 关键字
12.9.3 - 媒体类型
12.9.4 - Media Queries的兼容
本章节案例&练习:
>> 1-jQuery响应式官网
>> 2-UC官网

13

第十三章:CSS3动画与3D变换
13.1 - transition
13.1.1 - transition-property
13.1.2 - transition-duration
13.1.3 - transition-delay
13.1.4 - transition-timing-function
13.2 - transform
13.2.1 - rotate()
13.2.2 - skew()
13.2.3 - scale()
13.2.4 - translate()
13.2.5 - matrix()
13.2.6 - Transform 执行顺序问题
13.3 - 3D变换
13.3.1 - perspective
13.3.2 - perspective-origin
13.3.3 - transform-style
13.4 - transform新增函数
13.4.1 - rotateX()、rotateY()、rotateZ()
13.4.2 - translateZ()
13.4.3 - scaleZ()
本章节案例&练习:
>> 1-3d盒子
>> 2-滚动相册

14

第十四章:CSS预处理:LESS
14.1 - 什么是css预处理器
14.2 - Less的使用和编译方式
14.3 - Variables 变量
14.3.1 - 属性值中的变量
14.3.2 - 属性名中的变量
14.3.3 - 选择器中的变量
14.3.4 - url中的变量
14.3.5 - 变量名中的变量
14.4 - Extend
14.5 - Mixin 混合
14.5.1 - 带参数的 Mixin
14.5.2 - 作为函数使用的Mixin
14.6 - 嵌套
14.7 - 父选择符
14.8 - 合并
14.9 - Guards
14.9.1 - Mixin Guards
14.9.2 - CSS Guards
14.10 - 循环

15

第十五章: Bootstrap前端开发框架
15.1 - bootstrap页面的基本结构
15.2 - 栅格系统
15.2.1 - 栅格大小屏控制
15.2.2 - 媒体查询参数说明
15.2.3 - offset 偏移设置
15.2.4 - 栅格中的列嵌套
15.2.5 - 栅格中的列排序
15.3 - 栅格系统
15.3.1 - 栅格大小屏控制
15.3.2 - 媒体查询参数说明
15.3.3 - offset 偏移设置
15.3.4 - 栅格中的列嵌套
15.4- 响应式工具
15.5 - bootstrap的默认UI设置
15.5.1 - 排版
15.5.2 - 代码
15.5.3 - 表格
15.5.4 - 表单
15.5.5 - 按钮
15.5.6 - 图片
15.6 - 辅助样式
15.6.1 - 情境文本颜色
15.6.2 - 情境背景色
15.6.3 - 关闭按钮
15.6.4 - 三角符号
15.6.5 - 快速浮动
15.6.6 - 让内容块居中
15.6.7 - 清除浮动
15.6.8 - 显示或隐藏内容
15.6.9 - 屏幕阅读器和键盘导航
15.6.10 - 以图换字
15.7 - 字体图标
15.8 - 常用组件
15.8.1 - 下拉菜单
15.8.2 - 按钮组
15.8.3 - 输入框组
15.8.4 - 相关导航
15.8.5 - 分页/标签/徽章/巨幕/页头/面板
15.8.6 - 缩略图
15.8.7 - 警告框
15.8.8 - 进度条
15.8.9 - 媒体对象
15.8.10 - 列表组
15.8.11 - 具有响应式特性的嵌入内容
15.8.12 - Well

京ICP备08102442号 2012.MIAOOV.COM 版权所有