標籤：載入速度 osi opera footer ati 基本原理 連結 友情 tool
第十五章 定位static靜態定位（不對它的位置進行改變，在哪裡就在那裡）
預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
fixed固定定位（參照物--瀏覽器視窗）---做 彈窗廣告用到
產生固定定位的元素，相對於瀏覽器視窗進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative（相對定位 ）（參照物以他本身）
產生相對定位的元素，相對於其正常位置進行定位。
absolute（絕對位置）(除了static都可以，找到參照物-->與它最近的已經有定位的父元素進行定位)
產生絕對位置的元素，相對於 static 定位以外的第一個父元素進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定
z-index
z-index 屬性設定元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
定位的基本思想: 它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置。
一切皆為框
區塊層級元素: div、h1或p元素 即：顯示為一塊內容稱之為 “塊框“ ;
行內元素: span,strong,a等元素 即：內容顯示在行中稱 "行內框";
使用display屬性改變成框的類型 即：display:block; 讓行內元素設定為區塊層級元素，display:none; 沒有框
相對定位：
如果對一個元素進行相對定位，它將出現在它所在的位置上。
通過設定垂直或水平位置，讓這個元素“相對於”它的起點進行移動
.adv_relative { position: relative; left: 30px; top: 20px; }
絕對位置：
元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位 的祖先元素，它的位置相對於最初的包含塊。.adv_absolute { position: absolute; left: 30px; top: 20px; }
、
第十六章 架構frameset架構：
<frameset> ---- 用來定義一個架構；雙標籤
不能和 <body> 一起使用
rows、cols屬性
rows 定義行表示架構有多少行（取值 px / % / * ）
cols 定義列表示架構有多少列（取值 px / % / * ）
frame子架構
src 顯示的網頁的路徑
name 架構名
frameborder 邊框線（取值 0 / 1）
<frame> ---- 表示架構中的某一個部分；單標籤，要跟結束標誌
<noframes>屬性
<noframes> 提供不支援架構的瀏覽器顯示body的內容；雙標籤
<frameset>
<frame src=“” />
<frame src=“” />
<frame src=“” />
<noframes>
<body>內容</body>
</noframes></frameset>
<iframe>內聯架構
iframe 元素會建立包含另外一個文檔的內聯架構（即行內架構）
允許和 body 一起使用
width 寬（取值 px / %）
height 高（取值 px / %）
name 架構名
frameborder 邊框線（取值 0 / 1）
src 顯示的網頁的路徑
opacity透明屬性
對於IE6/7/，使用filter:alpha(opacity:值;) 值為0-100
對於Webkit，Opera，Firefox，IE9+，使用opacity:值; 值為0-1
對於早期Firefox，使用-moz-opacity:值; 值為0-1
所以寫透明屬性時，一般寫法是
opacity
{
opacity:0.5;
filter:alpha(opacity：50);/*0-100*/
-moz-opacity:0.5; /*取值0-1*/-->針對早起版本的Firefox相容問題的解決}
border-radius圓角邊框屬性
border-radius:10px;
向 div 元素添加圓角邊框
box-shadow陰影屬性
box-shadow 屬性向框添加陰影製作效果,後面跟4個參數。
box-shadow:0px 0px 10px #000;
<embed>屬性
是HTML5中新增的標籤,媒體嵌入外掛程式標籤，可以通過<embed>插入音頻或視頻
<embed src=“media/music.mp3” />
格式.mid .wav .mp3等
CSS部分導圖總結
企業DIV使用頻率高的命名方法
網頁內容類別
---
注釋的寫法: /* Footer */ 內容區/* End Footer */
摘要: summary
箭頭： arrow
商標： label
網站標誌： logo
轉角/圓角： corner
橫幅廣告： banner
子功能表： subMenu
搜尋： search
搜尋方塊： searchBox
登入： login
登入條：loginbar
工具條： toolbar
下拉： drop
標籤頁： tab
當前的： current
列表： list
滾動： scroll
服務： service
提示資訊： msg
熱點：hot
新聞： news
小技巧： tips
下載： download
欄目標題： title
熱點： hot
加入： joinus
註冊： regsiter
指南： guide
友情連結： friendlink
狀態： status
著作權： copyright
按鈕： btn
夥伴： partner
投票： vote
左右中：left right center
標題: title
id的命名:
---
導航：nav
主導航：mainbav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
菜單：menu
子功能表：submenu
標題: title
摘要: summary
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
頁面結構
---
導航
標誌：logo
廣告：banner
登陸：login
登入條：loginbar
註冊：regsiter
搜尋：search
功能區：shop
標題：title
加入：joinus
狀態：status
按鈕：btn
滾動：scroll
標籤頁：tab
文章列表：list
提示資訊：msg
當前的: current
小技巧：tips
表徵圖: icon
注釋：note
指南：guild
服務：service
熱點：hot
新聞：news
下載：download
投票：vote
夥伴：partner
友情連結：link
著作權：copyright
功能
class的命名:
.barnews { }
.barproduct { }
.left { float:left; }
.bottom { float:bottom; }
.font12px { font-size: 12px; }
.font9px {font-size: 9pt; }
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
顏色:使用顏色的名稱或者16進位代碼,如
字型大小,直接使用"font+字型大小"作為名稱,如
對齊樣式,使用對齊目標的英文名稱,如
標題列樣式,使用"類別+功能"的方式命名,如
---
注意事項::
一律小寫;
盡量用英文;
不加中杠和底線;
盡量不縮寫，除非一看就明白的單詞.
---
推薦的 CSS 書寫順序：
color
font
text-decoration
text-align
vertical-align
white-space
other text
content
width
height
margin
padding
border
background
display
list-style
position
float
clear
顯示內容
自身屬性
文字屬性
CSS精靈原理以及應用
該圖片使用CSS background和background-position屬性渲染，這也就意味著你的標籤變得更加複雜了，圖片是在CSS中定義，而非<img>標籤。
CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。
一個簡單的例子：
一張圖片作出一個按鈕的三個狀態
一個連結用CSS做成按鈕的樣式，我們可以使用同一張圖片，完成按鈕的三個狀態，a:link，a:hover，a:active <a class="button" href="#">連結</a>
加入右側的圖片為：200px 65px的三個按鈕圖拼合而成的圖片button.png，從上到下一次為按鈕的普通、滑鼠滑過、滑鼠點擊的狀態。則可以使用CSS進行定義。
a { display:block;
width:200px;
height:65px;
line-height:65px; /*定義狀態*/
text-indent:-2015px; /*隱藏文字*/
background-image:url(button.png); /*定義背景圖片*/
background-position:0 0; /*定義連結的普通狀態，此時映像顯示的是頂上的部分*/
}
a:hover { background-position:0 -66px; /*定義連結的滑過狀態，此時顯示的為中間部分，向下取負值*/
}
a:active { background-position:0 -132px;
/*定 義連結的普通狀態，此時顯示的是底部的部分，向下取負值*/
}
更多的CSS雪碧，圖片更複雜，背景定位更精確。可能會用到大量的數值
如：background:url(nav.png) -180px 24pxno-repeat; 來達到更精確的定位
優點：
減少載入網頁圖片時對伺服器的請求次數
可以合并多數背景圖片和小表徵圖，方便在任何位置使用，這樣不同位置的請求只需要調用一個圖片，從而減少對伺服器的請求次數，降低伺服器壓力，同時提高了頁面的載入速度，節約伺服器的流量。
提高頁面的載入速度
sprite 技術的其中一個好處是圖片的載入時間(在有許多 sprite 時，單張圖片的載入時間)。由所需圖片拼成的一張GIF圖片的尺寸會明顯小於所有圖片拼合前的大小。單張的 GIF只有相關的一個色表，而單獨分割的每一張 GIF 都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張 JPEG 或者 PNG sprite 在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。
減少滑鼠滑過的一些bug
IE6不會主動預先載入滑鼠滑過即a:hover中的背景圖片，所以，如果使用多張圖片，滑鼠滑過會出現閃白的現象。使用CSS雪碧，由於一張圖片即可，所以不會出現這種現象。
不足：
CSS雪碧的最大問題是記憶體使用量
影響瀏覽器的縮放功能
拼圖維護比較麻煩
使CSS的編寫變得困難
CSS 雪碧調用的圖片不能被列印
錯誤得使用 Sprites 影響可訪問性
DIV+CSS學習筆記
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
