框架集
框架集和內(nèi)聯(lián)框架的作用類似儒喊，都是用于在一個頁面中引入其他的外部的頁面
框架集可以同時引入多個頁面镣奋，而內(nèi)聯(lián)框架只能引入一個
在h5標(biāo)準(zhǔn)中，推薦使用框架集怀愧，而不使用內(nèi)聯(lián)框架
使用frameset來創(chuàng)建一個框架集侨颈，注意frameset不能和body出現(xiàn)在同一個頁面中
所以要使用框架集，頁面中就不可以使用body標(biāo)簽
屬性：
rows芯义，指定框架集中的所有的框架哈垢，一行一行的排列
cols， 指定框架集中的所有的頁面扛拨，一列一列的排列
這兩個屬性frameset必須選擇一個耘分，并且需要在屬性中指定每一部分所占的大小
frameset中也可以再嵌套frameset
frameset和iframe一樣，它里邊的內(nèi)容都不會被搜索引擎所檢索
所以如果搜索引擎檢索到的頁面是一個框架頁的話绑警，它是不能去判斷里邊的內(nèi)容的
使用框架集則意味著頁面中不能有自己的內(nèi)容求泰，只能引入其他的頁面
而我們每單獨加載一個頁面，瀏覽器都需要重新發(fā)送一次請求计盒，引入幾個頁面就需要發(fā)送幾次請求拜秧，用戶的體驗比較差
如果非得用建議使用frameset而不使用iframe
在IE6中對圖片格式png24支持度不高，如果使用的圖片格式是png24章郁，則會導(dǎo)致透明效果無法正常顯示
解決方法：
1.可以使用png8來代替png24枉氮，即可解決問題，但是使用png8代替png24以后暖庄，圖片的清晰圖會有所下降
2.使用JavaScript來解決該問題聊替，需要向頁面中引入一個外部的JavaScript文件，然后在寫一下簡單的JS代碼培廓，來處理該問題
CSS3圓角惹悄、陰影、rgba
CSS3圓角
設(shè)置某一個角的圓角肩钠，比如設(shè)置左上角的圓角：
border-top-left-radius:30px 60px;
同時分別設(shè)置四個角： border-radius:30px 60px 120px 150px;
設(shè)置四個圓角相同：
border-radius:50%;
CSS3陰影
box-shadow：h-shadow v-shadow blur spread color inset;
分別設(shè)置陰影：水平偏移 垂直偏移 羽化大小 擴展大小 顏色 是否內(nèi)陰影
<style type="text/css">
.box{
width:200px;
height:50px;
background-color:gold;
/* box-shadow:10px 10px 5px 2px pink inset; */
box-shadow:10px 10px 5px 2px pink;
}
</style>
......
<div class="box"></div>
<!-- 給盒子加上了粉紅色的陰影 -->
rgba（新的顏色值表示法）
1泣港、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
2暂殖、rgba(0,0,0,0.1) 前三個數(shù)值表示顏色，第四個數(shù)值表示顏色的透明度
CSS3 animation動畫
1当纱、@keyframes 定義關(guān)鍵幀動畫
2呛每、animation-name 動畫名稱
3、animation-duration 動畫時間
4坡氯、animation-timing-function 動畫曲線
linear 勻速
ease 開始和結(jié)束慢速
ease-in 開始是慢速
ease-out 結(jié)束時慢速
ease-in-out 開始和結(jié)束時慢速
steps 動畫步數(shù)
5晨横、animation-delay 動畫延遲
6、animation-iteration-count 動畫播放次數(shù) n|infinite
7箫柳、animation-direction
normal 默認動畫結(jié)束不返回
Alternate 動畫結(jié)束后返回
8手形、animation-play-state 動畫狀態(tài)
paused 停止
running 運動
9、animation-fill-mode 動畫前后的狀態(tài)
none 不改變默認行為
forwards 當(dāng)動畫完成后悯恍，保持最后一個屬性值（在最后一個關(guān)鍵幀中定義）
backwards 在 animation-delay 所指定的一段時間內(nèi)库糠，在動畫顯示之前，應(yīng)用開始屬性值（在第一個關(guān)鍵幀中定義）
both 向前和向后填充模式都被應(yīng)用
10涮毫、animation:name duration timing-function delay iteration-count direction;同時設(shè)置多個屬性
舉例：（人物走路動畫）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>走路動畫</title>
<style type="text/css">
.box{
width:120px;
height:180px;
border:1px solid #ccc;
margin:50px auto 0;
position:relative;
overflow:hidden;
}
.box img{
display:block;
width:960px;
height:182px;
position: absolute;
left:0;
top:0;
animation:walking 1.0s steps(8) infinite;
}
@keyframes walking{
from{
left:0px;
}
to{
left:-960px;
}
}
</style>
</head>
<body>
<div class="box"><img src="images/walking.png"></div>
</body>
</html>
CSS3 transition動畫（過渡動畫）
1曼玩、transition-property 設(shè)置過渡的屬性，比如：width height background-color
2窒百、transition-duration 設(shè)置過渡的時間黍判，比如：1s 500ms
3、transition-timing-function 設(shè)置過渡的運動方式
- linear 勻速
- ease 開始和結(jié)束慢速
- ease-in 開始是慢速
- ease-out 結(jié)束時慢速
- ease-in-out 開始和結(jié)束時慢速
- cubic-bezier(n,n,n,n)
- 比如：cubic-bezier(0.845, -0.375, 0.215, 1.335)
- 曲線設(shè)置網(wǎng)站：https://matthewlein.com/ceaser/
4篙梢、transition-delay 設(shè)置動畫的延遲
5顷帖、transition: property duration timing-function delay 同時設(shè)置四個屬性
- 舉例：
<style type="text/css">
.box{
width:100px;
height:100px;
background-color:gold;
transition:width 300ms ease,height 300ms ease 300ms,background-color 300ms ease 600ms;
}
.box:hover{
width:300px;
height:300px;
background-color:red;
}
</style>
......
<div class="box"></div>
定義頁面內(nèi)滾動跳轉(zhuǎn)
頁面內(nèi)定義了“id”或者“name”的元素，可以通過a標(biāo)簽鏈接到它的頁面滾動位置渤滞，前提是頁面要足夠高贬墩，有滾動條，且元素不能在頁面頂部妄呕，否則頁面不會滾動陶舞。
<a href="#mao1">標(biāo)題一</a>
......
......
<h3 id="mao1">跳轉(zhuǎn)到的標(biāo)題</h3>
CSS3 transform變換
1、translate(x,y) 設(shè)置盒子位移
2绪励、scale(x,y) 設(shè)置盒子縮放
3肿孵、rotate(deg) 設(shè)置盒子旋轉(zhuǎn)
4、skew(x-angle,y-angle) 設(shè)置盒子斜切
5疏魏、perspective 設(shè)置透視距離
6停做、transform-style flat | preserve-3d 設(shè)置盒子是否按3d空間顯示
7、translateX大莫、translateY蛉腌、translateZ 設(shè)置三維移動
8、rotateX、rotateY烙丛、rotateZ 設(shè)置三維旋轉(zhuǎn)
9舅巷、scaleX、scaleY河咽、scaleZ 設(shè)置三維縮放
10钠右、tranform-origin 設(shè)置變形的中心點
11、backface-visibility 設(shè)置盒子背面是否可見
舉例：（翻面效果）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>翻面</title>
<style type="text/css">
.box{
width:300px;
height:272px;
margin:50px auto 0;
transform-style:preserve-3d;
position:relative;
}
.box .pic{
width:300px;
height:272px;
position:absolute;
background-color:cyan;
left:0;
top:0;
transform:perspective(800px) rotateY(0deg);
backface-visibility:hidden;
transition:all 500ms ease;
}
.box .back_info{
width:300px;
height:272px;
text-align:center;
line-height:272px;
background-color:gold;
position:absolute;
left:0;
top:0;
transform:rotateY(180deg);
backface-visibility:hidden;
transition:all 500ms ease;
}
.box:hover .pic{
transform:perspective(800px) rotateY(180deg);
}
.box:hover .back_info{
transform:perspective(800px) rotateY(0deg);
}
</style>
</head>
<body>
<div class="box">
<div class="pic"><img src="images/location_bg.jpg"></div>
<div class="back_info">背面文字說明</div>
</div>
</body>
</html>
圖片文字遮罩库北，擴展二級菜單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片文字遮罩</title>
<style type="text/css">
.box{
width: 200px;
height: 300px;
margin: 0px auto 0;
border: 1px solid #000;
position: relative;
/*overflow: hidden;*/
}
.box img{
width: 200px;
height: 300px;
}
.box .pic_info{
width: 200px;
height: 200px;
background-color: #000;
color: #fff;
position: absolute;
left: 200px;
top: 0px;
transition: all 500ms cubic-bezier(0.470, -0.600, 0.475, 1.605);
background-color: rgba(0,0,0,0.5);
display: none;
}
.box:hover .pic_info{
/*top: 150px;*/
display: block;
}
.box .pic_info p{
margin: 20px;
line-height: 30px;
}
</style>
</head>
<body>
<div class="box">
<img src="img/location_bg.jpg" alt="花朵">
<div class="pic_info">
<p>圖片說明：這是一朵花圖片說明：這是一朵花圖片說明：這是一朵花圖片說明：這是一朵花</p>
</div>
</div>
<div class="box">
<img src="img/location_bg.jpg" alt="花朵">
<div class="pic_info">
<p>圖片說明：這是一朵花圖片說明：這是一朵花圖片說明：這是一朵花圖片說明：這是一朵花</p>
</div>
</div>
</body>
</html>
