框架集
框架集和內(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
ie6png的修復(fù)
- 在IE6中對圖片格式png24支持度不高档桃，如果使用的圖片格式是png24，則會導(dǎo)致透明效果無法正常顯示
解決方法：
1.可以使用png8來代替png24憔晒，即可解決問題藻肄，但是使用png8代替png24以后蔑舞，圖片的清晰圖會有所下降
2.使用JavaScript來解決該問題，需要向頁面中引入一個外部的JavaScript文件嘹屯，然后在寫一下簡單的JS代碼攻询，來處理該問題
以下代碼只會在IE6中執(zhí)行，其他瀏覽器中無效 -->
[if IE 6]
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix("div,img");
</script>
條件Hack
- 有一些情況州弟，有一些特殊的代碼我們只需要在某些特殊的瀏覽器中執(zhí)行钧栖，而在其他的瀏覽器中不需要執(zhí)行，這時就可以使用CSS Hack來解決該問題
- CSS Hack實際上指的是一種特殊的代碼婆翔，這段代碼只在某些瀏覽器中可以識別拯杠，而其他瀏覽器不能識別，通過這種方式浙滤，來為一些瀏覽器設(shè)置特殊的代碼
條件Hack,它只對IE瀏覽器有效阴挣，其它的瀏覽器都會將它識別為注釋IE10及以上的瀏覽器已經(jīng)不支持這種方式
- 以下內(nèi)容只會出現(xiàn)在IE6中
[if IE 6]
<p>為了您和家人的健康，請遠(yuǎn)離IE6７睦啊畔咧！</p>
<![endif]
[if IE 8]
<p>當(dāng)前瀏覽器是IE8！揖膜！</p>
[endif]
[if lt IE 9]
<p>該標(biāo)簽會在IE9以下的瀏覽器中顯示</p>
[endif]
[if gte IE 9]
<p>該標(biāo)簽會在IE9及以上的瀏覽器中顯示</p>
[endif]
[if lte IE 9]
<p>該標(biāo)簽會在IE9及以下的瀏覽器中顯示</p>
[endif]
[if ! IE 6]
<p>你的瀏覽器不是IE6</p>
[endif]
屬性hack
- 假設(shè)在IE6中需要將背景顏色設(shè)置為黃色才能達(dá)到和其它瀏覽器相同的效果
希望黃色背景只在IE6中生效
在樣式前添加一個下劃線誓沸，則該樣式只有IE6及以下的瀏覽器才可以識別
/*_background-color: yellow;*/
/*添加了*的樣式只有IE7及以下的瀏覽器認(rèn)識*/
/**background-color: yellow;*/
/*在樣式最后添加一個\0，則只有IE8及以上的瀏覽器才能識別*/
/*background-color: yellow\0;*/
/*
CSS Hack不到萬不得已的情況盡量不要使用
*/
- 在選擇器前添加* html 則該選擇器只有IE6可以識別
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è)置陰影：水平偏移 垂直偏移 羽化大小 擴(kuò)展大小 顏色 是否內(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 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>
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>
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 默認(rèn)動畫結(jié)束不返回
- Alternate 動畫結(jié)束后返回
8履恩、animation-play-state 動畫狀態(tài)
- paused 停止
- running 運動
9、animation-fill-mode 動畫前后的狀態(tài)
- none 不改變默認(rèn)行為
- 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>
動畫中使用的圖片如下：
CSS瀏覽器前綴
為了讓CSS3樣式兼容绽昏，需要將某些樣式加上瀏覽器前綴：
-ms- 兼容IE瀏覽器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari
比如：
div
{
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
自動添加瀏覽器前綴
目前的狀況是，有些CSS3屬性需要加前綴俏脊，有些不需要加全谤，有些只需要加一部分，這些加前綴的工作可以交給插件來完成联予，比如安裝： autoprefixer
Sublime text 中安裝 autoprefixer 執(zhí)行 preferences/key Bindings-Users 設(shè)置快捷鍵 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" } 通過此工具可以按照最新的前綴使用情況給樣式自動加前綴啼县。
