1.5. 多栏布局column
1.5.1. 基本概念
所谓多栏布局，就是一个盒子设置栏宽属性或栏数量属性，就构成多栏布局，则其中的内容，会先在第一栏展示，第一栏展示满后，再展 示到第二栏，以此类推。
多栏布局最常见的就是杂志或报纸上常见的“分栏版面”。比如杂志最常用的是分为两栏。
多栏布局通常用于盒子内部主要以文字（行内元素）为主的情形。
给一个盒子设定栏宽属性或栏数量属性（二选一），就可以实现多栏布局效果。
通常效果类似这样：
1.5.2. 主要属性
栏宽度属性column-width
设定分栏布局中一个栏的宽度值；实际宽度会根据外层盒子的宽度有所调整（可能变大）。
栏数量属性column-count
设定分栏布局中的总栏数。
columns属性：
上述column-width和column-count的综合属性；
使用形式：columns: 栏宽值 栏目数；
实际表现上，当总宽度大于等于“栏宽x栏目数”时，栏目数固定，栏宽可能会有所调整（变大）。
当总宽度小于“栏宽x栏目数”时，栏目数会减少（保证栏宽不小于设定的栏宽）。
栏间隙属性column-gap
设定栏与栏之间的宽度值，默认是font-size大小（比如14px）
栏分割线属性column-rule
栏分割线属性，就是两栏之间的线，如果不设定默认就是“空的”，就没有分割线，只有间隙（gap）。
栏分割线属性类似边框线（但只是一条线），可以设定：线宽，线型，线色。
有如下几个属性：
column-rule-width：设定线宽，比如1px，5px；
column-rule-style：设定线型，比如solid，dashed，dotted；
column-rule-color：设定线色，比如red， #ff9966， rgb(200,100,0)
column-rule：上述3个属性的综合属性。
1.5.3. 应用案例
实现如下图示的分栏布局效果。
1.6. 弹性布局flex
1.6.1. 基本概念
弹性布局是指，可以设定一个容器盒子中的若干个（数量可变的）子盒子，在父盒子中的横向或纵向有序整齐排列。其典型应用就是页面中的导航布局的实现，如下图所示：
弹性布局的实现，主要是在父盒子（容器盒子）上定义相应的属性，则其内部的子盒子就能够按照所定义的样式进行显示。
1.6.2. 主要属性
弹性布局的主要属性设置包括如下几个：
display: flex;
说明：设置盒子的显示模式为弹性盒模型，即该盒子成为了弹性盒模式的容器盒子。
flex-direction:
说明：设置弹性盒模式的子盒子的排列方式，有如下4个方式（4个属性值）：
row：横向排列，
row-reverse：横向排列，但顺序反向
column：纵向排列
column-reverse：纵向排列，但顺序反响
flex-wrap：
说明：设置弹性盒模式的子盒子超出时的换行特性，常用属性值有：
nowrap：不换行，尽量在一行显示，这是默认值。
此时有可能会超出父盒子（当子盒子有最小宽度设置时）。
wrap：自动换行。
wrap-reverse：换行，但反向显示（即其实显示到上一行去了）
justify-content：
说明：设置子盒子的主轴方向的一行中的排布方式。
所谓主轴就是由flex-direction所决定的方向为主轴，对应另一个方向为辅轴。
假如flex-direction为row或row-reverse，则横向为主轴，纵向为辅轴。
假如flex-direction为column或column-reverse，则纵向为主轴，横向为辅轴。
常用属性值有：
flex-start：子盒子从所设定的起始位置开始排列出来，空隙留后面；
flex-end：子盒子从所设定的终止位置开始排列出来，空隙留前面；
center：子盒子完全从居中的位置开始排列出来，空隙留两边；
space-between：子盒子两边紧靠父盒子，空隙留在相互的中间且均等；
space-around：子盒子均衡布置，分布给每个盒子的空隙都一样。
图示如下：
两个重要概念：主轴，辅轴
align-content：
说明：设置子盒子在辅轴方向的排布方式，大于一行且辅轴有多余空间时时才有效。
常用的属性值有：
flex-start：子盒子从所设定的起始位置开始排列出来，空隙留后面；
flex-end：子盒子从所设定的终止位置开始排列出来，空隙留前面；
center：子盒子完全从居中的位置开始排列出来，空隙留两边；
space-between：子盒子两边仅靠父盒子，空隙留在相互的中间；
space-around：子盒子均衡布置，空隙均衡出现；
图示如下：
align-items：
说明：设置子盒子在当前行中辅轴方向的对齐方式。
flex-start：子盒子定位于所设定的起始位置，空隙留后面；
flex-end：子盒子定位于设定的终止位置，空隙留前面；
center：子盒子定位于居中的位置，空隙留两边；
baseline：子盒子定位于基准位置；
stretch：子盒子进行拉伸（充满纵轴）；
1.6.3. 应用案例
实现类似如下网页效果的版面布局：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
font-size:14px;
color:black;
list-style: none;
}
.page{
width:90%;
min-width:600px;
border:solid 1px red;
margin:0 auto;
}
nav ul{
display: flex;
justify-content:space-between;
background: gray;
margin:2px 0;
}
nav ul li{
background: purple;
}
.body{
display: flex;
}
.body>.left,
.body>.right{
width:200px;
background: yellow;
}
.body>.center{
background: pink;
border:solid 1px blue;
margin:0 15px;
/*这就是关键所在！！！*/
width:100%;
}
.body>.center>.c2,
.body>.center>.c4
{
display: flex;
justify-content:space-between;
}
.body>.center>.c2>div{
width:49%;
border:solid 1px green;
}
.body>.center>.c4>div{
width:32.5%;
background: orange;
}
</style>
</head>
<body>
<div class="page">
<header>头部</header>
<nav>
<ul>
<li>首页</li>
<li>关于我们</li>
<li>新闻公告新闻公告</li>
<li>产品介绍</li>
<li>客户服务</li>
</ul>
</nav>
<div class="body">
<div class="left">左</div>
<div class="center">
<div class="c1">中间1</div>
<div class="c2">
<div>c2a</div>
<div>c2b</div>
</div>
<div class="c3">中间2</div>
<div class="c4">
<div>c4a</div>
<div>c4b</div>
<div>c4c</div>
</div>
<div class="c5">中间3</div>
</div>
<div class="right">右</div>
</div>
<footer>底部</footer>
</div>
</body>
</html>
1.7. 2D变换transform（2D）
1.7.1. 基本概念
2D变换的基本含义是：将浏览器页面（电脑屏幕所在面）当做一个二维平面，然后，通过CSS的设置，使网页元素能够在这个平面上进行“形状变换”。
简单说就是，在一个元素的“本来”外观表现上，可以对其实行：位移，旋转，缩放，斜拉变形等。
比如一个简单的“正常盒子”，可以变换为如下一些形式：
1.7.2. 主要属性
transform：
这是最主要的变换属性；其实所有变换都是通过这个属性，使用不同的值来实现的。
而所用不同的值，主要就是指定不同的变换函数（一个单词），以及所需要变换的数值；
常用2D变换形式如下：
transform: translatex(值)： 将元素水平移动给定的值；
transform: translatey(值)： 将元素垂直移动给定的值；
transform: translate(x值，y值)： 同时进行水平和垂直移动；
transform: rotate(角度值)： 将元素旋转给定的角度；
旋转的方向是：正值为顺时针方向，负值为逆时针方向；
transform: scalex(比例值)： x方向进行缩放；
transform: scaley(比例值)： y方向进行缩放；
transform: scale(x比值, y比值): 同时进行水平和垂直方向的缩放；
transform: skewx(角度值)： 将元素从x方向拉伸给定的角度；
transform: skewy(角度值)： 将元素从y方向拉伸给定的角度；
transform: skew(x角度,y角度): 将元素从x和y方向拉伸给定的角度；
特别注意：
1，对一个元素可以同时进行多项变换。
2，进行多项变换时，多个变换属性值要一并写在一起，相互之间用空格隔开，类似这样：
transform: translatex(5px) translatey(10px) rotate(20deg) scale(1.5, 2);
3，对于进行了变换的元素，虽然形状或位置都可能变了，但并不影响其他元素(即不影响布局效果)。
transform-origin：
指定变换时的“原点”（基点）；默认是该变换元素的“中心点”（center, center）；形式：
transform-origin：水平坐标 垂直坐标；
其中： 水平坐标可以用一个长度值，或百分比，或left，center，right；
垂直坐标可以用一个长度值，或百分比，或top，center，bottom；
1.7.3. 案例
将如下一张图片，实现如下所述的2D变换要求：
以图像左上角为原点，旋转15度，并左移20px，而后将x方向缩小为0.7倍；
最终效果类似这样：
1.8. 3D变换transform（3D）
1.8.1. 基本概念
3D变换是在2D变换的基础上，再加上一个维度（z轴），构成了三维空间。
新加上的这个z轴，是跟网页页面（电脑屏幕）垂直的那个方向，也就是眼睛到屏幕的“垂直线”。
z轴的正方向是从屏幕到眼睛的方向，如下图所示：
这就相当于将网页元素（一个矩形的平面）置于3D空间中，并对其实行某种变换。
1.8.2. 主要属性
3D变换仍然还使用2D变换的2个属性（transform和transform-origin），不过在transform的属性值中，又增加了若干变换函数，以达到在3D空间中将盒子进行某种变换操作的目的。
另外，对于3D变换，还会多出来几个属性，分别用于设定3D变换场景下所需要的一些特征信息。
3D变换的主要属性有：
transform-style：
用于设定元素变换的方式（2D还是3D），默认是flat（平面，也就是2D）；
设置为preserve-3d，就可以实现3D变换。
注意：该属性应该设置在变换元素的父级元素上。
perspective：
透视距离，用于设定观察3D视图时眼睛离屏幕（也就是z=0）的距离，即观察点的远近。
默认透视距离是“无穷大”，即最远处。
注意：该属性应该设置在变换元素的上级元素上。
perspective-origin：
透视点，即观察3D视图时眼睛的位置，也就是眼睛直对屏幕的那个点在（x，y）坐标系上的坐标值。
默认为（center，center），也就是父元素的中心点。
注意：该属性应该设置在变换元素的上级素上。
transform-orgin
含义跟2D变换一样，用于指定元素变换时的“原点”（基点）；
transform
含义跟2D变换一样，只是多了一些有关3D变换的变换函数，主要有：
translateX(x), translateY(y), translateZ(z), translate3d(x, y, z)： 移动变换
rotateX(x角度), rotateY(y角度), rotateZ(z角度), rotate3d(x, y, z, deg)：旋转变换；其旋转规则为：
左手“抓住”某轴，大拇指指向该轴正方向，则正值会沿其余手指的方向旋转，否则相反；
rotate3d中，x，y，z是数值，是相对大小，deg才是角度。
scaleX(x), scaleY(y), scaleZ(z), scale3d(x, y, z)：缩放变换
1.8.3. 案例
制作一个“美女大围墙”，大致如下所示：
（注意：是若干张图片所围成的一个3D效果的贴图墙效果）
<style>
.box{
border:solid 1px red;
width: 800px;
height:500px;
margin:10px auto ;
padding-top:50px;
}
.box>.pic{
border:solid 2px blue;
width:200px;
height:300px;
position:relative;
margin:0 auto;
perspective: 1000px;
perspective-origin:center -100px;
transform-style:preserve-3d;
}
.box>.pic>img{
width:200px;
height:300px;
position:absolute;
left:0;
}
.box>.pic>img:nth-child(1){
transform:rotatey(0deg) translatez(300px);
}
.box>.pic>img:nth-child(2){
transform:rotatey(40deg) translatez(300px);
}
.box>.pic>img:nth-child(3){
transform:rotatey(80deg) translatez(300px);
}
.box>.pic>img:nth-child(4){
transform:rotatey(120deg) translatez(300px);
}
.box>.pic>img:nth-child(5){
transform:rotatey(160deg) translatez(300px);
}
.box>.pic>img:nth-child(6){
transform:rotatey(200deg) translatez(300px);
}
.box>.pic>img:nth-child(7){
transform:rotatey(240deg) translatez(300px);
}
.box>.pic>img:nth-child(8){
transform:rotatey(280deg) translatez(300px);
}
.box>.pic>img:nth-child(9){
transform:rotatey(320deg) translatez(300px);
}
</style>
</head>
<body>
<div class="box">
<div class="pic">
<img src="images/girl1.jpg" alt="">
<img src="images/girl2.jpg" alt="">
<img src="images/girl3.jpg" alt="">
<img src="images/girl4.jpg" alt="">
<img src="images/girl5.jpg" alt="">
<img src="images/girl6.jpg" alt="">
<img src="images/girl7.jpg" alt="">
<img src="images/girl8.jpg" alt="">
<img src="images/girl9.jpg" alt="">
</div>
</div>
多栏布局：
对盒子中的以文本为主的内容实行自动的多栏效果呈现。
其核心属性是：column-count, column-width
间隙宽度：column-gap
间隔线： column-rule
弹性布局：
就是实现一个盒子中的子盒子的横向多列，以及纵向多行的布局效果。
核心属性：diaplay:flex
flex-direction：设定方向
flex-wrap：设定换行
justify-content：解决一行内中的子盒子在主轴的排布问题
flex-start, flex-end, center, space-between, space-around
align-content：解决纵向（辅轴）上多行的排布问题
flex-start, flex-end, center, space-between, space-around
align-items：
解决的是一行中的子盒子在辅轴上的排布问题。
2D变换：
transform:
位移变换：translatex(), translatey(), translate（x，y）； //长度值
旋转：rotate(角度)
缩放：scalex(), scaley(), scale(x, y) //比例值
拉伸：skewx(), skewy(), skew(x角度， y角度)； 角度值
transform-origin：设定变换的原点。
3D变换：
transform-style：preserve-3d；
perspective：距离； //设定观察举例
perspective-origin：x，y坐标； //设定观察点，是一个x，y平面的点。
transform多出几个变换函数。
1.9. 过渡效果transition
1.9.1. 基本概念
过渡（transition）是指，能够让一个元素的属性，从某个值，变换到另一个值的时候，不是表现为“立即实现”（突然变化），而是表现为“逐步变化”，则视觉效果看起来就是“动画效果”了。
过渡效果在应用中通常结合鼠标的动作而展现出来，最常见的就是使用“:hover”伪类。
过渡效果的设置主要设置如下几项：
参与过渡的属性名，过渡的时长，过渡的方式，以及过渡发生前的延迟时间。
基本演示案例：
1.9.2. 主要属性
transition-property：要用于实现过渡的属性名；
transition-duration：过渡时长；比如：2s；
transition-timing-function：过渡方式；常用的过渡方式如下所示：
linear：线性过渡。
ease：平滑过渡，这是默认值
ease-in：由慢到快。
ease-out：由快到慢。
ease-in-out：由慢到快再到慢。
transition-delay：过渡效果发生前的延迟时长，比如：1s。
transition：以上4属性的综合属性，并可以设定多属性过渡（比如位置和颜色同时变化)，形式如下：
transition：第1个过渡 [，第2个过渡] [，第3个过渡] [......]；
每个过渡的形式为：过渡属性名 过渡时长 [过渡方式] [延迟时长]；
代码示例：
示例1：
transition-property: width;
transition-duration: 2s;
transition-timing-function: ease-in-out;
trasitiion-delay: 3s;
示例2：
transition: width 2s ease-in-out 3s;
示例3：
transition-property: width, height, background ;
transition-duration: 2s 3s 3s;
transition-timing-function: ease ease-in-out linear;
trasitiion-delay: 3s 2s 0s;
示例4：
transition: width 2s ease , height 2s 2s linear, background 2s 4s ;
transition-timing-function的效果研究：
<style>
/*transition-timing-function：过渡方式；常用的过渡方式如下所示：
linear：线性过渡。
ease：平滑过渡，这是默认值
ease-in：由慢到快。
ease-out：由快到慢。
ease-in-out：由慢到快再到慢。
*/
.box{
width:1000px;
border:solid 1px red;
}
.box>div{
width:100px;
height:50px;
border:solid 1px blue;
margin:5px;
}
.box:hover>div{margin-left:850px;}
.box>.box1{transition: margin-left 10s linear;}
.box>.box2{transition: margin-left 10s ease;}
.box>.box3{transition: margin-left 10s ease-in;}
.box>.box4{transition: margin-left 10s ease-out;}
.box>.box5{transition: margin-left 10s ease-in-out;}
</style>
</head>
<body>
<div class="box">
<div class="box1">linear</div>
<div class="box2">ease</div>
<div class="box3">ease-in</div>
<div class="box4">ease-out</div>
<div class="box5">ease-in-out</div>
</div>
</body>
1.9.3. 案例
网页上一张图片在鼠标放上去的时候能够旋转360并放大到1.5倍，此过程在1秒内以过渡方式完成。
如下所示：
1.9.4. 综合案例：芝麻开门
完整代码请看文件“css-day7/4综合案例：芝麻开门(福倒了).html”。
1.10. 动画效果animation
1.10.1. 基本概念和语法
动画效果其实可以看着过渡效果的升华版：
过渡效果是实现元素在某个（或某些）属性的两个不同值之间的状态变化效果；
动画效果是预先定义好某个（或某些）属性的多个不同值之间的状态变化效果，并对之命名，而后可多次应用在不同的元素上。
简单说就是：
过渡效果是“实现某元素的某种状态变化效果”，
动画效果是“定义某种状态变化效果，并可拿来用”。
动画效果的基本语法如下：
<style>
@keyframes 动画名{
0% {属性设置。。。} /*表示动画的起始处/*
...... {属性设置。。。} /*这表示还可以设置中间的若干状态*/
100% {属性设置。。。} /*表示动画的结束处/*
}
选择器{
animation：动画名 动画播放设置； /*动画播放设置有若干项控制项*/
}
</style>
说明：
1，可以设置（定义）若干个动画(取不同名称)，后续都可以用在不同的元素上（选择器所决定）；
2，每个动画可以定义若干个关键状态（百分比决定），通常至少需要0%和100%；
3，每个状态可以定义若干个属性值，表示动画播放到该时刻时的元素外观表现；
4，属性的设置跟通常css的属性设置一样，比如：color:red; width:200px; transform:rotate(90deg);
5，动画播放设置中可以设置若干项，比如：持续时间，播放方式，延迟时间，是否循环，等等；
1.10.2. 主要属性
animation-name：动画名；
animation-duration：动画持续时间；
animation-timing-function：动画播放播放方式（效果），也有如下几个常用的效果名：
linear：线性过渡，就是匀速进行
ease：平滑过渡，这是默认值
ease-in：由慢到快。
ease-out：由快到慢。
ease-in-out：由慢到快再到慢。
animation-delay：动画播放前的延迟时间；
animation-iteration-count：动画播放循环次数，使用数字或infinite（无限）；
animation-direction：动画播放方向（正向还是反向），可用的值有：
normal：常规（就是从前往后播放）
reverse：反向（就是从后往前播放）
alternate：交替（就是先从前往后，再从后往前），播放次数大于1次才有意义
alternate-reverse：反向交替（就是先从后往前，再从前往后），播放次数大于1次才有意义
animation-fill-mode：动画停止（播放结束）时元素停留的状态，可用的值有：
forwards： 停留在前面（动画播放的结尾处）；
backwards： 停留在后面（动画播放的开时处）；
both： 两边都可停（动画停在哪边就哪边）；
animation-play-state：设置动画启动或暂停，有两个可用的值：
running： 运行状态（默认值），也就是运行动画效果；
paused： 暂停状态，也就是动画效果运行中停下来（此时如果需要还可以继续运行）；
animation：上述属性的综合属性，并依次按该顺序列出（不需要的项直接省略）；
举例1：
@keyframes ani1{
0%{ background:red; transform:rotate(0deg);}
100%{ background:blue; transform:rotate(360deg);}
}
.c1{
animation-name: ani1;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count:infinite;
}
举例2：
（本例跟上面例1的效果一样，无非是用了综合属性animation）
$keyframes ani1{
0%{ background:red; transform:rotate(0deg);}
100%{ background:blue; transform:rotate(360deg);}
}
.c1{
animation: ani1 3s ease-in-out infinite;
}
代码示例：
演示animation-direction，和animation-fill-mode：
<style>
@keyframes moveLeft2Right{
0%{
left:0px;
}
100%{
left:800px;
}
}
div{
border:solid 1px red;
width: 100px;
height:50px;
margin:5px;
position:relative;
left:0px;
animation-name:moveLeft2Right;
animation-timing-function:linear;
animation-duration: 5s;
animation-iteration-count:3;
}
.box1{
animation-direction: normal;
animation-fill-mode: forwards;
}
.box1:hover{
animation-play-state:paused;
}
.box2{
animation-direction: reverse;
animation-fill-mode: backwards;
}
.box3{
animation-direction: alternate;
animation-fill-mode: both;
}
.box4{
animation-direction: alternate-reverse;
animation-fill-mode: both;
}
</style>
</head>
<body>
<div class="box1">normal, forwards</div>
<div class="box2">reverse, backwards</div>
<div class="box3">alternate, both</div>
<div class="box4">alternate-reverse, both</div>
</body>
1.10.3. 案例
连续播放效果的代码：
<style>
@keyframes xuanzhuan{
0%{
transform:rotatex(-15deg) rotatey(0deg);
}
100%{
transform:rotatex(-15deg) rotatey(360deg);
}
}
.box{
border:solid 0px red;
width:960px;
margin:50px auto 10px;
perspective: 1200px;
perspective-origin: center center;
}
.box>.container{
border:solid 0px blue;
width:200px;
height:300px;
position: relative;
left:50%;
margin-left:-100px;
transform-style:preserve-3d;
transform:rotatex(-15deg);
animation-name: xuanzhuan;
animation-duration: 6s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.box>.container:hover{
animation-play-state: paused;
}
.box>.container>img{
width:200px;
height:300px;
position: absolute;
left:0;
top:0;
transform-origin: center center;
}
.box>.container>img:nth-child(1){transform: rotatey(0deg) translatez(300px)}
.box>.container>img:nth-child(2){transform: rotatey(40deg) translatez(300px)}
.box>.container>img:nth-child(3){transform: rotatey(80deg) translatez(300px)}
.box>.container>img:nth-child(4){transform: rotatey(120deg) translatez(300px)}
.box>.container>img:nth-child(5){transform: rotatey(160deg) translatez(300px)}
.box>.container>img:nth-child(6){transform: rotatey(200deg) translatez(300px)}
.box>.container>img:nth-child(7){transform: rotatey(240deg) translatez(300px)}
.box>.container>img:nth-child(8){transform: rotatey(280deg) translatez(300px)}
.box>.container>img:nth-child(9){transform: rotatey(320deg) translatez(300px)}
</style>
</head>
<body>
<div class="box" title="场景，舞台">
<div class="container" title="容器">
<img src="images/girl1.jpg" alt="">
<img src="images/girl2.jpg" alt="">
<img src="images/girl3.jpg" alt="">
<img src="images/girl4.jpg" alt="">
<img src="images/girl5.jpg" alt="">
<img src="images/girl6.jpg" alt="">
<img src="images/girl7.jpg" alt="">
<img src="images/girl8.jpg" alt="">
<img src="images/girl9.jpg" alt="">
</div>
</div>
</body>
一走一停播放效果的关键代码：
@keyframes xuanzhuan{
0%{transform:rotatex(-15deg) rotatey(0deg);}
/*表示从0%时间到2%时间，旋转从0到40deg，下同*/
2%{transform:rotatex(-15deg) rotatey(40deg);}
/*表示从2%时间到11%时间，旋转不变，即不旋转，下同*/
11%{transform:rotatex(-15deg) rotatey(40deg);}
13%{transform:rotatex(-15deg) rotatey(80deg);}
22%{transform:rotatex(-15deg) rotatey(80deg);}
24%{transform:rotatex(-15deg) rotatey(120deg);}
33%{transform:rotatex(-15deg) rotatey(120deg);}
35%{transform:rotatex(-15deg) rotatey(160deg);}
44%{transform:rotatex(-15deg) rotatey(160deg);}
46%{transform:rotatex(-15deg) rotatey(200deg);}
55%{transform:rotatex(-15deg) rotatey(200deg);}
57%{transform:rotatex(-15deg) rotatey(240deg);}
66%{transform:rotatex(-15deg) rotatey(240deg);}
68%{transform:rotatex(-15deg) rotatey(280deg);}
77%{transform:rotatex(-15deg) rotatey(280deg);}
79%{transform:rotatex(-15deg) rotatey(320deg);}
88%{transform:rotatex(-15deg) rotatey(320deg);}
90%{transform:rotatex(-15deg) rotatey(360deg);}
99%{transform:rotatex(-15deg) rotatey(360deg);}
}
补充案例1：
<style>
ul{
margin:0 auto;
padding:8px 0 0;
height:42px;
background: url(images/滑动门bg1.png) repeat-x;
}
ul>li{
list-style: none;
float:left;
height:50px;
padding:0 10px;
}
ul>li>a{
line-height: 33px;
height:33px;
display: inline-block;
color:white;
padding-left:15px;
background: url(images/滑动门bg2.png) left -48px no-repeat;
}
ul>li>a:hover{
background-position: left top;
}
ul>li>a>span{
line-height: 33px;
display: inline-block;
height:33px;
padding-right:15px;
background: url(images/滑动门bg2.png) right -48px no-repeat;
}
ul>li>a:hover>span{
background-position: right top;
}
</style>
</head>
<body>
<ul>
<li><a href=""><span>首页</span></a></li>
<li><a href=""><span> 三个字</span></a></li>
<li><a href=""><span>在线词典</span></a></li>
<li><a href=""><span>五个字标题</span></a></li>
</ul>
补充案例2（滑动门）：
<style>
.nav{
display:flex;
}
.nav>a{
display: inline-block;
height:35px;
padding-left:7px;
background: url(images/bg_r1_c1.png) left top no-repeat;
}
.nav>a:hover{
background-image: url(images/blue_r1_c1.png);
}
.nav>a>span{
display: inline-block;
height:35px;
line-height: 35px;
padding-right:25px;
background: url(images/bg_r1_c2.png) right top no-repeat;
}
.nav>a:hover>span{
background-image: url(images/blue_r1_c2.png);
}
</style>
</head>
<body>
<div class="nav">
<a href=""><span>首页</span></a>
<a href=""><span>三个字</span></a>
<a href=""><span>四字标题</span></a>
<a href=""><span>五个字标题</span></a>
</div>
补充案例3（手风琴效果）：
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
display: flex;
border:solid 1px red;
width:600px;
margin:0 auto;
}
.box>div{
/*下一行表示，如果容器盒子放下子盒子的设置宽度还有剩余，就去按该比例“分配”
这里，因为所有div都是1，所以就是均分剩余空隙*/
flex:1;
height:240px;
width:100px;
margin:1px;
border:solid 1px blue;
transition:flex 1s, background 1s;
}
.box>div:hover{
flex:1.5;
background: yellow;
}
</style>
</head>
<body>
<div class="box">
<div>内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1</div>
<div>内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2</div>
<div>内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3内容3</div>
<div>内容4内容4内容4内容4内容4内容4</div>
<div>内容5内容5内容5内容5内容5内容5内容5内容5内容5内容5内容5内容5内容5内容5内容5内容5内容5内容5内容5内容5内容5内容5</div>
</div>
</body>
2. 零碎或补遗或经验
2.1. 光标形状设置cursor
含义：
设置鼠标在某个盒子上的时候的光标形状。
形式：
cursor：光标形状名；
常用的光标形状名有：
default（默认）, pointer（手形）, text（文本编辑形）, help（帮助）, wait（等待）。
手册上可查更多：
在实际网页中，我们常常并不使用a标签，但也同样做出有a标签的效果（链接，手的形状）。
2.2. 盒子缩放zoom
含义：
用于设置某个盒子在其本来的大小基础上进行一定的大小缩放。
形式：
zoom: 缩放比例； //缩放比例可以是数字或百分比。
说明：
1，它是对整个盒子进行整体缩放，无法做到横向纵向单独控制的缩放。
对比：transform:scale()可以实现横向纵向单独控制的缩放。
2，zoom缩放的盒子是“实质上”改变了大小，因而也会影响其后续元素的位置。
对比：transfor:scale()m实现的缩放不会影响后续元素的位置，只是视觉上的改变。
2.3. 文字阴影text-shadow
形式：
box-shadow：水平偏移值 垂直偏移值 [模糊值] [颜色] ；
说明：
1，偏移值可以为负。
2，模糊值不能为负。
3，颜色如不设置，则默认随字体颜色。一般设置为灰色（gray）比较逼真。
4，可以设置多个阴影，每个阴影的设置相互用逗号（，）隔开就可以。
举例：
.box1{ text-shadow: 2px 2px red; }
.box2{ text-shadow: 2px 5px 2px #00FFFF; }
.boxe{ text-shadow: 2px 5px 0 red, -2px -2px 0 #f0f0f0;
演示案例：
<style>
.box1{
font-size:40px;
text-shadow: 2px 2px 0px red;
}
.box2{
font-size:40px;
text-shadow: 2px 2px 0px red, -2px -2px 0px red;
}
.box3{
font-size:100px;
background: gray;
color:gray;
text-shadow:-2px -2px 0 white, 2px 2px 0 black;
}
.box4{
font-size:100px;
background: gray;
color:gray;
text-shadow:-2px -2px 0 black, 2px 2px 0 white;
}
</style>
</head>
<body>
<div class="box1">一些文字，some texts</div>
<div class="box2">一些文字，some texts</div>
<hr>
<h3>凹凸文字效果</h3>
<div class="box3">一些文字，some texts</div>
<div class="box4">一些文字，some texts</div>
</body>
结果如下所示：
彩色文字
本质： 就是用“图”作为文字“笔画线”的背景！
这里的图，我们用这个：background-image: linear-gradient（）；
再 结合这个属性：background-clip：text； /*背景从文字笔画线以外裁切掉*/
以及结合这个属性：text-fill-color: transparent; //设置文字笔画线为透明色。
代码如下：
2.4. 文字溢出text-overflow
设置一行文字在一行显示不下但又不允许换行时的表现形式，有两个可用值：
text-overflow: clip | ellipsis
clip：直接切掉（不显示）；
ellipsis: 切掉后续部分并添加英文省略号（...）
如下所示：
注意：
使用该属性要求容器盒子设置overflow为非visible，width为非auto，且white-space为不允许换行（nowrap）。
white-space：用于设定文字在行尾碰到空格的时候，是否换行下来。
常用值：wrap（可换行，默认值）； no-wrap（不可换行）
2.5. 盒子模型box-sizing
含义：
所谓盒子模型，是指css中，设置一个盒子的宽高（width，height）值，是按盒子的“内容区”设置，还是按盒子的“边框区”设置的问题。
传统上，设置盒子的宽高指的是设置盒子内容区的宽高。
这个属性就是可以改变这个特性，可以将盒子的宽高属性，指定为是盒子的边框区域的宽高值。
可用值：
box-sizing: content-box; //内容模式，也就是传统的模式
box-sizing: border-box; //边框模式，设置宽高值（width，height）包括了border在内的范围。
内容模式的盒子实际占据宽度为：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right；
边框模式的盒子实际占据宽度为：
margin-left + width + margin-right；
此模式有时候称为“减模式”，就是实际内容区的宽度，是从设置的宽度（width）减去border和padding
高度方向同理。
新的盒模型案例：
<style>
/*假设：
1，整体宽度为300x280.
2， 主体灰色边框线为1px
3，公开课上面的红色边框线为2px。
4，头部区域高度（含边框线）为40px。
*/
.tab{
box-sizing:border-box;
width:300px;
border:1px solid gray;
border-top:none;
}
ul{
list-style: none;
}
ul>li{
text-indent: 25px;
background:url(images/tubiao.png) no-repeat 0px 0px;
}
.top{
overflow: hidden;/*清除浮动*/
}
.top>.left{
float:left;
box-sizing: border-box;
height:40px;
border-top: solid 2px red;
width:50%;
line-height: 38px;
text-align: center;
font-size:18px;
color:red;
}
.top>.right{
float:right;
box-sizing: border-box;
height:40px;
border: solid 1px gray;
border-right:none;
width:50%;
padding-right:15px;
line-height: 38px;
text-align: right;
background:#e0e0e0
}
</style>
2.6. css初始化
各浏览器公司所开发的浏览器，由于各种原因，对html标准的最终实现效果，总是有或多或少的差异性。
则我们在开发中，通常的做法是将所有可能的这些差异性，通过一定的css样式设定，全部设置为的“相同效果”，这就是所谓的css初始化。
具体做法类似如下所示：
（假设此文件为：init.css）
*{
font-size:12px;
line-height:2em;
font-family: 微软雅黑,宋体,仿宋,”times New Roman”;
margin:0;
padding:0;
border:0;
list-style:none;
list-style-position:inside;
}
实际应用中，css初始化文件的具体写法并没有标准，因人而异，因需而定。
则在网页的样式设置中，通常都是首先引入该css初始化文件，然后再写具体页面中所需要的样式。
这些写的好处就是：页面中所有元素的表现都全部按自己的设定，而不再依赖于浏览器的默认设置。这样就消除了不同浏览器的差异性，使网页表现更具有一致性。
具体代码类似如下所示：
<link rel=”stylesheet” href=”init.css” >
<style>
/*这里开始写本网页所需要的css样式设定*/
</style>
也可能这样：
<link rel=”stylesheet” href=”init.css” >
<link rel=”stylesheet” href=”public” > //若干网页的公共的样式
<link rel=”stylesheet” href=”product.css” > //当前网页的主要样式
<style>
/*这里可以写一些比较零碎，又可能变化比较频繁的部分样式*/
</style>
2.7. css精灵技术
当网页上有若干的具有不同背景图的“小盒子”，按常规的做法就是，每个小盒子的背景图，都是一张独立的图片。
如果将这些小图片“整合”到一张图上（成为一张相对大的图片），则这些小盒子的背景图，都可以只用这一张大图，只要做背景的时候，进行适当的定位就可以了。
如下图所示：
假设网页上不同位置需要使用到上面大图中的各个小图，如下所示。此时这些小盒子的背景图都可以用上面一张大图（想想怎么做的？）：
这样做的好处就是：该大图只要从服务器下载一次，则该网页的多个地方都可以使用了。这样的做法可以大大减少从服务器下载多个图片文件所需要的性能开销，也就是提升了服务器的效率。
这就是“css精灵技术”。
<style>
.news{
list-style: none;
padding:0;
}
.news>li{
padding-left:50px;
height: 54px;
}
.news>li>a{
line-height:54px;
font-size:30px;
padding-left:5px;
}
.news>li::before{
content: "";
display: inline-block;
height: 54px;
width:40px;
vertical-align: middle;
background-image:url(images/图片1.png);
background-repeat: no-repeat;
background-position: -134px -134px;
}
.news>li:nth-child(1)::before{
background-position: -139px -54px;
}
.news>li:nth-child(2)::before{
background-position: -73px -54px;
}
.news>li:nth-child(3)::before{
background-position: -67px -134px;
}
</style>
</head>
<body>
<ul class="news">
<li><a href="">新闻标题0001</a></li>
<li><a href="">新闻标题0002</a></li>
<li><a href="">新闻标题0003</a></li>
<li><a href="">新闻标题0004</a></li>
<li><a href="">新闻标题0005</a></li>
<li><a href="">新闻标题0006</a></li>
</ul>
</body>
2.8. 自定义字体
2.8.1. 引入外部（独立）字体
一般的网页中，通常使用浏览器内部具有的字体——浏览器也通常从操作系统获取可用字体。
但：
我们也可以给浏览器提供额外的字体（就类似提供图片一样），然后我们在网页中就可以引入并使用该字体！。
注：
网上有很多字体，有些免费，有些收费。
具体做法：
<style>
@font-face{
font-family: “自己给某字体取的名字XXFont”;
src : url(./某字体文件路径)； /*跟引入图片一样道理*/
}
某某选择器{
font-family: XXFont, 微软雅黑，宋体.....；
}
</style>
2.8.2. 使用图标字体
图标字体，其实就是类似前面Webdings字体一样！
某个图标有一个“形状”，然后使用的时候，就可以当做一个“字符”来用。
具体的做法类似这样：
<span class=”iconfont XX图标的class名” ></span>
具体详细的使用制作过程如下：
方式1（图标类方式）
1，到图标网站iconfont.cn上找到自己需要的图标，加入“购物车”。
2，第二步：到购物车中点击“
3，第三步：
解压后，找到其中的文件：iconfont.css，放入项目文件夹相关的位置（其他文件其实也可以放入）。
并引入：
<link rel="stylesheet" href="fonts/iconfont.css">
4，第四步：
在网页中使用一个空的行内元素（比如span，i，em等），加上如下class：
<span class=”iconfont 对应图标的class名”><span>
其中，对应图标的class可以从下载的压缩包中的文件“demo_fontclass.html”中查看到。
演示代码如下：
效果如下：
使用图标字体的第二种方式（unicode方式）！
1， 还是使用刚才下载的图标字体文件，解压。
2，还是引入刚才的iconfont.css文件： <link rel="stylesheet" href="fonts/iconfont.css">
3，网页中使用一个行内标签（比如span），其中内容为对应图标的unicode编码，并class为“iconfont”
如下所示：
<span class=”iconfont” ></span>
具体图标的unicode编码从这里找：
文件打开如下所示：
代码演示如下：
效果如下：
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
