DAY01

一．万维网：万维网联盟的创建者是万维网的发明者蒂姆·伯纳斯-李

万维网并不等同互联网，万维网只是互联网所能提供的服务其中之一，是靠着互联网运行的一项服务

二．w3c--万维网联盟 w3cschool

三．操作系统 window(不区分大小写) linux --作为服务器（严格区分大小写）

四．图灵奖 --程序员最高奖项

五．互联网的原理

上网就是请求数据

数据(文件结构的各种数据)

六．http协议认识

在tcp/ip协议的基础上。请求<->响应的过程

补：文件传输协议：FTP

电子邮件传输协议：SMTP

网络新闻传输协议：NNTP

七．互联网的发展现状

中国网民有多少？ 7.1

网民做什么工作？

网民用什么设备上网？

上网：WiFi 还是4G？

网络团购：手机端发展更快

网络支付：增长迅速

即时通信：规模最大

网络视频：“钱景”更越光明

八．Html初步认识

HyperText Markup Language

----纯文本文件

----语义标签html

------网页技术标准：

html --通过标签给文本增加语义

css

javaScript

请问h1有什么作用

1. 让字体变大变粗变黑错的

2. 给文本增加语义(是一个标题)

sublime使用

熟悉代码

页面骨架

DAY02

第二天

一．课程回顾

二．页面主体结构(骨架)

三．URL 统一资源定位符

http://www.w3school

http:// 协议

www.w3school 域名 (通过DNS解析对应ip地址)

四．注释

五．HTML 标签(元素) 单表签双标签

六．属性修饰标签属性名=“属性值”；

七．颜色 1.单词

2.RGB(red green blue) 计算机三原色

八．HTML实体标签

< > " & © × ....

九．结构标签

html

body

head

title

DAY03

第三天

超链接 <a>标签

超级链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

http://cdn.bootcss/html5shiv/3.7.2/html5shiv.min.js

一．路径信息

相对路径 ./ ../ ../../

绝对路径 http:// 开头

相对于站点根目录的相对路径 /开头 ---暂不涉及

URL详细地址

http://www.w3school/info/conf/index.php?p=1

或者

http://www.w3school/info/conf/index.php#page

http:// 协议

www.w3school 域名 (通过DNS解析对应ip地址)

/info/conf/ path 路径

index.php 文件名

p=1 查询

#page 锚点

二．A标签属性

title 提示信息

target _blank _self _parent _top

href url地址信息

download 下载

alt 描述信息。给搜索引擎看的

三．其他功能

---需要操作系统有outlook

email： <a href=”mailto:mayun@lampbrother”>发邮件</a>

电话： <a href=”tel:110”></a>

信息... <a href=”sms:100”></a>（需要window系统装有outlook）

四．锚点

<a name=”test”></a> 锚点声明

<a href=”#test”></a> 锚点调用

图像<img>

格式 jpg png gif ..... （新的图片格式webp）

jpg 适用于摄影图片，以及色彩丰富的图片。它采用压缩算法，通过强制渐变的方法来减小文件尺寸，因此无论选择的储存质量多高，还是会多多少少失真一些，但对于摄影之类的图片来说，jpg格式就会比png小很多了

png 完爆gif的地方在于失真小，没锯齿；劣势是不支持动画；

采用无损压缩，在多数情况下都可以保留图片里所有像素。PNG无损压缩算法，简单地说，就是把图片里出现的每一个颜色都记录下来。通过记录这些颜色相对应的值记录一张图片

gif 色彩效果最低，用gif保存鲜艳的图片的话会让你的网站看上去非常可怕。但是gif有着不可忽视的特点：体积小，有着极好的压缩效果，支持动画，

属性

src 图片地址

alt 描述信息/加载失败的提醒

height 高度

width 宽度

border 边框

ismap 点击图片，会将坐标信息发送到服务器端

usemap 配合map标签进行图像的映射

五．图像的映射

-- ismap

</a>

--usemap (为了良好的兼容请使用#)

</map>

六．使用图像映射，锚点完成商城活动。

DAY04

第四天

表格<table>

概念行单元格

标签 <table>

border 边框

width 宽度

height 高度

cellspacing 边框间距

cellpadding 字体距离边框间距

bgcolor 背景颜色

align 表格位置

background 背景图片

<tr> 行

height 高度

bgcolor 背景颜色

align=“left|center|right” 水平位置

valign=“top|center|bottom” 垂直位置

background 背景图片

<td> 单元格

width 宽

height 高

align

valign

bgcolor

rowspan 合并行

colspan 合并列

background 背景图片

<caption> 表格标题

<th> 表头tablehead 单元格

表格语义性质的三个标签

<thead>

<tbody>

<tfoot>

<col span=””> 修改指定的列(宽度背景颜色)

表单--表单在网页中主要负责数据采集功能。

----label的使用

form action method

input type=””

text

password

radio

checkbox

file（enctype="multipart/form-data"）

---按钮

submit

reset

button

image

select name=””

<optgroup label=””></optgroup> 将option 分组

textarea name=”” rows cols

常用属性

name=”” value=””

size=”23” 尺寸（23个字符宽度）通常不用而是使用css控制input长度

maxlength 最大输出长度

readonly 只读

checked 默认选中常针对单选和多选

selected 默认选中针对下拉菜单

disabled 不可用

1. readonly 可以将数据提交 disabled数据不能提交

表单分组

fieldset 将表单分组 legend 为组定义标题

<form>

input

select ..

</fieldset>

</form>

分帧 -- html框架

在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”(spider)程序无法解读这种页面。

但是有些地方不需要搜索引擎收录如添加微博直播信息，这些微博信息我们并不需要提供给搜索引擎，而我们需要提供的是与访客的一个互动的体验

优点： 1.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页 2.方便制作导航栏

缺点：产生很多页面，不容易管理。

不容易打印

移动端适应性较差

增加http请求·

所有的优点可以用ajax替代。

1.iframe

</div>

使用div指定布局位置

iframe 属性

1. src=”” url

2. frameborder=”0 | 1” 是否显示边框

3. height

4. width

5. name

6. scrolling yes | no | auto

作业

在表格中创建一个表单

DAY05

第五天

Css 样式表

--Cascading Style Sheets 层叠样式表

1.1选择器{属性名：属性值}

1.2 css的使用

a.在元素中

b.在style中

c.从外部导入link

d.style中引入@import url()

--@import url前面不能有别的样式

--使用link引入一个css文件在css中用@import 引入多个css

1.3 注释 /* */

Css的单位

长度单位：

px 宽高距离字体大小等

%

em 字体本来大小的倍数(作用于字体)

rem 根元素html的font-size

vh 1vh = 视口高度/100

vw 1vw = 视口宽度/100

vmin vm和vh中较小的

vmax vm和vh中较大的

绝对单位：pt（点） cm mm

颜色单位：单词 rgb(0-255,0-255,0-255) rgb(%，%，%) #000;

1kb = 1024b

1b=8bit

rgb 使用 8位图 2^8 = 256

16位图 2^16 = 65536 2b = 256*256 = 65536

0 1 2 3 4 5 6 7 8 9 10 11.... 十进制

0 1 10 11 100 101 110 111 1000 1001 1010 二进制

0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 十六进制

255/16 = 15 余 15 === FF

212/16 = 13 余 4 === d4

三．选择器

a) html元素选择器

b) id 选择器

c) class 类选择器

d) 关联选择器 select select select > select

e) 组合选择器 div p span.item

四．优先级

就近原则

优先级的计算

Id:100

Class:10

Html：1

Style:1000

伪类选择器

:link 链接样式针对链接

:hover 鼠标滑过的样式

: active 点击时的样式

:visited 访问过后的样式针对链接

如： .nav li:hover{

background: #ccc;

}

-- 顺序不同执行效果不同

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

提示：伪类名称对大小写不敏感。

1. :hover :visited在不是超链接的元素中使用

2. 使用伪类自定义一个按钮

DAY06

第六天

背景属性

a) Background-color: red #333 transparent（继承父级）....

b) Background-image:url() 背景图

c) Background-repeat：是否重复 repeat | no-repeat | repeat-x | repeat-y

d) Background-attachment:scroll（随着内容滚动） fixed（固定在页面）

-- 在body中使用如果在元素中需配合overflow:scroll;

-- 在元素中使用

scroll 相对于元素定位,不随内容滚动

fixed 相对于视口定位,不随内容滚动

local 相对于所有内容(元素自身)定位，随内容滚动

e) Background-position:背景位置 center top | center center 100px 200px ...

f) backgorund: <color> <url('')> <repeate> <attachment> <position>

g) 如何使用雪碧图

颜色属性

color: -- 规定文本属性继承性

red;

rgb();

#ccc;

字体属性

Font-family:(字体族)"Arial","Helvetica",sans-serif,’宋体’,’微软雅黑’;

-- 需要系统字体支持

Font-size:(字体大小)

Font-style:（风格）normal | italic | oblique

Font-weight:（加粗） normal | bold | lighter 400正常 700=bold

Font-variant:(变形) normal | small-caps 小型大写字母

font:bold small-caps 30px Arial,"Microsoft YaHei",sans-serif;

color:#f90;

-- font:20px ‘微软雅黑’;

文本属性

Letter-spacing 字间距

Word-spacing 词间距

Text-decoration none | underline | overline | line-through

Text-align left | center | right 左右对齐方式

Vertical-align top | middle | bottom | baseline.... 上下对齐方式

Text-indent 50px 文本缩进

Line-height 设置行高行高与高度一致，可以垂直居中

使用px

%(文字尺寸倍数)

number 其中number*font-size等于px的行高

使用字体行高

--font：15px/3 ‘微软雅黑’;

边框属性

border-width:边框宽度 (double线需要大于3)

border-style：边框样式 (dotted 点线 solid 实线 dashed 虚线...)

border-color:边框颜色

可单独设置各个边框border-left | border-top | border-right | border-bottom

元素的宽高=设置的宽高+边框宽度

---使用边框属性写一个三角形

鼠标光标属性

cursor: text | wait | help | pointer | help......

DAY07

第七天

一．列表属性

list-style-type: disc（实心点） | circle（圆圈） | square(小方框) | decimal（数字）...

list-style-position: inside 标示在li里面 | outside 标示在li 外面

list-style-image: url() 标示的图片展示

list-style: circle inside url();

二．表格属性

table-layout: auto(自动布局) | fixed(固定布局)

fixed固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局

在固定表格布局中，水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距，而与单元格的内容无关。

auto自动布局，列的宽度由内容决定，算法较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容

border-collapse: 边框是否被合并为一个单一的边框

separate默认分开

collapse 合并

border-spacing: 10px | 10px 20px（当border-collapse：separate时单元格和行上下左右的距离）

caption-side: top | bottom (caption 在上面还是下面)

empty-cells: show | hide (空白单元格是否显示,需要border-collapse:separate)

盒子模型

一．Div+css布局介绍(流式布局)

表现和内容分离

代码简洁

提高编码速度

易于维护和改版

提高搜索引擎对网页的搜索效率

二. 无意义的标签

<div> 块级标签自动换行(独占一行)

<span> 行内标签内容显示在一行内

三. 盒子模型

content 内容

padding 内边距

border 边框

margin 外边距可设负值

四. 块级元素的特点

1.总是开始新的一行。占据整行

2.高度，行高以及外边距和内边距都可控制

3.没有宽度时，宽度是容器的100%，除非设定一个宽度

4.可以容纳行级元素和其他块级元素 --p h不行

嵌套规则

1.块级元素可以包含行级元素或某些块级元素，行级元素不能包含块级元素

<a href=””><a href=””>百度</a></a> 错误

<a href=””><span>百度</span></a> 正确

<div><a href=””>百度一下</a></div> 正确

<div><p>p元素</p></div> 正确

2. 块级元素不能放在p里

<p><ul><li></li></ul></p> 错误

3.特殊块级元素，只能包含行级元素，不能包含块级元素

h1 h2 --h6 p dt

4.li是装载内容的容器。与div类似。

五．行内元素特点

1.和其他元素在一行

2.宽高，行高，外边距和内边距只有部分可以改变

3.宽度和内容有关

4.行内元素只能容纳文本或者其他行内元素

五．盒子之间的关系

Document树 ->父元素->子元素->后代元素

七．标准文档流

1.行内元素不占据单独的空间，依附于块级元素，行内元素没有自己的区域。

它同样是DOM树中的一个节点，在这一点上行内元素和块级元素是没有区别的。

2.块级元素总是以块的形式表现出来，并且跟同级的兄弟块依次竖直排列，

左右自动伸展，直到包含它的元素的边界，在水平方向不能并排。

八．盒子在文档流中的特点

1.行内元素有水平margin

2.块级元素之间的垂直margin（margin的塌陷）

3.嵌套盒子之间的margin,(margin合并) 子元素的magin开始以父元素的内容开始

4.将margin设置为负值

特殊情况：父级元素没有设置边框的时候。子元素margin-top出现整体向下的问题。

Margin 一个参数二个参数三个参数四个参数

margin-left:auto

margin-right:auto;

居中margin:0 auto;

九．浮动

Float:left | right | none

设置了浮动会脱离文档流浮动的元素会变为块级元素

父级元素不会被撑开

下面的元素会挤上来

浮动不挡文字不挡图片

浮动的元素没有塌陷

十．清除浮动 --消除浮动产生的影响

Clear: left | right | both

--- 1.使用div浮动做个导航条

2.完成div+css布局

DAY08

第八天

一．实例

-- float:none;二级导航栏

oppo.png

二．定位position(不能滥用)

1.position:static: 静态的。默认。没有特殊样式。

2.position:relative;相对定位。

1.相对于自己原来的位置。

2. Left | right | top | bottom 注意：left 和right 设置一个。Top和buttom 设置一个。

3.对别的元素位置没有影响，会覆盖文字和图片

3.position:absolute;绝对定位。

1. left | right | top | bottom

2.脱离文档流，覆盖文字，覆盖图片

3.以它"最近"的一个"已经定位"的"祖先元素"为基准进行偏移.如果没有已经定位的"祖先元素", 那么会以<html>为基准进行定位

--通常将父元素设置一个定位。relative 和absolute都可以。

4.position:fixed;固定定位。

Left | right | top | bottom

1.脱离文档流

2.直接根据屏幕定位跟父级定位没有关系

3.不随内容滚动

三．z-index 坐标的z轴值。

1.没有单位。

2.该属性用于定位的元素。

3.可以为负值

四．css的特殊属性

1.display 显示

inline 将块级转化为行级

block 1，显示 2,转化为块级

none 隐藏

inline-block 行块级，可以设置宽高，但是又不换行。在某些情况下可以取代float。但是换行引起空格

-- 已有的行块级元素 input img

--图片的3像素bug

2.overflow auto 不超出没有滚动条，超出出现滚动条

scroll 不管有没有超出都有滚动条

visible 默认超出，对后面没影响

hidden 隐藏 | 再次声明我是一个盒子，清除浮动。

overflow-x overflow-y 控制x y 轴。

3.visibility : hidden; 隐藏

visible 显示

collapse 隐藏表格的行（tr）或列(td)

visibility:hidden;站位隐藏。display：none;不占位隐藏。

五．通配符 *

页面：猿代码->首页。

页面准备

1. ps cc markman

2. 基础base.css样式表

3. 创建index.html文件和css js images 文件夹

4. 切图工具 PS fireworks fsc

命名规范：

class命名

头header 内容 content 尾 footer 导航 nav 侧边栏 sidebar

栏目 column 左右中 left right center 登陆login 标志 logo 广告 banner

页面主体 main 热点 hot 新闻news 子菜单submenu 搜索 search 版权 copyright 注册 regsiter 服务 service 指南 guide

id命名：唯一性。简洁例如按钮 id=”btn” id=”tab” id=”logo”

注意事项：一律使用小写使用英文

文件的命名规范：不使用汉字。不使用大写。有意义。

常见问题：

该有的a标签没有添加

代码的缩进

元素嵌套错误

使用像素px 单位。不要滥用%。

审查标准

1. 页面效果完成度(整体感觉)

2. 页面兼容性

1.IE7 IE8与正常浏览器

2.IE7给input设置高度不对齐，（使用：vertical-align:middle;解决）

3.IE8以下专属属性 *width *background-color（IE7hack 不做兼容）

4.IE9以下td高度为设置的高度+边框，IE9及其他td高度为正常的高度

（暂无解决办法）

5.IE8以下li设置高度排版错误设置行高

6.使用ul li ，必要时需要给ul高度

3. 代码规范(缩进, 命名规范,样式与内容分离)

4. 标签使用合理程度

DAY09

H5_01

回顾知识点

一．Html5介绍

HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。

HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”

2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。

一．Html5 的优点

1.提高可用性，改进用户体验。

2.添加新标签，有助于开发人员定义重要的内容。

3.更多的多媒体元素（视频影音）。

4.很好的替代flash和siverlight

5.对搜索引擎更加友好。Seo优化。

6.可移植性比较好，将被大量应用于应用程序和游戏。

三．兼容性：chrome safari opera firefox 以及以webkit为内核的国产浏览器 IE9及以上

四．新增的结构标签（块级元素 语义性）

Header 头部

nav 导航

footer页脚

main(ie 不支持)主体部分

aside 侧边栏

section 带标题的段

article文章贴子等

details （open 属性打开）配合 --summary

summary 解释说明。 chrome safari 支持 新版本火狐支持。基本不用。

dialog (open 属性)定义一个对话框脱离文档流

--只有chrome safari支持

五．新增的文本标签（行级元素 语义性）在w3c 手册中查看标签的兼容性

A: bdi 允许改变文本方向(bdo) 各大浏览器都不支持。

B： mark 高亮显示。可以改变背景颜色来改变高亮的颜色

C: meter 定义度量属性： high low(警戒值) max min (最大最小值) value (当前值) optimum（当值大于high 说明越高越好，小于low，越小越好）

ie不认识 大小可以,别的样式改不了。

D: progress 进度和meter差不多。语义性。一个是固定的度数。一个是进度完成了多少。 IE认识

E: time 定义一个时间

F: wbr 截断单词一行可以显示时不换行.

G: ruby 注音 <ruby>犇<rt>ben</rt></ruby> <ruby>骉<rt>biao</rt></ruby> <rp></rp>不再支持

六.新增的图像标签

<figure> 定义一段独立的流内容，比如文章的插图。如果删除不影响主体内容。

<figcaption> 流内容的主题

<canvas> 定义图像（使用代码画图)

<canvas width=400 height=400 style=”background:red;”>你的浏览器不支持</canvas> .png

七．新增列表标签

<dl> 定义对话解释类型的列表标签

</dl>

八．menu

</menu>

在<body contextmenu=”mymenu”> 只有firfox支持

九．HTML5中的音视频

video 视频

<video src=””>你的浏览器不支持</video>

属性：src url路径

autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。

controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。

loop loop如果出现该属性，则当媒介文件完成播放后再次开始播放。

muted 规定视频的音频输出应该被静音。

preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。注：支持流媒体

poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。

height pixels 设置视频播放器的高度。

width pixels 设置视频播放器的宽度。

source 定义多种媒体资源

属性 src(url) type (video/mp4)(video/ogg)

</video>

audio 定义音频

属性

src (url)

autoplay

controls

loop

muted

preload

可以配合source标签定义多种资源进行兼容

strack 进度控制，预览等功能。需要javascript

Html5新增表单元素

新增Input type属性

email 匹配邮箱地址

url 必须输入url地址

number 必须是数字属性： min max step value

range 取值范围 min max step value

search 效果和text一样。属性 results (-webkit-内核专有)

tel 用于电话号。在pc上等于text。在移动设备上会调用数字键盘

color 调出取色板 IE不支持（IE edge版本支持）

时间相关（火狐 IE不支持）

date 日月年

month 月年

week 周年

time 小时分钟

datetime utc时间（日月年）--暂不支持

datetime-local 本地时间，(日月年)

新增Input 控件

pattern 正则验证内容为空的时候不验证和required配合

multiple 可以选择多个文件。type=”file” 时

placeholder 提示文字，和value不同

autocomplete 自动完成可以设置值为 on/off

autofocus 自动获取焦点只能给一个input获取焦点

required 不为空

新增form属性

autocomplete 自动完成 off/on

novalidate 表单不验证写或者不写。

DAY10

H5_02天

新增的button 属性

Form 指定要提交的form表单id IE不支持

Formnovalidate 表单

不验证 <buttom formnovalidate>提交</buttom>

Formtarget 提交转到页面打开位置 _blank | _self（原窗口打开默认）

Fromaction 指定提交的位置<button formaction="2.php">提交</button>

Formmethod 指定提交的方法 get | post

Formenctype 有文件上传时使用 multipart|form-data

新增的form标签

Output 定义不同类型的输出

属性： for 值：输出与相关的元素 Form 字段所属的表单 Name 通用属性

<form action=”” οninput=”res.value=n1.value+n2.value”> -- 了解即可

</form>

Datalist input配合datalist属性定义input可能的值用法如下

<option >aaaaa</option>

<option >abadsdfa</option>

</datalist>

Keygen 验证用户单标签当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate） <keygen name=”keys”>

IE 不支持

新增的全局属性

contenteditable 规定元素内容是否可编辑。 <p contenteditable="true|false">

contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。只有Firefox可用

data-* 用于存储页面或应用程序的私有定制数据。(自定义数据暂时用不到)dataset

draggable 规定元素是否可拖动。 <p draggable="true|false|auto">

Dropzone 规定在被拖动时是否进行复制、移动或链接。需要配合js

hidden 规定元素隐藏(不占位)

spellcheck 拼写和语法检查。<element spellcheck="true|false">配合contenteditable

translate 是否翻译 <element translate="yes|no"> 所有主流浏览器都不支持该功能

Html5 的兼容解决方式

1.IE使用最新版解析

2.多核浏览器指定使用webkit

双核：搜狗浏览器、傲游3、猎豹浏览器、QQ浏览器等。

3.让IE9以下的IE浏览器支持html5标签

<!--[if lt IE9]>

我是IE

<![endif]-->

4.使用ckplayer插件解决视频兼容

[必须在服务器下打开]

找到ckplayer官网。找到在线配置功能。复制代码

实例：

var flashvars={

f:'http://movie.ks.js/flv/other/1_0.flv',

c:0,

i:'./video/page.jpg'

};

var params={bgcolor:'#FFF',allowFullScreen:true,allowScriptAccess:'always',wmode:'transparent'};

var video=['./video/1_0.mp4->video/mp4'];

CKobject.embed('/ckplayer/ckplayer.swf','a1','ckplayer_a1','100%','100%',false,flashvars,video,params);

</script>

播放器地址 a1 === div的id

Css3 介绍

CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的功能

--不兼容IE8

优点

强大的CSS3选择器

新增的背景功能

盒子模型的变化

阴影效果

多列布局与弹性盒模型布局

Web字体与WebFont图标

颜色与透明度

圆角与边框

CSS变形

CSS过渡与动画交互

媒体特性与Response布局

兼容性解决思想

渐进增强优雅降级

1.针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

2.一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

二.浏览器和它的内核

IE Trident

chrome webkit

safari webkit

friefox Gecko

opera 以前presto 现在webkit

国产浏览器 Trident 和 webkit

手机浏览器 webkit

Css3属性的私有前缀

IE -ms-

Chrome -webkit-

Opear -o-

Firefox -moz-

Css3 的盒子模型

box-sizing: 盒子的解析方式

content-box （默认）

border-box 按照设置的宽高解析，压缩内容

resize: 是否允许缩放配合overflow：hidden;

none(默认)

both

horizontal(水平)

vertical（垂直）

outline : 轮廓线

1px solid red 不占空间

outline-offset:5px;向外延伸

display: 规定元素应该生成的框的类型

DAY11

回顾知识点

Css背景属性

css2 中的背景

background-color,颜色

background-image,图片

background-repeat,是否重复

background-attachment，是否固定

background-position，位置

css3 新增的属性

1.background-origin:padding-box（默认） | border-box | content

--指定背景起始位置

--不影响结束位置

--剪切相配合

Background-origin:padding-box 背景图像从padding开始

Background-origin:border-box 背景图像从边框开始

Background-origin:content-box 背景图像从内容区域开始

2.background-clip:padding-box | border-box(默认) | content-box

Background-clip:padding-box 从padding区域向外剪切背景

Background-clip:border-box 从border区域开始向外剪切背景

Background-clip：content-box 从content区域开始向外剪切背景

3.background-size:auto | cover | px 或 % | contain 指定背景图的尺寸

Background-size:auto; 使用原图的大小尺寸

Background-size:px | %; 使用固定值指定背景图大小

--图片需要等比例设置宽高

Background-size:cover; 自动缩放铺满盒子模型

Background-size:contain; 等比例缩小原图，盒子包含原图，但是会有空白

4.多背景属性

url('../../images/bg-tl.png')no-repeat,

url('../../images/bg-tr.png') no-repeat right top,

url('../../images/bg-bl.png') no-repeat left bottom, url('../../images/bg-br.png') no-repeat right bottom,

文本属性

word-spacing

letter-spacing

text-indent

vertical-align

text-decoration

text-transform 字体转

text-transform:none 默认不转换

text-transform:capitalize 每个单词首字母转换为大写

text-transform:uppercase 全部转为大写

text-transform:lowercase 全部转为小写

text-transform:full-width 全宽属性(兼容较差) firefox支持排版拉丁字符等。

tab-size int | px tab键缩进的尺寸。 -- 配合pre

tab-size : 10 缩进一次十个空格

Tab-size:10px 兼容较差

text-align :justify 两端对齐

text-align:start | end 开始结束（文字编辑的左右顺序）

text-align-last left | right | center 最后一行的偏移方向(IE不支持)

text-justify : 文本对齐方式所有都不支持

text-size-adjust :auto | none | % 文本大小根据设备尺寸调整所有都不支持

text-shadow :3px 3px 4px #ccc 字体阴影

text-overflow: clip | ellipsis 文字溢出

-- 配合overflow:hidden

text-overflow:clip 将溢出部分剪切

text-overflow:ellipsis 将溢出部分替换为...

word-wrap : normal | break-word 换行

word-wrap : normal 当（单个）单词过长，内容将超出边界

word-wrap : break-word 单词过长，截断单词换行

word-break : normal | keep-all | break-all

word-break:normal 默认空格换行，汉字超出换行

word-break:keep-all 使亚洲语言跟英语一样，没有空格不换行

word-break:break-all 截断单词和汉语强行换行

white-space:normal | pre | nowrap | pre-wrap | pre-line

--参考w3c

white-space :normal 正常显示正常换行

white-space : pre 类似<pre>/</pre>

white-space : nowrap 文字在一行显示可配合text-overflow:ellipsis

white-space: pre-wrap 比pre多了一个换行

white-space: pre-line pre换行并取消每行前面空白

text-stroke 设置文字描边仅-webkit-

text-fill-color: 设置描边的颜色

同时使用text-fill-color和color属性，text-fill-color将覆盖color属性的颜色值；

text-stroke-width: 设置描边的宽度

p{text-stroke:2px green;color:transparent}

过渡变形

-webkit-transform:translate(50%，50%)。设置元素位移

-webkit-transform:translatex().设置x轴的位移

-webkit-transform:translatey().设置y轴的位移

position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);

-webkit-transform:scale(0.5); 设置元素缩放

-webkit-transform:scale(0.5,0.2); 设置元素缩放

-webkit-transform:scalex(0.2); 设置x轴的缩放

-webkit-transform:scaley(0.4); 设置y轴的缩放

-webkit-transform:rotate(20deg); 设置旋转角度

配合transform-origin:0 0;

-webkit-transform:skew(0deg,0deg); 设置扭曲

-webkit-transform:skewx(50deg); 设置x轴扭曲

-webkit-transform:skewy(50deg); 设置y轴扭曲

transform:translatex(10px),

transform:translatey(20px),

transform:translatez(20px),

transform：translate3d(10px,20px,30px) 分别对应x,y,z轴位移

transform:rotatex(),

transform:rotatey(),

transform:rotatez(),

transform:rotatex(20deg) rotatey(20deg) rotatez(20deg);

-webkit-transform:rotate3d(1,1,1,60deg); 三个方向一个角度

0或1的数值主要用来描述元素是否围绕x,y,z轴旋转的矢量值

--------

transform:scale3d(1,2,3); 3d缩放。参数分别对应xyz轴

transform:scalez(); z 轴的缩放值 -- 没效果

变形的组合写法

transform:translate(50px,0px) rotate(20deg) scalex(1.5);

transform-origin: left top; 指定圆点(使用旋转)

perspective 指定观察者与z=0的平面距离。 None|..px 产生3d的效果

perspective :1000px;//此属性给舞台元素.

transform-style: //此属性设置在父级元素上

flat (子元素不保留3d位置不常用)

preserve-3d (子元素保留3d位置)

perspective-origin:center center;指定3d透视圆点

backface-visibility:

visible (默认)显示

hidden；指定3d背面元素不显示

二．过渡

Css3过渡transition （缓慢变化的过程）

过渡的触发 1.伪元素触发 2.媒体查询 3.JavaScript触发

transition-property: none | all | css属性（指定要过渡的css属性）

颜色，长度，属性值是数值的如z-index opacity 阴影渐变，变形

transition-duration:1s; （指定过渡需要的时间）

transition-delay:2s; （设置延迟过渡时间）可以通过加大过渡时间来做到只过渡一次，不收回。

.box{transition:all 1s 99999s} .box:hover{transition:all 1s;}

cubic-bezier 自定义贝塞尔曲线http://cubic-bezier/

Steps(7)以7步变化

注：将所有属性写在一起；transition:all 5s 1s cubic-bezier(0,1.15,.28,.83);

Css3 的颜色

1.透明度

IE的兼容透明度 filter:alpha(opacity=透明值)0-100

2. 滤镜filter 操作

--需要使用浏览器的私有前缀

contrast(%)对比度

blur (px) 模糊度

brightness(%) 亮度

invert(%) 反色

...

grayscale灰度 Filter:grayscale(100%)

兼容IE的灰度

filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

3.颜色表示方法：rgb(211,122,122) #3dd322 red rgba(211,211,211,0.5)

HSL(360,50%,76%) 色调，饱和度0%-100%，亮度0%-100%

HSLA(120,50%,60%,0.5) 。。。。。+透明度

---background-color:red; opcity=”0.5”

---background-color:rgba(255,0,0,0.5); 区别

三． Css3颜色的渐变

线性渐变

方法一：

background-image:linear-gradient（to bottom,#fff,#333）;

background-image:linear-gradient（60deg,#fff,#333）;

background-image:linear-gradient（to bottom,#fff 10%,#333 100%）;

径向渐变

方法一：

background-image:radial-gradient(#fff,#333);

background-image:radial-gradient(at left,#fff,#333);

background-image:radial-gradient(at 100px 100px,#fff,#333);

background-image:radial-gradient(200px 100px at 50% 60%,#fff,#333); --200px 100px 代表水平和垂直的半径

--50% 60% 代表圆点的位置 -webkit-方法不支持

background-image:radial-gradient(100px circle at 30% 40%,#fff, #333);

-- 100px 代表圆的半径(渐变完成的半径)

background-image:radial-gradient(100px 120px ellipse at 50% 60%,#fff,#333);

-- 100px 120px 水平和垂直所占的距离

-- 50% 60% 代表圆点的位置 -webkit-方法不支持

重复渐变：

线性：background-image:repeating-linear-gradient(to right,orange 100px, green 200px);100px 200

px 颜色的区域。注意不要相同

径向：background-image:repeating-radial-gradient(orange 100px, green 200px);

低版本IE渐变的兼容

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,startColorStr=orange,endColorStr=green) 0代表横向，1代表纵向

低版本IE只能显示线性渐变

Css3边框属性

1.border:

2.border-width:

3.border-color:

4.border-style: <以上四种又分别有border-left-,border-right-.......>

5.border-radius: 盒子圆角

border-top-left-radius: 左上角

border-top-right-radius: 右上角

border-bottom-left-radius: 左下角

border-bottom-right-radius:右下角

同时设置多个角度

盒子阴影

--border-shadow

border-shadow:3px 3px #ccc; 参数分别是水平平移，垂直平移，颜色

---- 使用负值改变影响所在边

border-shadow:-3px -3px 3px #ccc;

border-shadow:3px 3px 3px #ccc 左下模糊度颜色

border-shadow:3px 3px 3px 10px #ccc 左下模糊度向外偏移量颜色

--内阴影

border-shadow:3px 3px 3px #ccc inset; 内阴影。如果不加则为外阴影(默认)

使用逗号分隔可以设置多层阴影

一．基础选择器

元素选择器 class id * 关联选择器（selecter selecter）

二. 层次选择器

E F E下面所有的子元素F(包括后代元素)

E > F E 下面所有的子元素F(不包括后代元素)

E + F E后面的第一个兄弟元素F(不包括后代元素)

E ~ F E后面的所有兄弟元素F(不包括后代元素)

三. 属性选择器

E[attr] 选择具有attr属性的E元素

E[attr=‘val’] 选择具有attr属性且值等于val的E元素

E[attr~=’val’] 选择具有attr属性且(值等val或者多个值其中一个为val)的元素E.

E[attr^=’val’] 选择具有attr属性且属性值以val开头的E元素

E[attr$=’val’] 选择具有attr属性且属性值以val结尾的E元素

E[attr*=’val’] 选择具有attr属性且属性值包含val的E元素

E[attr|=’val’] 选择具有attr属性且属性值（等于val或者以val-连接）的E元素多个属性值需要符合条件的在最前面(等于val的时候选取不到)

四．伪类选择器

4.1 动态伪类选择器

E:link 设置超链接a在未被访问前的样式(a)

E:hover 设置元素在其鼠标悬停时的样式。

E:active 鼠标点击时的样式

E:visited设置超链接a在其链接地址已被访问过时的样式。(a)

E:focus 获取焦点时的样式(input)

4.2 目标伪类选择器

E:target 当url指向具有某个锚点的E元素时的样式。

#demo:target{color:red;}

<div id="demo">Lorem </div> <a href="#demo">变红</a>

4.3 语言伪类选择器

E:lang(en); 通用属性lang（）语言为en的E元素的样式

lang 属性在以下标签中无效：<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> 以及 <script>

通用属性

class name id style lang

4.4 UI元素伪类选择器（form内元素）

E:checked 元素E选中时的样式(input type为radio或checkbox)

E:enabled 匹配可用状态的表单元素E

E:disabled 匹配禁用状态的表单元素E

4.5 结构伪类选择器

E:root 匹配根元素E。在html中根元素只有一个<html></html>

html:root{border:1px solid red;}

E:first-child 匹配父元素第一个元素E（E必须是第一个）

E:last-child 匹配父元素最后一个元素E（E必须是最后一个）

E:nth-child(n)匹配父元素第n个元素E（E必须是第n个）

E:nth-last-child(n) 倒着数第n个元素E（倒着的第n个元素必须是E）

E:first-of-type 匹配父元素第一个元素E（E不一定是第一个）

E:last-of-type 匹配父元素最后一个元素E（E不一定是最后一个）

E:nth-of-type(n) 匹配父元素第n个元素E（E不一定是第n个子元素）

2n 2n+1 odd even

E:nth-last-of-type(n) 倒着匹配父元素第n个元素E（E不一定是第n个子元素）

2n 2n+1 odd even

E:only-child 匹配父元素仅有的一个子元素E（只有这一个E，别的元素没有）

E:only-of-type 匹配父元素一个子元素E（父元素只有一个E,可以有别的元素）

E:empty 匹配没有任何子元素(包括text节点)的元素E

4.6 否定伪类选择器

E:not(s) 匹配不含有s选择符的元素E

ul li:not(.item)

ul li:not(:first-child)

4.7 伪元素选择器

E:first-letter/E::first-letter 元素E的第一个字符的样式

E:first-line/E::first-line 元素E的第一行字符的样式

E:before/E::before E元素的前面。(配合content属性)

E:after/E::after E元素的后面。(配合content属性)

三角箭头清除浮动

E::placeholder 选择input中的placeholder 兼容较差不常用

Input::-webkit-input-placeholder{color:red;}

Input:-ms-input-placeholder{color:red}

Input:-moz-placeholder{color:red;} 没效果

Input::-moz-placeholder{color:red}

E::selection 设置对象被选择时的样式（文字）

只能定义被选择内容的background，color属性值

p::selection{

background:red;

color:#ccc;

p::-moz-selection{

background:yellow;

}

特殊属性

userselect -webkit-user-select:none | all | text

边框图片

border-image: 边框图片(组合属性）

border-image-source: url(...);图片url地址

border-image-slice: 20或者20%..设置背景图的剪切分割宽度（九宫格切割）拉伸

-- 没有单位

border-image-width: 50px 设置背景图片的宽度(如果不设置会铺满border);

border-image-repeat: stretch | repeat | round

拉伸铺满 | 重复图片铺满 | 缩放以后重复铺满

DAY12

回顾知识点

Css3动画

关键帧：通过控制关键帧来控制动画；帧——最小单位的单幅影像画面，（电影胶片上的每一格镜头）

设置对象所应用动画的名称：通过@keyframes 定义一个动画的名称

1.animation-name:an;

.box{animation-name:an;}

@keyframes an{0%{} 25%{} 100%{}}

2.animation-duration：1s 设置动画的持续时间

3.animation-timing-function:ease; 设置动画的过渡类型

4.animation-delay:1s 设置动画的延迟时间

5.animation-iteration-count:

2设置动画的循环次数

infinite无限循环

6.animation-direction:

normal(正常运行)

reverse（反向运行）

alternate(先正后反运行持续)

alternate-reverse(先反再正持续)

7.animation-play-state:

running(运行)

paused(暂停)

8.animation-fill-mode:设置动画结束时的状态

none(无)

forwards 结束时的状态

backwards 开始时状态

小球下落的简单动画

多列 -- 前缀

columns 复合属性（后面可跟列宽300px，列数4,）

columns:3; 或者columns:300px;

column-width:300px | 12em; 指定列宽

column-count:3 指定列数

column-gap:20px; 设置列与列的间隙距离

column-rule:1px solid #ccc 设置列与列之间的边框

column-rule-width: 2px | medium（中）|thin（瘦）|thick(粗)

column-span:none (不跨列)

all (横跨所有列)

column-fill （所有列高度是否统一，但是所有浏览器都不支持）

column-break-before -- firefox IE 不支持

auto (默认)

always 总是在元素之前断行并产生新列

avoid 避免在元素之前断行并产生新列

column-break-after: auto 默认

always 总是在元素之后断行并产生新列

avoid 避免在元素之后断行并产生新列

column-break-inside: auto 默认内容被截断

avoid 段落内容不被截断

参考：花瓣网 ..

流式布局

伸缩布局

响应式布局

伸缩盒

特点 1.屏幕和浏览器窗口大小改变时可灵活调整布局

2.可以指定伸缩项目沿着主轴或侧轴按比列分配额外空间

3.可以指定伸缩项目沿着主轴或侧轴按比列分担缩小的空间

伸缩盒由伸缩容器和伸缩项目构成

display:flex(块级容器)|inline-flex(行块级容器）

老版本使用display:box;

定义容器：.container{display:flex;}

伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的

flex-direction: -- 设置主轴

row (横向主轴) 横向从左到右排列（左对齐）。

column（竖向主轴）纵向从上往下排列（顶对齐）。

row-reverse (对齐方式与row相反)

column-reverse （对齐方式与column相反）

flex-wrap: ---项目超出处理

nowrap（超出容器不换行) 默认

wrap (超出容器换行)

wrap-reverse (反转wrap值的排列)

flex-flow: 组合属性

由flex-direction和flex-wrap值

justify-content: ---主轴对齐

flex-start（默认）

flex-end（结束）

center(居中)

space-between(两边对齐，中间正态分布)

space-around(全部正态分布)注：沿主轴方向

align-items:侧轴对齐方式(在侧轴上的对齐方式)

flex-start : 起始位置

flex-end:结束边界

center :居中

baseline:如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

stretch:如果子项目高度为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限

align-self: 单独定义一个子项在侧轴方向的对齐方式

auto

flex-start

flex-end

center

baseline

stretch

align-content:当使用flex-wrap为wrap，并且为多行的时候。在侧轴的对齐方式

flex-start 起始位置堆叠, 每一行都紧靠住前面一行

flex-end 结束位置堆叠每一行都紧靠住前面一行

center 中间位置堆叠每一行都紧靠住前面一行

space-between 两端对齐其余在弹性盒容器中平均分布

space-around 各行在弹性盒容器中平均分布

strecth 默认各行将会伸展以占用剩余的空间

flex-grow:2; 设置子项目的扩展比例。(应用于子元素没用达到父元素的宽度的时候)

flex-shrink:2; 设置子项目的收缩比例。(应用于子元素超过父元素宽度的时候)

flex-basis:200px | 100%;伸缩项目的基准值。(和重新设置宽一样，配合flex)

使用flex来复合设置

flex:1 2 300px;扩展比例1，收缩比例2，基准值300px;

使用order设置盒子排序的顺序。数值小的排在前面。可以为负值。

order:1;

order:2;

实例如下

作业如下

回顾知识点

Css背景属性

css2 中的背景

background-color,颜色

background-image,图片

background-repeat,是否重复

background-attachment，是否固定

background-position，位置

css3 新增的属性

2.background-origin:padding-box（默认） | border-box | content

--指定背景起始位置

--不影响结束位置

--剪切相配合6

Background-origin:padding-box 背景图像从padding开始

Background-origin:border-box 背景图像从边框开始

Background-origin:content-box 背景图像从内容区域开始

5.background-clip:padding-box | border-box(默认) | content-box

Background-clip:padding-box 从padding区域向外剪切背景

Background-clip:border-box 从border区域开始向外剪切背景

Background-clip：content-box 从content区域开始向外剪切背景

6.background-size:auto | cover | px 或 % | contain 指定背景图的尺寸

Background-size:auto; 使用原图的大小尺寸

Background-size:px | %; 使用固定值指定背景图大小

--等比例设置宽高(图片)

Background-size:cover; 自动缩放铺满盒子模型

Background-size:contain; 等比例缩小原图，盒子包含原图，但是会有空白

7.多背景属性

url('../../images/bg-tl.png')no-repeat,

url('../../images/bg-tr.png') no-repeat right top,

url('../../images/bg-bl.png') no-repeat left bottom, url('../../images/bg-br.png') no-repeat right bottom,

文本属性

word-spacing

letter-spacing

text-indent

vertical-align

text-decoration

text-transform 字体转换

text-transform:none 默认不转换

text-transform:capitalize 每个单词首字母转换为大写

text-transform:uppercase 全部转为大写

text-transform:lowercase 全部转为小写

text-transform:full-width 全宽属性(兼容较差) firefox支持排版拉丁字符等。

tab-size int | px tab键缩进的尺寸。 -- 配合pre

tab-size : 10 缩进一次十个空格

Tab-size:10px 兼容较差

text-align :justify 两端对齐

text-align:start | end 开始结束（文字编辑的左右顺序）

text-align-last left | right | center 最后一行的偏移方向)

text-justify : 文本对齐方式所有都不支持

text-size-adjust :auto | none | % 文本大小根据设备尺寸调整所有都不支持

text-shadow :3px 3px 4px #ccc 字体阴影

text-overflow: clip | ellipsis 文字溢出

-- 配合overflow:hidden

text-overflow:clip 将溢出部分剪切

text-overflow:ellipsis 将溢出部分替换为...

word-wrap : normal | break-word 换行

word-wrap : normal 当（单个）单词过长，内容将超出边界

word-wrap : break-word 单词过长，截断单词换行

word-break : normal | keep-all | break-all

word-break:normal 默认空格换行，汉字超出换行

word-break:keep-all 使亚洲语言跟英语一样，没有空格不换行

word-break:break-all 截断单词和汉语强行换行

white-space:normal | pre | nowrap | pre-wrap | pre-line

--参考w3c

white-space :normal 正常显示正常换行

white-space : pre 类似<pre>/</pre>

white-space : nowrap 文字在一行显示可配合text-overflow:ellipsis

white-space: pre-wrap 比pre多了一个换行

white-space: pre-line pre换行并取消每行前面空白

text-stroke 设置文字描边 IE不支持

p{-webkit-text-stroke:2px green;color:transparent}

过渡变形

-webkit-transform:translate(50%，50%)。设置元素位移

-webkit-transform:translatex().设置x轴的位移

-webkit-transform:translatey().设置y轴的位移

position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);

-webkit-transform:scale(0.5); 设置元素缩放

-webkit-transform:scale(0.5,0.2); 设置元素缩放

-webkit-transform:scalex(0.2); 设置x轴的缩放

-webkit-transform:scaley(0.4); 设置y轴的缩放

-webkit-transform:rotate(20deg); 设置旋转角度

配合transform-origin:0 0;

-webkit-transform:skew(0deg,0deg); 设置扭曲

-webkit-transform:skewx(50deg); 设置x轴扭曲

-webkit-transform:skewy(50deg); 设置y轴扭曲

transform:translatex(10px),

transform:translatey(20px),

transform:translatez(20px),

transform：translate3d(10px,20px,30px) 分别对应x,y,z轴位移

transform:rotatex(),

transform:rotatey(),

transform:rotatez(),

transform:rotatex(20deg) rotatey(20deg) rotatez(20deg);

-webkit-transform:rotate3d(1,1,1,60deg); 三个方向一个角度

0或1的数值主要用来描述元素是否围绕x,y,z轴旋转的矢量值

--------

transform:scale3d(1,2,3); 3d缩放。参数分别对应xyz轴

transform:scalez(); z 轴的缩放值 -- 没效果

变形的组合写法

transform:translate(50px,0px) rotate(20deg) scalex(1.5);

transform-origin: left top; 指定圆点(使用旋转)

perspective 指定观察者与z=0的平面距离。 None|..px 产生3d的效果

perspective :1000px;//此属性给舞台元素.

transform-style: //此属性设置在父级元素上

flat (子元素不保留3d位置不常用)

preserve-3d (子元素保留3d位置)

perspective-origin:center center;指定3d透视圆点

backface-visibility:

visible (默认)显示

hidden；指定3d背面元素不显示

三．过渡

Css3过渡transition （缓慢变化的过程）

过渡的触发 1.伪元素触发 2.媒体查询 3.JavaScript触发

transition-property: none | all | css属性（指定要过渡的css属性）

颜色，长度，属性值是数值的如z-index opacity 阴影渐变，变形

transition-duration:1s; （指定过渡需要的时间）

transition-delay:2s; （设置延迟过渡时间）可以通过加大过渡时间来做到只过渡一次，不收回。

.box{transition:all 1s 99999s} .box:hover{transition:all 1s;}

cubic-bezier 自定义贝塞尔曲线http://cubic-bezier/

Steps(7)以7步变化

注：将所有属性写在一起；transition:all 5s 1s cubic-bezier(0,1.15,.28,.83);

DAY13

回顾知识点

Css3动画

关键帧：通过控制关键帧来控制动画；帧——最小单位的单幅影像画面，（电影胶片上的每一格镜头）

设置对象所应用动画的名称：通过@keyframes 定义一个动画的名称

1.animation-name:an;

.box{animation-name:an;}

@keyframes an{0%{} 25%{} 100%{}}

2.animation-duration：1s 设置动画的持续时间

3.animation-timing-function:ease; 设置动画的过渡类型

4.animation-delay:1s 设置动画的延迟时间

5.animation-iteration-count:

2设置动画的循环次数

infinite无限循环

6.animation-direction:

normal(正常运行)

reverse（反向运行）

alternate(先正后反运行持续)

alternate-reverse(先反再正持续)

7.animation-play-state:

running(运行)

paused(暂停)

8.animation-fill-mode:设置动画结束时的状态

none(无)

forwards 结束时的状态

backwards 开始时状态

小球下落的简单动画

多列 -- 前缀

columns 复合属性（后面可跟列宽300px，列数4,）

columns:3; 或者columns:300px;

column-width:300px | 12em; 指定列宽

column-count:3 指定列数

column-gap:20px; 设置列与列的间隙距离

column-rule:1px solid #ccc 设置列与列之间的边框

column-rule-width: 2px | medium（中）|thin（瘦）|thick(粗)

column-span:none (不跨列)

all (横跨所有列)

column-fill （所有列高度是否统一，但是所有浏览器都不支持）

column-break-before -- firefox IE 不支持

auto (默认)

always 总是在元素之前断行并产生新列

avoid 避免在元素之前断行并产生新列

column-break-after: auto 默认

always 总是在元素之后断行并产生新列

avoid 避免在元素之后断行并产生新列

column-break-inside: auto 默认内容被截断

avoid 段落内容不被截断

参考：花瓣网 ..

流式布局

伸缩布局

响应式布局

伸缩盒

特点 1.屏幕和浏览器窗口大小改变时可灵活调整布局

2.可以指定伸缩项目沿着主轴或侧轴按比列分配额外空间

3.可以指定伸缩项目沿着主轴或侧轴按比列分担缩小的空间

伸缩盒由伸缩容器和伸缩项目构成

display:flex(块级容器)|inline-flex(行块级容器）

老版本使用display:box;

定义容器：.container{display:flex;}

伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的

flex-direction: -- 设置主轴

row (横向主轴) 横向从左到右排列（左对齐）。

column（竖向主轴）纵向从上往下排列（顶对齐）。

row-reverse (对齐方式与row相反)

column-reverse （对齐方式与column相反）

flex-wrap: ---项目超出处理

nowrap（超出容器不换行) 默认

wrap (超出容器换行)

wrap-reverse (反转wrap值的排列)

flex-flow: 组合属性

由flex-direction和flex-wrap值

justify-content: ---主轴对齐

flex-start（默认）

flex-end（结束）

center(居中)

space-between(两边对齐，中间正态分布)

space-around(全部正态分布)注：沿主轴方向

align-items:侧轴对齐方式(在侧轴上的对齐方式)

flex-start : 起始位置

flex-end:结束边界

center :居中

baseline:如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

stretch:如果子项目高度为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限

align-self: 单独定义一个子项在侧轴方向的对齐方式

auto

flex-start

flex-end

center

baseline

stretch

align-content:当使用flex-wrap为wrap，并且为多行的时候。在侧轴的对齐方式

flex-start 起始位置堆叠, 每一行都紧靠住前面一行

flex-end 结束位置堆叠每一行都紧靠住前面一行

center 中间位置堆叠每一行都紧靠住前面一行

space-between 两端对齐其余在弹性盒容器中平均分布

space-around 各行在弹性盒容器中平均分布

strecth 默认各行将会伸展以占用剩余的空间

flex-grow:2; 设置子项目的扩展比例。(应用于子元素没用达到父元素的宽度的时候)

flex-shrink:2; 设置子项目的收缩比例。(应用于子元素超过父元素宽度的时候)

flex-basis:200px | 100%;伸缩项目的基准值。(和重新设置宽一样，计算时配合flex)

使用flex来复合设置

flex:1 2 300px;扩展比例1，收缩比例2，基准值300px;

使用order设置盒子排序的顺序。数值小的排在前面。可以为负值。

order:1;

order:2;

实例如下

作业如下

DAY14

web字体

1.使用字体库 -- 有字库 http://www.youziku/

2.使用本地的字体

@font-face { font-family: myFont;src: url();} p{font-family:myFont;}

字体图标

阿里图标。

1.资源丰富，文件较小。需要提前准备好所有的图标。

2.百度搜索阿里图标下载所需要的资源。

在demo.html文件中查看使用方法

使用fa图标 运用简单，可远程。

响应式设计

伊桑·马科特（Ethan Marcotte）在2010年首先提出了响应式网页设计（RWD,Responsive Web Design）这个术语。在他的一篇文章《Responsive Web Design · An A List Apart Article》中他将已有的三种发开技巧（弹性图片，弹性网格布局，媒体与媒体查询）进行了整合，命名为响应式网页设计。

那什么才是真正的响应式设计？马科特说，真正的响应式设计方法不仅仅是根据可视区域大小而改变网页布局，而是要从整体上颠覆当前网页的设计方法，是针对任意设备的网页内容进行完美布局的一种显示机制。

优点：1.开发维护运营成本低。针对不同设备不同分辨率的网页只有一个。

2.兼容优势。

3.操作灵活。

4.面对不同分辨率设备灵活性强

5.能够快捷解决多设备显示适应问题

---（微软苹果 oppo vivo ...）

缺点：

1.兼容各种设备工作量大，效率低下

2.代码累赘，会出现隐藏无用的元素，加载时间加长

3.其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

4.不利于搜索引擎收录

像素密度：ppi或者dpi.即每英寸屏幕所拥有的像素数，像素密度越大，显示画面细节就越丰富。

像素密度的计算方式：像素密度=√{（长度像素数^2+宽度像素数^2）}/屏幕尺寸(计算器) 设备像素比（dpr）：每个像素包含的点数。Ihone6 1920/736=2.6每个像素2.6个点渲染

说明：同样的尺寸。像素不同。如果没有像素比，则显示会有影响。

viewport

用户网页的可视区域（视口）

Css3媒体查询

1.通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。

2.媒介查询的大部分媒介特性都接受min和max用于表达”大于或等于”和”小于或等于”。

3.通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。

1.<meta name=”viewport” content=”width=device-width,initial-scale=1.0”>

代码说明：width=device-width : 宽度等于当前设备宽度

initial-scale: 初始缩放比列（默认1.0）

user-scalable: 是否允许用户缩放(no|yes)

minimum-scale 允许缩放的最小比例

maximum-scale 允许缩放的最大比例

1px表示1px

--动态设置像素比 (window.devicePixelRatio)

媒体查询 -- @media

媒体类型：

all 所有媒体设备

screen 电脑显示器

print 打印机

Aural 语音音频...

tty 电传打字机

tv 电视

....

媒体样式的导入

新建print.css 和 screen.css

1. <link href=”print.css”media=”print”>

2. <style> --@import 需要放在最前(@charset 注释除外)

@import url('./screen.css') screen;

@import url('./print.css') print;

</style>

3.@media screen{

h1{text-shadow:3px 3px 3px #ccc;}

}

4.<style media=”print”>

@import url()

</style>

媒体特性介绍

aspect-ratio 可视窗口宽高比 min-aspect-ratio:1/1

device-aspect-ratio 设备的宽高比 min-device-aspect-ratio:1/1

orientation 设备方向(landscape 水平 | portrait 垂直) orientation:portrait

width | (min,max) 可视窗口的宽度 min-width:578px

device-width 设备的宽度

Height 可视窗口的高度

device-height 设备的高度 device-width:320px (逻辑像素)

resolution 像素比（dppx） min-resolution:2dppx

Media query 方式

and 并且

，或者

not 否定--取反 @media not screen and (max-width:500px){}

only 只能...

断点

手机等超小屏幕 0-768px

平板小屏幕 768px - 992px

中等屏幕 992px - 1200px

大屏幕 1200px -

其他断点

小屏幕 0-640

中屏 640px-1024px

大屏 1024-

语法结构及用法

@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{ code... }

重新定义导入方式

实例：oppo图片展示尾部伸缩盒

作业：vivo导航条

DAY15

最大高度

max-height

最小高度

min-height

最大宽度

max-width

最小宽度

min-width

响应式常用单位

1. vw 100vw = 视口宽度

2. vh 100vh = 视口高度

3. vmin 取vm和vh的最小值

4. vmax 取vm和vh的最大值

关于base.css（reset.css）和normalize.css

base.css

简单暴力，不管你有没有用，统统重置成一样的效果，且影响的范围很大，讲求跨浏览器的一致性。(革命派)

normalize.css

Normalize 相对平和，注重通用的方案，重置掉该重置的样式，保留有用的样式，同时进行一些 bug 的修复，这点是 reset 所缺乏的。(改良派)

网格系统（栅格系统）

配合media媒体查询可以很快的布局。 --使用网格系统完成微软网页部分

响应式图片

方法一.设置图片的宽度为百分比。

width:设置宽度%.

min-width:缩放到最小值时不能继续缩小。

max-width:图片宽度增大到一定程度不能继续增加。

方法二.使用背景图片

background:url() + background-size:cover + padding,margin

方法三.使用picture -- 兼容不好

</picture>

方法四.使用picturefill插件导入picturefill.js文件

</span>

转载于:https://my.oschina/u/3502345/blog/912300

更多推荐

H5C3的总结

H5C3的总结

DAY01

DAY02

DAY03

DAY04

DAY05

DAY06

DAY07

DAY08

DAY09

DAY10

DAY11

DAY12

DAY13

DAY14

DAY15

发布评论取消回复

最近发表

热门文章

标签列表