博学谷 > 免费课 > 前端入门课程

前端入学课程

前端入门课程

学习本次课程需要掌握sublime基本使用,HTML/HTML5常用标签语义化应用,CSS3选择器、盒模型、浮动、清除浮动、定位以及Photoshop的基本操作。

主讲:前端高级讲师 | 课程时长:24课时| 学习人数:595人 | 难度: 基础

免费

立即报名

第 一 章:HTML/HTML5【新】

1-1 浏览器介绍

1-1-1 认识网页
1-1-2 常见浏览器
1-1-3 浏览器内核
1-1-4 web标准

1-2 HTML基本结构

1-2-1 HTML初识
1-2-2 HTML骨架
1-2-3 我的第一个页面及其标签简介
1-2-4 猪八戒版骨架记忆法

1-3 HTML常用标签

1-3-1 什么是标签及其分类
1-3-2 标签嵌套和并列关系
1-3-3 简单小测验
1-3-4 开发工具sublime
1-3-5 sublime生成html骨架
1-3-6 doctype文档类型
1-3-7 字符集简介
1-3-8 标签的语义化及其标题标签
1-3-9 段落标签和水平线标签
1-3-10 课堂案例-新闻页面
1-3-11 换行和div span标签
1-3-12 文本格式化标签
1-3-13 标签属性
1-3-14 图像标签
1-3-15 链接标签
1-3-16 锚点定位
1-3-17 base标签
1-3-18 特殊字符
1-3-19 注释标签

1-4 相对路径

1-4-1 相对路径(一)
1-4-2 相对路径(二)

1-5 列表

1-5-1 无序列表的使用
1-5-2 无序列表注意事项
1-5-3 有序列表
1-5-4 四大名著案例
1-5-5 自定义列表
1-5-6 第一天HTML总结

1-6 表格

1-6-1 认识表格
1-6-2 表格的注意事项
1-6-3 表格属性
1-6-4 表头标签
1-6-5 表格结构
1-6-6 浏览器审查HTML标签元素
1-6-7 表格标题标签
1-6-8 合并单元格
1-6-9 合并单元格复习

1-7 表单和表单控件

1-7-1 表单的作用
1-7-2 文本框和密码框
1-7-3 单选按钮和复选按钮
1-7-4 默认选中表单属性
1-7-5 input按钮组
1-7-6 最多字符数和文本值
1-7-7 label标签
1-7-8 文本域
1-7-9 下拉菜单
1-7-10 表单域

1-8 HTML5 新增标签和属性

1-8-1 html5 文档类型和字符集
1-8-2 查看手册及其新增标签
1-8-3 datalist标签
1-8-4 fieldset元素
1-8-5 HTML5 新增input 表单(一)
1-8-6 HTML5 新增input 表单(二)
1-8-7 新增占位符焦点多选属性
1-8-8 autocomplete属性
1-8-9 内容不能为空和获得焦点属性
1-8-10 表单综合案例-学生档案
1-8-11 embed引入网上视频
1-8-12 播放音频audio
1-8-13 播放视频video

第 二 章:CSS【新】

2-1 CSS介绍

2-1-1 CSS产生的原因
2-1-2 CSS网页的美容师
2-1-3 体会CSS样式
2-1-4 CSS样式规则

2-2 font字体

2-2-1 字体样式字号和字体
2-2-2 字体字号常用技巧
2-2-3 unicode字体
2-2-4 CSS注释
2-2-5 字体加粗
2-2-6 字体倾斜
2-2-7 字体综合设定

2-3 CSS基本选择器

2-3-1 调试工具chrome使用
2-3-2 标签选择器
2-3-3 体会类选择器
2-3-4 CSS命名规范
2-3-5 谷歌课堂案例
2-3-6 多类名选择器
2-3-7 ID选择器
2-3-8 id选择器和类选择器的区别
2-3-9 通配符选择器
2-3-10 链接伪类选择器的使用
2-3-11 链接伪类的简写方式
2-3-12 结构伪类选择器(一)
2-3-13 结构伪类选择器(二)
2-3-14 结构伪类选择器(三)
2-3-15 目标伪类选择器

2-4 CSS外观样式及应用

2-4-1 CSS颜色
2-4-2 行高对齐和首行缩进
2-4-3 字间距和单词间距
2-4-4 颜色半透明
2-4-5 文字阴影初识
2-4-6 sublime快捷方式
2-4-7 综合案例(一)
2-4-8 综合案例(二)
2-4-9 综合案例(三)

2-5 CSS样式表

2-5-1 内部样式表
2-5-2 行内样式表
2-5-3 外部样式表
2-5-4 三种样式表总结

2-6 标签显示模式

2-6-1 块级标签显示模式
2-6-2 行内标签显示模式
2-6-3 行内块元素
2-6-4 显示模式转换

2-7 CSS复合选择器

2-7-1 交集选择器
2-7-2 并集选择器
2-7-3 后代选择器
2-7-4 子元素选择器
2-7-5 课堂练习-测试选择器
2-7-6 属性选择器(一)
2-7-7 属性选择器(二)
2-7-8 伪元素选择器(一)
2-7-9 伪元素选择器(二)
2-7-10 CSS书写规范

2-8 CSS背景及应用

2-8-1 背景颜色图片及其平铺
2-8-2 背景位置(一)
2-8-3 背景位置(二)
2-8-4 魔兽背景图片
2-8-5 背景附着(固定)
2-8-6 背景简写
2-8-7 背景半透明
2-8-8 背景缩放(一)
2-8-9 背景缩放(二)
2-8-10 多背景图片
2-8-11 凹凸文字效果
2-8-12 王者荣耀导航栏(一)
2-8-13 王者荣耀导航栏(二)

2-9 CSS三大特性

2-9-1 CSS层叠性
2-9-2 CSS继承性
2-9-3 CSS优先级
2-9-4 权重叠加
2-9-5 继承的权重为0
2-9-6 css权重6道精华题
2-9-7 优先级总结

2-10 CSS盒模型及应用

2-10-1 看透网页布局本质
2-10-2 认识盒子模型组成
2-10-3 盒子边框
2-10-4 边框综合写法(一)
2-10-5 边框综合写法(二)
2-10-6 合并细线表格
2-10-7 圆角矩形
2-10-8 盒子内边距
2-10-9 fireworks测量工具
2-10-10 新浪导航(一)
2-10-11 新浪导航栏(二)
2-10-12 外边距以及盒子居中对齐
2-10-13 文字盒子居中图片和背景区别
2-10-14 清除内外边距
2-10-15 行内元素上下内外边距的问题
2-10-16 外边距合并(一)
2-10-17 外边距合并(二)
2-10-18 盒子的计算尺寸
2-10-19 学会计算盒子尺寸(重点)
2-10-20 padding不影响盒子大小的情况
2-10-21 搜索趣图(一)分析
2-10-22 搜索趣图(二)大盒子
2-10-23 搜索趣图(三)标题
2-10-24 搜索趣图(四)
2-10-25 搜索趣图(五)
2-10-26 盒子模型布局稳定性
2-10-27 CSS3 盒模型
2-10-28 盒子阴影
2-10-29 水晶图片案例

2-11 浮动及应用

2-11-1 文档流介绍
2-11-2 浮动是用来做文字环绕效果的
2-11-3 体会浮动
2-11-4 浮动就是漂浮的意思
2-11-5 浮动首先需要添加标准流父级
2-11-6 浮动特性对齐父盒子
2-11-7 浮动特性盒子排列
2-11-8 浮动影响盒子显示模式
2-11-9 浮动总结
2-11-10 版心和布局流程
2-11-11 一列固定宽度且居中
2-11-12 两列左窄右宽型
2-11-13 通栏平均分布型

2-12 清除浮动

2-12-1 清除浮动的本质
2-12-2 额外标签法
2-12-3 父级添加overflow方法
2-12-4 after伪元素清除浮动
2-12-5 双伪元素清除浮动

2-13 photoshop基本操作

2-13-1 学习photoshop目的
2-13-2 ps界面简介
2-13-3 ps基本操作
2-13-4 移动工具和缩放变形
2-13-5 水果自行车案例
2-13-6 图层的基本操作
2-13-7 图层编组操作
2-13-8 图层的移动位置
2-13-9 图层合并和透明
2-13-10 矩形椭圆选区工具
2-13-11 颜色填充-米奇效果
2-13-12 多边形套索工具
2-13-13 磁性套索工具
2-13-14 魔棒工具
2-13-15 选区布尔运算
2-13-16 梦幻星球案例
2-13-17 钢笔工具
2-13-18 文字工具和吸管工具
2-13-19 切图方法1-手动划片
2-13-20 切图方法2-利用图层切图
2-13-21 清除全部切片和辅助线的方法
2-13-22 切图方法3-辅助线切图
2-13-23 切图方法4-等份数划分法
2-13-24 cutterman插件安装
2-13-25 cutterman插件使用

2-14 学成网案例上

2-14-1 学成网准备工作
2-14-2 学成网案例分析
2-14-3 学成网头部开始
2-14-4 调整头部的宽度
2-14-5 logo和navbar部分开始
2-14-6 logo和navbar结束
2-14-7 search开始
2-14-8 search结束
2-14-9 个人中心制作
2-14-10 banner制作开始
2-14-11 给banner添加背景图片
2-14-12 侧边栏结构搭建
2-14-13 侧边栏制作结束
2-14-14 小课表上
2-14-15 小课表中
2-14-16 小课表下
2-14-17 精品推荐上
2-14-18 精品推荐下

2-15 CSS四种定位及应用

2-15-1 为什么学习定位
2-15-2 定位属性
2-15-3 静态定位(1)
2-15-4 相对定位
2-15-5 绝对定位脱标
2-15-6 父级没有定位
2-15-7 父级有定位
2-15-8 何为子绝父相
2-15-9 定位练习-哈根达斯
2-15-10 绝对定位水平垂直居中
2-15-11 淘宝焦点图分析
2-15-12 淘宝轮播图上
2-15-13 淘宝轮播图中
2-15-14 淘宝轮播图下
2-15-15 淘宝轮播图权重问题
2-15-16 固定定位
2-15-17 仿新浪固定头部和广告
2-15-18 叠加次序
2-15-19 定位总结
2-15-20 固定绝对定位模式转换

2-16 学成网案例下

2-16-1 display和visibility使用
2-16-2 鼠标经过显示二维码
2-16-3 overflow属性
2-16-4 学成在线页面修复工作
2-16-5 小圆点制作上
2-16-6 小圆点制作下
2-16-7 精品推荐大模块头部开始
2-16-8 精品推荐大模块头部结束
2-16-9 精品推荐大模块主体开始
2-16-10 精品推荐大模块li结束
2-16-11 精品推荐大模块结束
2-16-12 底部制作清除浮动
2-16-13 底部左侧开始
2-16-14 底部左侧完成
2-16-15 底部右侧完成

猜你还感兴趣

暂无推荐课程,自己逛逛吧