第一阶段《WEB前端工程师必备技能》总课时:45个课时
独一无二的特色:全程以知识点结合案例讲解,让你吃透每个知识点

第一章:HTML常用标签

语言是什么 、Web前端开发语言、 HTML超文本标记语言 、 网页主体结构 、常用标签、超链接(a标签)、Img图片标签

案例一:小文章认识标签

第二章:常用css和css规范(1个课时)

css选择器 、class类名选择器、标签选择器、样式表、内部样式

行内样式、css命名规范、组合选择器、后代选择器、子代选择器、 毗邻元素选择器、兄弟元素选择器

案例一:选择器的使用

第三章:两种不同的盒模型(2个课时)

标准盒子模型(默认)、怪异盒模型、盒子模型Border边框讲解、盒子模型外边距

盒子模型内边距、盒子模型占位计算、外边距合并解决办法

案例一:border绘制三角形和彩色四边形 案例二:图文展示效果 案例三:怪异盒子模型演示

第四章:元素的显示类型与转换

样式初始化、元素类型转换、 内联元素对于以下属性特殊化、块级元素和内联元素的具体应用

案例一:左侧导航栏 案例二:精选市场选项卡 案例三:美食选项卡

第五章:img,a,路径

图片四要素: src 图片路径、 alt 图片不显示替换文本、width 图片原始宽 、height 图片原始高

a标签内部属性: href 创建另一个文档链接、target 属性定义网页打开方式、锚点 、创建邮件、下载

路径: 相对路径、绝对路径

hover伪类

案例一:hover改变导航栏样式

第六章:文本与字体的各种样式

font字体样式、text文本样式、特殊符号、垂直对齐方式、移出隐藏

案例一:居中导航栏 案例二:手机介绍选项卡 案例三:小广告

第七章:背景background及圆角属性

背景:颜色、图片、重复、定位、尺寸、背景固定

border-rardis:单角样式、多角样式

案例一:背景图片组合 案例二:简单按钮 案例三:小子弹

第八章:CSS渐变

鼠标样式(cursor)、透明(opacity) 、渐变(gradient)、线性渐变linear-gradient、径向渐变radial-gradient

案例一:太极图 案例二:写轮眼

第九章:浮动(float)

浮动概况、浮动的一般情况 、 浮动的特殊情况 、 浮动对文字的影响

float浮动后的特征 和 inlink-block 特征对比、清除浮动、清除浮动的多种办法、min-width的运用

案例一:出师表 案例二:左右内容排版 案例三:护肤产品列表

第十章:定位(position)

position定位概况、static 、相对定位 relative、绝对定位 absolute、固定定位、z-index 层的位置关系

案例一:轮播布局 案例二:果果精品

第十一章:表单(form)

form详解、 form中的控件input、input边框线、outline 外轮廓线

案例一:百度登录框 案例二:百度注册表单

第十二章:表格(2个课时)

table表格结构 、table样式重置、table的默认特征、table单元格合并、display:table的特征

案例一:电影选坐 案例二:数据列表

第十三章:百花齐放的选择器

CSS3伪类、多元素组合选择器、结构性伪类选择器、属性选择器

案例一:导航栏不同样式的改变 案例二:图片样式改变

第十四章:伪元素和样式优先级

伪元素:before、after

选择器优先级、外部样式、样式优先级

案例一:丝带导航栏 案例二:小图标使用

第十五章:过渡(transtion)和动画(animation)

过渡:transition

动画: animation

关键帧: @keyframe

案例一:小球运动 案例二:背景图片改变

第十六章:变换和阴影和遮罩

2D变换transform

3D变换transform

阴影box-shadow、遮罩(mask)

案例一:选择二级导航栏 案例二:相册效果 案例二:滚动按钮

第十七章:阿里图标+css高级应用

内联框架(iframe)、ico网站logo、阿里图标

案例一:阿里图标使用

第十八章:ps工具常用技巧(2个课时)

安装PS、菜单栏介绍、工具栏工具名称及快捷键 、蒙版,链接图层,图层分组、图层右键菜单、混合模式、菜单栏详细讲解

第十九章:项目实战(6个课时)

每期的项目实战都会不一样,每期都是以企业标准来讲解开发项目实战

项目实战一:咖啡网站 项目实战二:风味小厨

第二十章:终结篇:网站上线(空间,域名)

如何购买空间和域名,网站上传工具ftp使用,最终实现网站上线