iframe與雪碧圖的應用
iframe---框架標籤（在當前頁面顯示多個網頁）
一、iframe的屬性
1.scrolling（滾動條）:值為yes(有）,值為no(無)，預設為auto(需要的時候出現)。
2.frameboeder(是否有邊框）：預設值為1(有邊框)，值為0時無邊框。
3.align:對齊方式。
4.src：巢狀頁面地址。
5.width/height：巢狀頁面區域的寬高。
6.name：配合a的target屬性值等於iframe的name，可以讓a在超連結的跳轉開啟頁面時在iframe區域開啟
二、iframe的優缺點
1.優點：解決載入緩慢的第三方內容圖示和廣告等載入問題。
iframe無重新整理檔案上傳。
iframe跨域通訊。
2.缺點：iframe會阻塞主頁面的onload事件。
無法被一些搜尋引擎索引到。
頁面會增加伺服器的http請求。
會產生很多頁面，不容易管理。
三、程式碼示例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文件</title>
</head>
<body>
<iframe src="http://www.baidu.com" width="500" height="400" frameBorder="0" align="right" name="baidu"></iframe><br/>
<a href="http://www.baidu.com" target="baidu">百度</a>
<a href="http://www.taobao.com" target="baidu">淘寶</a>
</body>
</html>
雪碧圖
一、sprites（雪碧圖）原理
1.首先把網頁中一些背景圖片整合到一張圖片檔案中（png格式）
2.再利用CSS的"background-image"引入圖片，配合"background- repeat"禁止平鋪
3.最後利用css的"background-position"進行背景精確的定位出背景圖片的位置
二、優點、
1.減少網頁的http請求次數，並防止切換圖片出現的閃白
2、減少圖片的位元組數，並解決了圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要分別對每一個小元素進行命名
3、更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變
三、缺點
1.在寬屏，高解析度的螢幕下的自適應頁面，雪碧圖如果不夠寬，容易出現背景斷裂
2.在開發的時候，需要通過photoshop或其他工具測量計算每一個背景單元的精確位置
3.在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要修改整張合併的圖片
四、程式碼展示
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文件</title>
<style type="text/css">
body{background-color:yellow;}
.box1{width:208px; height:202px; background:url(img/pic1.png) no-repeat;}
.box1:hover{ background:url(img/pic2.png) no-repeat;}
.box4{width:208px; height:202px; background:url(img/all.png) no-repeat -32px -48px;}
.box4:hover{background:url(img/all.png) no-repeat -32px -284px;}
.box5{width:208px; height:202px; background:url(img/all.png) no-repeat -275px -48px;}
.box6{width:208px; height:202px; background:url(img/all.png) no-repeat -518px -48px;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</body>
</html>