学习路线

HTML简介

网页的相关概念

常用浏览器以及内核

web标准

HTML标签导读

HTML语法规范

HTML基本结构标签

VSCode工具创建页面

DOCTYPE和lang以及字符集的作用

标签语义

标题标签

段落标签和换行标签

体育新闻案例

文本格式化标签

div和span标签

图像标签（上）

图像标签（下）

图像标签注意点

目录文件夹和根目录

相对路径（上）

相对路径（下）

绝对路径

链接标签（上）

链接标签（下）

锚点链接

注释标签和特殊字符

综合案例（上）

综合案例（下）

HTML标签（下）导读

表格标签基本使用

表头单元格标签

表格相关属性（了解）

小说排行榜案例

表格结构标签

合并单元格

表格总结

无序列表

有序列表

自定义列表

列表总结

表单使用场景以及分类

表单域

input之type属性文本框和密码框

input之type属性单选按钮和复选框

input之name和value属性

input之checked和maxlength属性

input表单元素四个属性使用场景课堂问答

input之type属性提交和重置按钮

input之type属性普通按钮和文件域

label标签

select下拉表单

textarea文本域标签

表单元素几点总结

注册页面（一）

注册页面（二）

注册页面（三）

注册页面（四）

学会查阅文档

CSS层叠样式表导读

CSS简介

体验CSS语法规范

CSS代码风格

css选择器的作用

标签选择器

类选择器

使用类选择器画盒子

类选择器特殊使用-多类名

id选择器

通配符选择器

font-family设置字体系列

font-size字号大小

font-weight字体粗细

font-style字体样式

font复合属性写法

字体属性总结

文本颜色color

文本对齐text-align

文本装饰text-decoration

文本缩进text-indent

行间距line-height

css文本属性总结

内部样式表

行内样式表

外部样式表

css引入方式总结

新闻页面

修改样式（一）

修改样式（二）

修改样式（三）

chrome调试工具使用

css第二天导读

emmet语法生成html标签

emmet语法快速生成css样式

快速格式化代码

复合选择器简介

后代选择器

子元素选择器

课堂练习

并集选择器

链接伪类选择器（上）

链接伪类选择器（下）

focus伪类选择器

复合选择器总结

什么是元素显示模式

块元素

行内元素

行内块元素

元素显示模式总结

显示模式的转换

一个小工具snipaste的使用

简洁版小米侧边栏案例

单行文字垂直居中的原理

背景颜色

背景图片

背景平铺

背景位置-方位名词

背景位置案例一

背景位置案例二-王者荣耀背景图片

背景位置-精确单位

背景位置-混合单位

背景固定

背景属性复合写法

背景颜色半透明

背景总结

综合案例五-彩导航（上）

综合案例五-彩导航（二）

层叠性

继承性

行高的继承

优先级

优先级注意的问题

CSS权重的叠加

权重两个练习题

盒子模型导读

看透网页布局本质

盒子模型组成部分

盒子模型边框border

边框的复合写法

表格细线边框

边框会影响盒子实际大小

盒子模型内边距padding

padding复合属性

padding会影响盒子实际大小

padding应用-新浪导航栏（上）

padding应用-新浪导航（下）

小米侧边栏修改

padding不会撑开盒子的情况

盒子模型外边距margin

外边距典型应用--块级盒子水平居中对齐

行内元素和行内块元素水平居中

外边距合并-相邻块元素垂直外边距

外边距合并-嵌套块元素塌陷

清除内外边距

ps的基本操作

综合案例-产品模块布局分析

综合案例-box布局

综合案例-图片和段落制作

综合案例-评价和详情制作

综合案例-竖线细节制作

老师解惑

快报模块布局分析

快报模块头部制作

快报模块列表制作

圆角边框原理

圆角边框的使用

盒子阴影

文字阴影

浮动导读

传统网页布局三种方式

为什么需要浮动

什么是浮动

浮动特性-脱标

浮动特性-浮动元素一行显示

浮动特性-浮动元素具有行内块特性

浮动元素经常搭配标准流的父元素

浮动布局练习-1

浮动布局练习-2

浮动练习-手机模块（上）

浮动练习-手机模块（下）

常见的网页布局

浮动的两个注意点

为什么清除浮动

清除浮动本质以及额外标签法

清除浮动之父元素overflow

清除浮动之after伪元素

清除浮动之双伪元素

清除浮动

常见的图片格式

图层切图（上）

图层切图（下）

切片工具

cutterman安装

cutterman使用技巧

准备工作

css属性书写顺序（重要）

页面布局整体思路

header区域制作

logo区域制作

导航栏nav区域制作（上）

导航栏nav区域制作（中）

导航栏nav区域制作（下）

搜索search模块input制作

搜索search模块button制作

用户user模块制作

banner模块制作

subnav模块制作（上）

subnav模块制作（下）

course模块制作（上）

course模块制作（中）

course模块制作（下）

精品推荐模块（上）

精品推荐模块（中）

精品推荐模块（下）

box-hd模块制作

box-bd模块制作

box模块完成

footer模块制作

copyright模块制作

links模块制作

定位导读

为什么需要定位

定位组成

相对定位

绝对定位-没有父级或者父级无定位情况

绝对定位-父级有定位情况

绝对定位脱标的不占有原来位置

子绝父相的由来

子绝父相案例-hot模块

固定定位

固定定位小技巧-固定到版心右侧

粘性定位（了解）

定位总结

定位的叠放顺序

绝对定位的盒子居中算法

定位的特殊特性

浮动元素不会压住标准流的文字定位会

布局分析

大盒子制作

左侧箭头按钮制作

右侧箭头按钮制作

ul盒子模块制作

li小圆点模块制作

网页布局总结

display显示隐藏元素

visibility显示隐藏元素

overflow溢出显示隐藏

土豆案例（上）

土豆案例（下）

导读

为什么需要精灵技术

精灵图使用（原理）

精灵图使用（代码）

精灵图案例-拼出自己名字

字体图标产生和优点

字体图标下载

字体图标的使用

字体图标的追加和加载原理

CSS三角的做法

CSS三角应用-京东效果

用户界面-鼠标样式

用户界面-取消表单轮廓和防止拖拽文本域

vertical-align实现行内块和文字垂直居中对齐

图片底侧空白缝隙解决方案

单行文字溢出省略号显示

多行文字溢出省略号显示

布局技巧-margin负值巧妙运用（上）

布局技巧-margin负值巧妙运用（下）

布局技巧-文字围绕浮动元素巧妙运用

布局技巧-行内块的巧妙运用

布局技巧-CSS三角巧妙运用（上）

布局技巧-CSS三角巧妙运用（下）

CSS初始化

HTML5CSS3提高导读

新增语义化标签

新增视频标签

新增音频标签

新增input表单

新增表单属性

属性选择器（上）

属性选择器（下）

结构伪类选择器-选择第n个元素

nth-child选择器（上）

nth-child选择器（下）

nth-child和nth-of-type的区别

伪元素选择器使用场景和由来

伪元素选择器基本使用

伪元素选择器使用场景-配合字体图标

伪元素使用场景-仿土豆效果

伪元素选择器-伪元素清除浮动本质

CSS3盒子模型border-box

CSS3图片模糊处理

计算盒子宽度calc函数

CSS3新增属性过渡（上）

CSS3新增属性过渡（下）

CSS3过渡练习

广义的H5（了解）

导读

网站制作流程

品优购项目规划

品优购项目搭建

品优购项目-样式的模块化开发

品优购项目-favicon图标制作

品优购项目-TDK三大标签SEO优化

品优购首页-快捷导航shortcut结构搭建

品优购首页-快捷导航左侧制作

品优购首页-快捷导航右侧搭建

品优购首页-快捷导航右侧字体图标

品优购首页-header头部模块搭建

品优购首页-logoSEO优化（上）

品优购首页-logoSEO优化（下）

品优购首页-search搜索模块（上）

品优购首页-search搜索模块（下）

品优购首页-hotwords热词模块

品优购首页-shopcar模块制作

品优购首页-count购物车统计模块

品优购首页-nav导航模块搭建

品优购首页-dropdown模块制作

品优购首页-导航详细分类制作（上）

品优购首页-导航详细分类制作（下）

品优购首页-navitems模块制作

品优购首页-footer底部模块搭建

品优购首页-mod-servecie模块制作（上）

品优购首页-mod-servecie模块制作（下）

品优购首页-mod_help模块制作

品优购首页-mod_copyright模块制作

品优购首页-main主体盒子搭建

品优购首页-newsflash模块

品优购首页-news-hd模块制作

品优购首页-new-bd模块制作

品优购首页-lifeservice制作（上）

品优购首页-lifeservice制作（下）

品优购首页-推荐模块recom（上）

品优购首页-推荐模块recom（下）

品优购首页-家用电器模块搭建

品优购首页-家用电器模块头部制作

tab栏选项卡原理布局需求

品优购首页-tab_list-item布局（上）

品优购首页-tab_list-item布局（中）

品优购首页-tab_list-item布局（下）

品优购列表-结构搭建

品优购列表页-秒杀模块制作

品优购列表页-导航模块修改

品优购列表页-一个小问题

品优购列表页-结束

品优购注册页-header制作

品优购列表页-注册主体模块头部制作

品优购注册页-注册主体制作（上）

品优购注册页-注册主体制作（下）

品优购注册页-安全程度模块

品优购注册页-同意模块和完成注册模块

品优购项目页面相互跳转以及作业安排

什么是服务器

申请免费空间以及网站上传