HTML第一章：
网页结构：
2. 网页顶部标题title
3. 内容标题标签h1~h6
4.段落标签< p >< /p >
5.换行标签br
6.水平线标签hr
7.网页注释 Hbulider快捷键 ctrl+/
8.加粗< b >< strong >
9.斜体em i
10.< img src=“images1/photo.jpg”
alt=“图片丢失显示的文字” title=“鼠标悬停显示文字” height=“100px” width=“100px”>
11.超链接
< a href=“demo2.html” target="_blank">1< /a>
属性：target的取值值
_blank 在新页面打卡
_self 本身页面打开
12.锚点链接
12.1单页面跳转
<a name="a">checkpoint</a>
<a href="#a">跳转到顶部的checkpoint处</a>
12.2跨页面跳转
比如，这个超链接写在demo2.html
第二个超链接写在demo1.html
<a name="asobi">跨页面跳转</a>
<a href="demo2.html#asobi">这里是跨页面的锚点链接</a>
13.电子邮件
123这是mailto电子邮件链接是功能性链接
14.特殊符号
控咯
> 大鱼
< 小鱼
© 搬寝女富豪
HTML 第二章：
1.列表：
1.1有序列表：带编号
<ol>
<li></li>
</ol>
1.2无序列表：无级别之分，用的较广
<ul>
<li></li>
</ul>
1.3定义列表：适用于带标题和标题解释性内容的场合
<dl>
<dt>作为每个列表的起始</dt>
<dd>对每个列表项的定义</dd>
</dl>
2表格：
<table border="" cellspacing="" cellpadding="">
<tr>
<th>1-1标题</th>
<th>1-2标题</th>
<th>1-3标题</th>
<th>1-4标题</th>
<!--th*5按tab会出来5个-->
</tr>
<tr>
<td>2-1内容</td>
<td>2-2内容</td>
<td>2-3内容</td>
<td>2-4内容</td>
</tr>
<tr>
<td>3-1内容</td>
<td>3-2内容</td>
<td>3-3内容</td>
<td>3-4内容</td>
</tr>
</table>
2.1跨行跨列
colspan="所跨的列数"
rowspan="所跨列数"
<table border="" cellspacing="" cellpadding="">
<tr>
<th>Header</th>
<th>123123</th>
</tr>
<tr>
<td colspan="2">Data</td>
</tr>
<tr>
<td rowspan="2">Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
</tr>
</table>
3视频标签：
<video src="视频路径" controls="为进度条" autoplay="为自动播放" loop="为循环播放">
<source src="视频地址">
</video>
4音频标签：
<audio src="音频路径" controls="为进度条" autoplay="为自动播放" loop="为循环播放">
<source src="音频地址">
</audio>
最好有多个资源地址，有的浏览器不支持
5.html的结构元素
header标题头部区域的内容
footer标记脚部区域的内容
section Web页面中独立的一块区域
article 独立的文章内容
aside 相关内容或应用常用于侧边栏
nav 导航辅助内容
6.iframe框架
<iframe src="" width="" height=""></iframe>
iframe属性的使用
<iframe name="mainFrame" src="第3章/上机/1.html"></iframe>
<a href="第七章/example/2.html"target="mainFrame">窗口显示</a>
HTML 第三章：
表单
<form action="url提交到的网址" method="post">
post比get安全
</form>
<input>标签下的属性
type类型
name名称
value可选，如果type为radio类型，则必须制定一个值
size表单元素的初始宽度，type为text或password则表单元素的大小以字符为单位，其他的类型以宽度
maxlength 输入的最大字符数，默认无限
checked当类型为radio或CheckBox时使用
1.密码框：
<input type="password">密码框
2.用户名：
<input type="text">用户名
3.单选框：
<input type="radio" name="gen">单选框 （备注：名字必须都一样）
4.多选框:
<input type="checkbox" name="a" value="">运动多选框（备注：名字必须都一样）
<input type="checkbox" name="a" id="" value="" />睡觉
5.列表框：
<select>
<option value="请输入数字" selected>请输入数字</option>
<option value="1">1</option>
</select>
6.列表框（2）:
<input type="text" maxlength="6" size="4" />
备注(maxlength 意义代表为可以输入的字体长度，size 意义为列表框的长度。)
7.重填按钮：
<input type="reset" value="重填">重填按钮
8.提交按钮：
<input type="submit" value="提交按钮">提交按钮
9.普通按钮：
<input type="button" value="普通按钮">普通按钮
10.多行文本域：
<textarea name="textarea" cols="显示的列数" row="显示的行数">
可以填写个人简历的文本框
</textarea>
11.文件域：
<input type="file">
上传文件
12.邮箱：
<input type="email" name="email">
email邮箱
13.网址：
<input type="url" name="userurl">
网址链接http：//www.baidu.com（配合提交按钮使用）。
14.数字：
<input type="number" min="输入的最小值" max="输入的最大值" step="一次跳转的值">
如果跳转的值大于输入的最大值系统会自动给以提示。
15.滑块：
<input type="range" min="0" max="100" step="2">可以滑动选择数字值。
step为分度
16.搜索框：
<input type="search" name="sousuo" />实在当前页面内搜索东西不会跳出代码所在页面。（配合提交按钮使用）。
17.隐藏按钮：
<input type="hidden" value="6666" name="userid" />可以隐藏不希望让别人看到的东西。
18.只读文本：
<input type="text" readonly/>只读代码只可以看不可以修改。
19.禁用文本：
<input type="text" disabled/>禁用代码不可以选中。
20.标注代码：
<label for="male">男</label>
<input type="radio" value="男" name="gen" id="male">
id和for里的值要一样
label和input最好在一起
（标注代码必须在他的下一行代码，不然就错位了。input中接取他的for的值要用id接。）
表单初级验证：
1.输入提示
placeholoder
<input type="search" name="" id="" value="" placeholder="请输入要搜索的关键字"/>
2.必填代码：
<input type="text" name="username" required/>
required要求你必须输入
3.pattern：
输入的值必须满足正则表达式
<input type="text" pattern="^1[358]/d{9}">以13.15.18开头的11位数字。
4.常用正则表达式:
^ 匹配输入字行首
$ 匹配输入行尾
x|y 匹配x或y
[xyz] 字符集合。匹配所包含的任意一个字符。
[^xyz] 负值字符集合。匹配未包含的任意字符。
[a-z] 字符范围。匹配指定范围内的任意字符。
[^a-z] 负值字符范围。匹配任何不在指定范围内的任意字符。
\d 匹配一个数字字符。
\D 匹配一个非数字字符。
{n} n是一个非负整数。匹配确定的n次。
{n,} n是一个非负整数。至少匹配n次。
{n,m} m和n均为非负整数，其中n<=m。
. 匹配除"\n"和"\r"之外的任何单个字符。
01 二进制(逢二进一)
01234567 八进制(逢八进一)
0123456789 十进制(逢十进一)
0123456789ABCDEF 十六进制(逢十六进一)
HTML 第四章：
1.低级选择器为：
标签选择器： h1{ font-size:14; color:#F00; }
id选择器: #id名称{ font-size:15; color:#F000; }
类选择器： .class名称{ font-size:15px; color:#F000; }
行内样式： 就是在标签内嵌入style 如：<h1 style="color:red;">2</h1>
外部样式表： 如：<link href="style.css" rel="stylesheet" type="text/css" />
ps 不要写进style里 不然不会有效果
导入式：
<style>
@import url("../css/example1.css")
</style>
2.CSS的高级选择器：
1.后代选择器： q ul{ color:red; border:1; }
2.子选择器： body>p{ background:red; } 父级元素所包含的子级元素。发生变化。
3.相邻兄弟选择器： 要用类或者id接一下例如： .active+p{ background:green; } 他的下一个标签发生变化
4.通用兄弟选择器： .active~p{ background:green; } 这个是出了他自己以外所有在统一标签中的相同标签全部变化。
结构伪类选择器：
p:first-child{ background:red;} 作为标签中的第一个标签。
p:last-child{ background:red;} 作为标签中的最后一个标签。
ul li:first-child{background:red;} ul里面的第一个li标签。
ul li:last-child{background:red;} ul里面的最后一个li标签。
p:nth-child(1){background:yellow;} p标签里面的第一个标签。
p:nth-of-type(2){background:red;} p标签里面第二个类型为p的标签。
body p:nth-of-type(1){background:red;} 父级元素里面的第1个p标签。 先看类型再看位置。
3 . 属性选择器的语法：
a[id]{background:red;} 找到id属性的a元素改变他的背景颜色。
a[id=first]{background:red;} 找到具有id属性的a元素，并且属性值为first的。
a[class*=links]{background:red;} 找到所有含有class属性并且属性值中包含links字符串的a元素。
a[href^=http]{background:red;} 找到所有含有属性值一字符串http开头的a元素。
a[href$=png]{ backgroung:red;} 找到href属性并且与png结尾的所有a元素。
HTML 第五章：
<span>标签：行内标签
1.字体样式：
p{
font-family:Verdana,"楷体"；
}
可以同时声明多种字体，字体之间用英文输入法模式下的逗号分隔
ps：英文字体位于汉语字体前，否则英文字体将不起作用
宋体是计算机中的默认字体
子级可以继承父级样式
2.字体大小：
h1{
font-size:16px;
}
3.字体风格：
h1{
font-size:16px;
font-style:normal;
}
<!--分为三种，normal，标准的 italic,斜体字 oblique 倾斜体-->
4.字体粗细：
h1{
font-weight:normal;
}
// normal 标准字体
bold 粗体字
bolder 更粗的字体
linghter 更细的字体
只有100~900 输出
错误显示默认值
5.字体属性：
p span{
font:oblique bold 12px "楷体"；
}
PS：注意顺序：字体风格 字体粗细 字体大小 字体类型
排版网页文本
1.文本颜色：
p{
color:#233232;
color:rgba(r,g,b,alpha);
color:rgb(r,g,b);
}
<!--分为
1.RGB
color:#000000;
用十六进制表达 例如#FFFFFF 前两位表示红色分量 中为绿 后为蓝
如果相邻的两位相同的话可以缩写为一位 例如 #336699 写成#369
RGB还有一种表达是
color:rgb(r,g,b);
以上三个参数，正整数取值0~255，百分比取值0%~100% 超出范围将截至其最近的取值极限
另外三个参数不能为负
2.RGBA
color:rgba(0,0,255,0.4);
在RGB基础上加了一个alpha透明度的参数，取值为0~1，可为小数，0完全透明，1完全不透明，且值不能为负数
-->
2.水平对齐方式:
h1{
text-align:center;居中
text-align:left;向左
text-align:justify;两端对齐
text-align:right;向右
}
3.首行缩进和行高：
p{
line-height:28px; //行高28px
text-indent:2em; // 空两个字符
}
// text-indent将缩进距离以数字表示，单位em或px em是相对单位，其表示的长度相当于本行中字符的倍数
line-height以像素表示，单位为px 以数字表示的话，是以字体大小的倍数显示 比如：line-height:1.5 行高就是字体大小的1.5倍
4.文本装饰：
a:nth-of-type[1]{
text-decoration:none; 标准文本
text-decoration:underline; 下划线
text-decoration:overline; 上划线
text-decoration:line-through; 删除线
}
ps:可以利用这个属性去掉a的下划线,
5.垂直对齐方式：
span,img{
vertical-align:middle;
}
top 顶部
middle 中间
bottle 底部
letter-spacing 产生文字间隔
ps:开发时通常用于图片和文字对齐，因为对于<p><h><div>来说是不起作用的
6.文本阴影：
p{
text-shadow:color x轴位移（x-offset）y轴位移(y-offset)模糊半径（blur-radius）；
text-shadow:rgba(0,0,0,0.5) 10px 10px 1px；
}color 背景颜色
x-offset：x轴位移，用来指定阴影水平位的移量 右正左负
y-offset:y轴位移，用来指定阴影垂直位移量 下正上负
blur-radius:阴影模糊半径，代表阴影向外模糊的范围，如果为0，代表不具有模糊效果 不能为负
1.超链接伪类：
a{
a:link{color:#;}单击访问前的样式
a:visited{color:#;}单击访问后的样式
a:hover{color:#;}鼠标悬浮时的样式
a:active{color:#;}单击未释放时的样式
}
ps:<a href="#"></a> href里必须有东西，不然link那里效果不显示
2.列表样式：
list-style-type:none;无标记符号
list-style-type:disc;空心圆，默认类型
list-style-type：circle；空心圆
list-style-type：square；实心正方形
list-style-type：decimal；数字（备注：和无序列表一样都可以修改为数字。）
3.背景图像：
<div id="">
划分区域用的
</div>
background-image:url{图片路径}。
背景重复方式：
background-repeat：沿水平和垂直两个方向平铺
background-repeat：no-repeat:不平铺，即背景图像只能显示一次。
background-repeat：repeat-x：只沿水平方向平铺。常用于导航栏 标题
background-repeat：repeat-y：只沿垂直方向平铺。不常用
4.背景定位：
background-postion：Xpos Ypos ；
设置图片在背景中的位置。
使用像素值，第一个值表示水平位置，第二个表示垂直位置。
1.0px 0px 默认，表示从左上角出现背景图像。
2.30px 40px 正向偏移，图像向下和向右移动。
3.-50px -60反向偏移，图像向上和向左移动。
X% Y%表示背景位置。
30% 50%（垂直方向居中，水平方向偏移30%）
X，Y方向关键词
使用关键字的位置水平方向的关键字有：
left，center，right，垂直方向的关键字有top，center
bottom。
使用水平和垂直方向的关键字进行自由组合，如省略，则默认为center
例如：
right top(右上角出现);
left bottom（左下角出现）;
top （上方水平居中位置出现）;
5.背景：
颜色 图片 x坐标 y坐标 重复
background:#666 url(img) 20px 10px no-repeat;
background:#666 url(img) left center no-repeat;
6.背景尺寸
1.auto背景图片保持原样，是默认值。
background-size：auto;
2.percentage
background-size:20%,20%;
此时尺寸不是相对于背景图片的大小来计算的，而是div的宽与高来计算的。
3.cover
让图片充满div块
background-size:cover;
需要注意的是，放大后的图片不是位于正中间，需要用
background-position:center;
来位于中间，需要的一张足够大的照片，否则在较大分辨率的浏览器下会导致背景失真
4.contain
background-size:contain;
可以根据背景图片保持本身的宽高比例将背景图片缩放到宽度正好适应所定义背景的区域
ps只有auto不会失真，剩下都有可能
！！！！
css3渐变
渐变代码：
background:-linear-gradient（position，color1，color2，...）
但是浏览器有的都不支持所以为了浏览器的兼容需要以下编写方式。
background:-webkit-linear-gradient(position,color1,color2,...)
浏览器一共分为5种内核
1.IE浏览器 内核：-ms-
2.chrome浏览器和Safari浏览器内核版本一样都为-webkit-
3.Opera浏览器 内核：-o-；
4.Firefox浏览器 内核：-moz-；
渐变方向代码：
1. to bottom:第一种颜色向第二种颜色渐变的方向是从顶部到底部。
2. to left：第一种颜色向第二种颜色渐变的方向是从右边到左边。
3. to right：第一种颜色向第二种颜色渐变的方向是从左边到右边。
4. to top left：第一种颜色向第二种颜色渐变的方向是从右下方到左上方。
5. to top right：第一种颜色向第二种颜色渐变的方向是从左下方到右上方。
6. to bottom left：第一种颜色向第二种颜色渐变的方向是从右上方到左下方。
7. to bottom right：第一种颜色向第二种颜色渐变的方向是从左上方到右下方。
例如：
background:linear-gradient(to top,orange,blue);
第六章：盒子模型
1.盒子模型
从里到外：网页内容 padding border margin
2.边框： 顺序上右下左 没有找对边
2.1border-color属性设置方法：
border-top-color:#928 ;
border-right-color:#aaf ;
border-bottom-color:#132 ;
border-left-color:#123 ;
border-color:#123 #000;
2.2border-width 框的粗细
值有：thin medium thick 像素值
border-top-width:2px ;
border-right-width:2px;
border-bottom-width:2px ;
border-left-width:thin ;
border-width:1px 2px 3px 4px;
3.border-style 边框风格
常用值：none solid实线 dotted电线 dashed许仙
电线虚线有浏览器不支持会变实线 常用max的只有前两个
border-top-style：solid;
border-right-style：solid;
border-bottom-style：solid;
border-left-style：solid;
border-style：solid;
说句实话，上边基本不咋用，一般一个border搞定，能懒就懒啊
4.border的简写属性
同时设置他们的 width color style 可以不按顺序，但一般都是这样的顺序
border-top：9px red dashed;
border-right：9px red dashed;
border-bottom：9px red dashed;
border-left：9px red dashed;
border：9px red dashed;
5.外边距：
margin 也分为上右下左顺时针一圈，没有找对边
margin-top:1px;
margin-right:1px;
margin-bottom:1px;
margin-left:1px;
margin:1px;
ps: 注意先清除内外边距
*{
margin:0px;
padding:0px;
}
！！！网页布局尤为关键 记录下来！！！
!!!如何让盒子水平居中：
条件 ：块元素 宽度 margin第二个值为auto
5.1先设置盒子的宽度
5.2然后设置它的margin:0px auto;
ps：auto这个值通常当设置盒子在它的父容器中居中显示才用
6.内边距：
上右下左 没有找对边
padding-top:1px;
padding-right:1px;
padding-bottom:1px;
padding-left:1px;
padding:1px 1px 2px ;
7.盒子模型的尺寸
F12浏览器调出调试台
内盒宽度：
left-border+left-padding+内容宽+right-border+right-padding
内盒高度：
top-border+top-padding+内容宽+bottom-border+bottom-padding
外盒宽度：
left-margin+left-border+left-padding+内容宽+right-border+right-padding+right-margin
外盒高度：
top-margin+top-border+top-padding+内容宽+bottom-border+bottom-padding+bottom-margin
总结：其实内外盒就差了个margin而已
8.box-sizing：
语法：
box-sizing：content-box | border-box | inherit
content-box 默认值 (外)内盒子的宽高：(margin)+border+padding+内容宽高
！！！border-box 盒子的宽高==你设置的的width height
(此处内容的宽高==盒子的宽高-border-padding)
好处是盒子的宽高你不用自己计算了，而是和你一开始规定的宽高一样的
inherit 继承他爹的盒子模型模式
9.border-radius:圆角边框。
border-radius:1px 2px 3px 4px;
顺序：左上 右上 右下 左下 没有找对边
9.1圆
条件：
1.元素宽高相等
2.圆角半径为元素宽度一半（大点也没事），或是直接50%
#af{
border: 1px blue solid;
width: 100px;
height: 100px;
border-radius: 50%;
}
9.2半圆
上，下半圆条件：
1.宽：高=2：1
2.圆角半径为高度值
#af{
border: 1px blue solid;
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0 ;
}
左右半圆条件：
1.宽：高=1：2
2.圆角半径为宽度值
#af{
border: 1px blue solid;
width: 50px;
height: 100px;
border-radius: 50px 0 0 50px;
}
ps反正做个1：2的长方形然后圆半径就是短边
9.3扇形
条件 三同一不同
1.宽 高 圆角半径同
2.位置不同
#af{
border: 1px blue solid;
width: 100px;
height: 100px;
border-radius: 100px 0 0 0 ;
}
10.box-shadow：
盒子阴影
box-shadow:inset x-offset y-offest blur-radius color;
inset:如果不加他就直接默认为外部阴影，加上他就为内部阴影。
x-offset x偏移量正右负左
y-offset y偏移量正下负上
blur模糊
color颜色
例如：box-shadow：inest 20px 10px 10px #06c;
box-shadow：inest -20px -10px 10px #6cf，20px 10px 10px #06c;
加，可以实线多重阴影
第七章：浮动
1标准文档流：
从上到下，从左到右的排版方式
display属性值：
block 块级元素默认值，元素会被显示为块元素，前后带换行符
ps：input不是块元素
inline 内联元素默认值，会被显示为内联元素，前后无换行符
inline-block 行块元素，既有块元素，又有内联元素的特性
none 设置的元素不会被显示`
2浮动概述
想要使块元素排列在一行，还要支持宽高的方法除了使用display:line-block，还有一种就是浮动
float属性
left 元素向左浮动
right 向右浮动
none 默认值 元素不浮动，并会显示在其文本中出现的位置
ps如果不给文字设宽度的话，那么他就会占满一行
3浮动清除
clear值
left
right
both
none 默认值，允许浮动元素出现在两侧
4解决父级边框塌陷的方法
4.1在所有的div后面加个空的div并将其设置为
代码量变多，同时也会有产生冗余标签
#clear{
clear: both;
padding: 0px;
margin: 0px;
}
4.2设置父元素的高度
这样会影响元素的可扩展性
div[id="father"]{
border: 5px red solid;
margin: 10px;
height: 1000px;
padding: 10px;
}
4.3父级添加overflow属性
通常处理设置外层盒子包含内层浮动元素的效果，防止父级边框塌陷，但是有下拉列表的情况不能使用
div[id="father"]{
border: 5px red solid;
margin: 10px;
padding: 10px;
overflow: hidden;
}
overflow值
visible 默认值 内容不会被修剪，会呈现在盒子之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条来查看其余内容
auto 如果内容会被修剪，但是浏览器会显示滚动条来查看其余内容
推荐使用无副作用的：
4.4父级添加伪类after
#father:after{
content: ''; /*在id：father后添加内容为空*/
display: block; /*把添加的内容转化为块元素*/
clear: both;/*清除这个元素两边的浮动*/
}
#father{
在IE6 IE7下+这一句
zoom：1;
}
5.inline-block和浮动的区别
display:inline-block可以让元素排在一行，并且支持宽高，添加此属性的元素在标准文档流中，不需要清除浮动
缺点：方向不可控制，并且会出来空格，IE6 IE7不支持
float:可以让元素排在一行且支持宽高，可以以决定排列的方向
缺点：浮动后让元素脱离文档流，对周围元素产生影响，必须在它的父级上添加清除浮动的样式
总之要灵活应用
第八章定位网页元素
1.position属性
值
static relative absolute fixed
1.1static
为默认值，表示盒子在原本的位置上，没有任何移动。
1.2relative
设置元素的相对位置，需要靠left top bottom right来指定偏移量
div div:nth-child(2){
position: relative;
top: 100px;
right: -100px;
}
注意，这里top：100px是新位置相对于原位置向上移动100px，
right: -100px是新位置相对于原位置向右移动100px
总结：
1.设置relative的盒子，现在的位置通过指定位移到达原来位置
2.设置relative的盒子，仍在标准文档流中，它对父级及相邻的盒子没任何影响
3.设置relative的盒子原来的位置会被保留下来
其实加上float也一样会偏移，但float会影响相邻及父级盒子
div div:nth-child(2){
background-color: goldenrod;
position: relative;
top:100px;
float: right;
}
1.3.absolute
位置是最近且已定位的祖先为基准进行偏移的，放心你看不懂
1.3.1.使用了绝对定位的元素，将以它 最近 的一个“已定位”的“祖先”元素为基准进行偏移。
如果没有“已定位”的“祖先”元素，那么将以浏览器窗口作为基准进行定位。
1.3.2.绝对定位的元素会脱离标准文档流，这意味着它们不会对其他元素的定位造成影响。
已定位：position被设置为默认值static以外的其他值，如relative什么的。
祖先：就是从文档流任意节点开始，走到根节点，经过的所有节点都是她的祖先，简单来说就是你设置position:absolute的元素一直往上走走到头，那些都是她的祖先。
ps可以设置绝对领域(划掉)位置，不设置偏移量，这样可以保持在原位又脱离了标准文档流。
1.4.fixed
位置固定,不随浏览器滚动而移动，比如说在屏幕左端，就一直在那里窝着不动地方
而absolute如果以浏览器为基准的话，她的位置仅限一屏之内，超出一屏高度度化，她的位置就会随着浏览器窗口的滚动而移动。
加深理解relative与absolute与fixed
1.relative
1.1相对于自己的初始位置来定位
1.2元素位置发生偏移后，原来的位置会被保留下来
1.3层级提高，变大佬了，把标准文档流中的元素和浮动元素盖在下面
使用场景：很少单独用，都是配合absolute使用，为绝对定位创造父级而又不设置偏移量
2.absolute
2.1绝对定位是相对于它的已经定位的父级（就是往上走找最近的，同级也成）位置进行定位的，默认就是相对浏览器窗口了
2.2元素位置发生偏移后不会留下它原来的位置
2.3层级提高，变大佬了，把标准文档流中的元素和浮动元素盖在下面
2.4设置绝对定位的元素脱离文档流
使用场景：一般下拉菜单，焦点轮播图，弹出数字气泡，特别花边……
3.fixed
3.1相对浏览器的窗口来定位
3.2偏移量不会随着滚动条的移动而移动
使用场景：窗口左右两边固定的广告，返回顶部图标，吸顶导航栏……
2.z-index属性
x,y,z轴 z就是元素重叠的上下位置 默认z-index：0;
它的值越大层级越高，就在上面呆着
例如：
-2 -1 0 1 2
-1盖住了-2 0盖住了-1 以此类推
opacity：x 取值0~1,越小越透明 举例 opacity：0.4;
filter：alpha(opacity=x) 取值0~100越小越透明 举例filter:alpgha(opacity=40);
例子6：设置半透明层
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
li{
list-style-type: none;
}
div{
padding: 5px;
border: solid red;
width: 114px;
overflow:hidden;
font-size: 15px;
line-height: 25px;
}
ul{
position: relative;
border: solid;
}
img{
width: 114px;
text-align: center;
}
.tipbg,.text{
position: absolute;
top: 90px;
width: 114px;
height: 25px;
}
.text{
text-align: center;
color: blue;
z-index: 1;/*这样可以提高文本层级使其更加清晰*/
}
.tipbg{
background-color: #a23;
opacity: 0.6;
}
</style>
<div>
<ul>
<li><img src="../../HelloHBuilder/img/HBuilder.png"/></li>
<li class="text">asfasdfas</li>
<li class="tipbg"></li>
<li>时间11.16 星期六 8：30</li>
<li>地点 超验区西当旺路珠江帝景去</li>
</ul>
</div>
第九章 利用CSS3开发商业站点
1.CSS3变形
它是一些效果的集合，如平移，旋转，缩放，倾斜效果，都可以成为变形（transform）
基本语法：
transform:[transform-function] *;
1.2兼容性
反正都要加前缀
-moz-transform 火狐
-webkit-transform Chrome谷歌
-o-transform Opera
-webikit-transform Safari
1.3 2d变形
语法
transform:translate(tx,ty);
tx:横坐标 以右为正
ty:纵坐标 以下为正
单位：px
例子：
div{
background-color: black;
color: red;
font-size: 42px;
text-align: center;
height: 200px;
width: 200px;
line-height: 200px;
-webkit-transform: translate(100px,20px);
}
拓展：
translateX(tx);
translateY(ty);
1.4 2d缩放
语法
scale(sx,sy);
sx：宽度方向的缩放量
sy：高度方向的缩放量
单位：直接写小数就好，整数也行
例子：
-webkit-transform: scale(1.9);
这样就是相当雨宽高放大1.9倍，也可缩小，负数就放大加旋转
拓展
scaleX:(sx);
scaleY:(sy);
1.4 2d倾斜
语法：
skew(ax,ay);
ax:水平方向的倾斜度
ay:垂直方向的倾斜度
单位:deg 度数
例子：
-webkit-transform: skew(40deg,60deg);
注意，会改变图形的形状
拓展：
skewX(ax)
skewY(ay)
1.5 2d旋转
语法
rotate(a);
单位：deg
正值顺时针旋转，负值逆时针旋转
例子：
-webkit-transform: rotate(34deg) scale(2);
注意综合运用，顺时针旋转34度又放大了两倍
2.css3 过渡
2.1.过渡简介
transform就是结果的话，transition就是呈现的一种过渡，过程。
好比你考试考过了是结果的话，你怎样复习，考试怎样作弊（划掉），就是过程
2.2兼容性
自己查吧 反正加上就没事 IE Firefox Chrome Opera Safari
2.3过渡属性的使用
语法：
transition:[transition-property transition-duration transition-timing-function transition-delay]*
放心你看不懂 反正就记住
transition:过渡属性 过渡所需时间 过渡动画函数 过渡延迟时间;
2.3.1过渡属性
可以指定具体css属性 width height background-color等
但取值一般为all，方便
如：
transition:background-color;
-moz-transition:background-color;
-o-transition:background-color;
-webkit-transition:background-color;
2.3.2过渡时间
div{
background-color:blue;
transition:background-color 2s;
}
div:hover{background-color:yellow}
蓝到黄色 2秒渐变
2.3.3过渡动画函数
ease:默认 speed逐渐变慢
linear:匀速运动 speed恒定
ease-in:逐渐显现效果 speed逐渐变快
ease-out:逐渐隐藏效果 speed逐渐变慢
ease-in-out:逐渐显现后逐渐隐藏效果 speed先快后来变慢
div{
background-color:blue;
transition:background-color 2s ease-in;
}
div:hover{background-color:yellow}
2.3.3过渡延迟时间
等多久才开始动画，懂否？
div{
background-color:blue;
transition:background-color 2s linear 3s;
}
div:hover{background-color:yellow}
延迟3s 2s内匀速的将背景为蓝色过渡为黄色
9.2.4过渡触发机制
伪类触发：hover active focus checked等
媒体查询：可以通过@media属性判断设备的尺寸，方向等
JavaScript触发：用JavaScript脚本触发
总之步骤为三点：
1.默认样式声明元素的初始状态
2.声明过渡元素的最后状态，如悬浮时让文字顺时针放大1.2倍转一圈
3.在默认样式中添加过渡函数，添加一些不同的样式
3.CSS3动画
3.1简介
通过改变元素属性值来实现动画效果
transition:属性通过指定属性的初始状态和结束状态在两个状态之间进行平滑过渡
animation：由两部分组成
1.类似Flash的关键帧来声明一个动画
2.在animation属性中调用关键帧声明的动画实现更复杂的动画
3.2浏览器兼容性
自己查吧，反正记得加前缀就行
3.3CSS3动画使用过程
3.3.1通过关键帧（@keyframes）来声明一个动画
3.3.2找到要设置动画的元素，并且调用关键帧声明动画
1.设置关键帧：
@keyfrmes 动画名称（自己起）{
from{css样式}
百分数{css}
to{css}
}
也可以这样写
@keyfrmes 动画名称（自己起）{
0%{css样式}
百分数{css}
100%{css}
}
2.调用关键帧
语法：
animation: 动画名称 过渡时间 过渡方式 延迟时间 播放次数 播放方向 播放状态 动画时间外属性
1.动画名称 比如说 spread 自己起的名字
2.过渡时间 3s 5s 什么的
3.过渡方式
ease:默认 speed逐渐变慢
linear:匀速运动 speed恒定
ease-in:逐渐显现效果 speed逐渐变快
ease-out:逐渐隐藏效果 speed逐渐变慢
ease-in-out:逐渐显现后逐渐隐藏效果 speed先快后来变慢
4.延迟时间 3s 什么的
5.播放次数 4 6 42 还有个值infinite无限次
6.播放方向 主要两个值，normal动画都是循环向前播放，比如说动画为播放三次颜色渐变为红黄蓝，就是 红黄蓝 红黄蓝 红黄蓝
另一个值alternate偶数向前，奇数反方向播放，比如说动画为播放三次颜色渐变为红黄蓝，就是 红黄蓝 蓝黄红 红黄蓝 例如弹跳动画
7.播放状态 running使暂停的动画重新播放 pasued使动画暂停
8.动画时间外属性 取值forwards backwards
forwards 动画结束后继续应用最后的关键帧
backwards动画开始时迅速应用初始帧 但好像并没看出什么区别 雾)
both 就是上面这两种情况都有
例子
div{
width: 100px;
height: 100px;
background: red;
}
@-webkit-keyframes spread{
from{width: 0px;
-webkit-transform: translate(100px,100px);
}
25%{
width: 25px;
-webkit-transform: translate(200px,200px);
}
50%{
width: 50px;
-webkit-transform: translate(300px,300px);
}
75%{
width: 75px;
-webkit-transform: translate(200px,200px);
}
to{
width: 100px;
transform: translate(100px,100px);
}
}
div{
-webkit-animation: spread 2s linear;
}
注意：@-webkit-keyframes 前缀写在@后面
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
