黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端

一、HTML5基础

1、网页的相关概念

1.1什么是网页?

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第1张图片1.2什么是HTML?

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第2张图片

2、常用浏览器

2.1常用的浏览器

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第3张图片

2.2浏览器内核

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第4张图片

3、Web标准

 3.1为啥需要Web标准?

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第5张图片

3.2Web标准的构成 :

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第6张图片

4、HTML语法规范

4.1基本语法概述:

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第7张图片

4.2标签关系:

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第8张图片

5、HTML基本结构标签 

5.1HTML网页:

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第9张图片

 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第10张图片

6、开发工具

6.1VSCode常用快捷键:

第二篇:前端VSCode常用插件-快捷键-以及常用技巧-pink老师 - 哔哩哔哩

快速复制一行:shift+alt+下/上箭头

选定多个相同的单词:ctrl+d

添加多个光标:ctrl+alt+下/上箭头

全局替换某写单词:ctrl+h

快速定位到某一行:ctrl+g

选择某个区块:shift+alt  然后拖动鼠标

放大缩小整个编辑器页面:ctrl +/-

单行注释:ctrl+/

多行注释:ctrl+shift+/

6.2VSCode工具生成骨架标签新增代码:

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第11张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第12张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第13张图片 7、HTML常用标签

7.1标题标签

 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第14张图片

 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第15张图片

 7.2段落标签和换行标签

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第16张图片

 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第17张图片 课堂案例:

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第18张图片

7.3文本格式化标签

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第19张图片

 7.4

标签

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第20张图片

 7.5图像标签和路径

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第21张图片

 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第22张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第23张图片

 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第24张图片

 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第25张图片

  黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第26张图片

 7.6超链接标签

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第27张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第28张图片

 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第29张图片

7.7音频标签

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第30张图片

7.8视频标签

 8、HTML中的注释和特殊字符

8.1注释

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第31张图片

8.2特殊字符

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第32张图片

 9.表格标签

9.1表格的主要作用

9.2表格的基本语法

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第33张图片

  9.3表格单元格标签

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第34张图片

 9.4表格属性

 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第35张图片

 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第36张图片

 9.5表格结构标签

 9.6合并单元格

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第37张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第38张图片

 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第39张图片

10.列表标签

 10.1无序列表

 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第40张图片

10.2有序列表

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第41张图片

10.3自定义列表

 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第42张图片

11.表单标签

11.1表单作用

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第43张图片

11.2表单的组成

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第44张图片

 11.3表单域

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第45张图片

 11.4表单控件(表单元素)

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第46张图片

 11.4.1输入表单元素黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第47张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第48张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第49张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第50张图片

11.4.2 label标签

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第51张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第52张图片

11.4.3 select 下拉表单元素

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第53张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第54张图片

11.4.4 textarea文本域元素

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第55张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第56张图片

12.综合案例

13.查阅文档

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第57张图片

CSS3基础

1.CSS简介

1.1HTML的局限性

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第58张图片

1.2CSS-网页的美容师

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第59张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第60张图片

1.3CSS语法规范

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第61张图片

1.4CSS代码风格

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第62张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第63张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第64张图片

2.CSS基础选择器

2.1CSS选择器的作用

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第65张图片

2.2CSS基础选择器

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第66张图片

2.3标签选择器

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第67张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第68张图片

2.4类选择器

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第69张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第70张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第71张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第72张图片

使用类选择器化盒子

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第73张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第74张图片

类选择器特殊使用

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第75张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第76张图片

 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第77张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第78张图片

2.5 id选择器

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第79张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第80张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第81张图片

2.6通配符选择器

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第82张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第83张图片

3.CSS字体属性

3.1字体系列

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第84张图片

3.2字体大小

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第85张图片

3.3字体粗细

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第86张图片

3.4文字样式

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第87张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第88张图片

3.5字体复合属性

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第89张图片

3.6总结

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第90张图片

4.CSS文本属性

4.1文本颜色

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第91张图片

4.2对齐文本

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第92张图片

4.3装饰文本

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第93张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第94张图片

4.4文本缩进

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第95张图片

4.5行间距

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第96张图片

4.6总结

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第97张图片

5.CSS的引入方式

5.1CSS的三种样式表

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第98张图片

5.2内部样式表

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第99张图片

5.3行内样式表

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第100张图片

5.4外部样式表

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第101张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第102张图片

5.5总结

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第103张图片

6.综合案例

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第104张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第105张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第106张图片

7.Chrome调试工具

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第107张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第108张图片

8. Emmet语法

8.1快速生成HTML结构语法

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第109张图片

8.2快速生成CSS样式语法

简写+tab键

9.CSS的复合选择器

9.1

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第110张图片

9.2后代选择器

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第111张图片

9.3子选择器

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第112张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第113张图片

9.4并集选择器

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第114张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第115张图片

9.5伪类选择器

9.5.1链接伪类选择器

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第116张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第117张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第118张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第119张图片

9.5.2Focus伪类选择器

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第120张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第121张图片

9.6总结

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第122张图片

10.CSS的元素显示模式

10.1什么是元素显示模式

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第123张图片

10.2元素显示模式的分类

10.2.1块元素

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第124张图片

10.2.2行内元素

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第125张图片

10.2.3行内块元素

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第126张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第127张图片

10.3元素显示模式的转换

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第128张图片

10.4例子:小米侧边栏

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第129张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第130张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第131张图片

11.CSS的背景

11.1背景颜色

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第132张图片

11.2背景图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第133张图片

11.3背景平铺

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第134张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第135张图片

11.4背景图片位置

11.4.1

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第136张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第137张图片

11.4.2案例

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第138张图片

11.4.3背景图片位置

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第139张图片

11.4.4背景图像固定(背景附着)

  黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第140张图片

11.4.5背景属性复合写法

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第141张图片

11.4.6背景颜色半透明

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第142张图片

11.4.7总结

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第143张图片

11.4.8综合案例-五彩导航

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第144张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第145张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第146张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第147张图片

12.CSS的三大特性

12.1层叠性

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第148张图片

12.2继承性

12.2.1

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第149张图片

12.2.2行高的继承

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第150张图片

12.3优先级

12.3.1

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第151张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第152张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第153张图片

12.3.2该注意的问题

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第154张图片

12.4CSS权重的叠加

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第155张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第156张图片

12.4.1两个练习题

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第157张图片

13.盒子模型

13.1盒子模型

13.1.1看透网页布局的本质

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第158张图片

13.1.2盒子模型组成

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第159张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第160张图片

13.1.3边框

1、总体

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第161张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第162张图片

2、边框复写

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第163张图片

3、表格的细线边框

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第164张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第165张图片

4、边框会影响盒子的大小

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第166张图片

13.1.4内边距(padding)

1、总体

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第167张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第168张图片

2、padding复合属性

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第169张图片

3、padding会影响盒子的大小

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第170张图片

4、padding应用-新浪导航栏

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第171张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第172张图片

5、padding不会撑开盒子的情况

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第173张图片

13.1.5外边距(margin)

1、总体

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第174张图片

2、margin典型应用-块级盒子水平居中对齐

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第175张图片

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

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第176张图片

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

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第177张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第178张图片

13.1.6清除内外边距

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第179张图片

13.2 PS基本操作

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第180张图片

13.3综合案例

13.3.1产品模块布局分析

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第181张图片

13.3.2box布局

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第182张图片

13.3.3图片和段落制作

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第183张图片

13.3.4评价和详情制作
13.3.5竖线细节制作

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第184张图片

13.3.6快报模块布局分析

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第185张图片

13.3.7快报模块头部制作

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第186张图片

13.3.8快报模块列表制作

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第187张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第188张图片

13.4圆角边框

13.4.1圆角边框原理

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第189张图片

13.4.2圆角边框的使用

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第190张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第191张图片

13.5盒子阴影

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第192张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第193张图片

13.6文字阴影(了解即可)

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第194张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第195张图片

14.浮动

14.1传统网页布局的三种方式

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第196张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第197张图片

14.2为啥需要浮动

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第198张图片

14.3 什么是浮动?

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第199张图片

14.4浮动特性

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第200张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第201张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第202张图片

黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端_第203张图片

14.5浮动元素经常和标准父级搭配使用

15.常见网页布局

16.清除浮动

17. PS切图

18.学成在线案例

H5C3 

实践项目-品优购电商网站

你可能感兴趣的:(前端,html5,css3)