DIV CSS學習筆記 下

GIF/30K

第十五章 定位

static

靜態定位（不對它的位置進行改變，在哪裡就在那裡）

默認值。沒有定位，元素出現在正常的流中（忽略

top

,

bottom,

left, right

或者

z-index

聲明）。

fixed

固定定位（參照物--瀏覽器窗口）---做 彈窗廣告用到

生成固定定位的元素，相對於瀏覽器窗口進行定位。 元素的位置通過

"left"

,

"top"

,

"right"

以及

"bottom"

屬性進行規定。

relative

（相對定位 ）（參照物以他本身）

生成相對定位的元素，相對於其正常位置進行定位。

absolute

（絕對定位）(除了

static

都可以，找到參照物-->與它最近的已經有定位的父元素進行定位)

生成絕對定位的元素，相對於

static

定位以外的第一個父元素進行定位。

元素的位置通過 "

left"

,

"top"

,

"right"

以及

"bottom"

屬性進行規定

z-index

屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。

定位的基本思想: 它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器窗口本身的位置。

想要系統學習web前端和免費學習資料的 可以加裙六二三九六六八零六 學完有工作推薦

一切皆為框

塊級元素:

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; }

、

想要系統學習web前端和免費學習資料的 可以加裙六二三九六六八零六 學完有工作推薦

第十六章 框架

frameset

框架：

---- 用來定義一個框架；雙標籤

不能和

一起使用

rows

、

cols

屬性

rows

定義行表示框架有多少行（取值

px

/

%

/

*

）

cols

定義列表示框架有多少列（取值

px

/

%

/

*

）

frame子框架

src

顯示的網頁的路徑

name

框架名

frameborder

邊框線（取值 0 / 1）

frame

> ---- 表示框架中的某一個部分；單標籤，要跟結束標誌

noframes

>屬性

noframes

> 提供不支持框架的瀏覽器顯示

body

的內容；雙標籤

內容

內聯框架

元素會創建包含另外一個文檔的內聯框架（即行內框架）

允許和

body

一起使用

width

寬（取值 px / %）

height

高（取值 px / %）

name

框架名

frameborder

邊框線（取值 0 / 1）

src

顯示的網頁的路徑

第十七章 css高級屬性

opacity

透明屬性

對於

IE6/7/

，使用

filter:alpha(opacity:值;

) 值為

0-100

對於

Webkit

，

Opera

，

Firefox

，

IE9+

，使用

opacity

:值; 值為

0-1

對於早期火狐，使用

-moz-opacity

:值; 值為

0-1

所以寫透明屬性時，一般寫法是

opacity

{

opacity:0.5;

filter:alpha(opacity：50);/*0-100*/

-moz-opacity:0.5; /*取值0-1*/-->針對早起版本的火狐兼容問題的解決}

border-radius

圓角邊框屬性

border-radius:10px

;

向

div

元素添加圓角邊框

box-shadow

陰影屬性

屬性向框添加陰影效果,後面跟4個參數。

box-shadow:0px 0px 10px #000;

屬性

是

HTML5

中新增的標籤,媒體嵌入插件標籤，可以通過

插入音頻或視頻

格式

.mid

.wav

.mp3

等

CSS部分導圖總結

第三部分 附錄

附錄一 DIV命名規範

企業

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

.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精靈原理以及應用

該圖片使用

CSS

background和background-position

屬性渲染，這也就意味著你的標籤變得更加複雜了，圖片是在

CSS

中定義，而非

標籤。

CSS

雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。

一個簡單的例子：

一張圖片作出一個按鈕的三個狀態

一個鏈接用

CSS

做成按鈕的樣式，我們可以使用同一張圖片，完成按鈕的三個狀態，

a:link

，

a:hover

，

a:active

鏈接

加入右側的圖片為：

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

技術的其中一個好處是圖片的載入時間(在有許多

時，單張圖片的載入時間)。由所需圖片拼成的一張

GIF

圖片的尺寸會明顯小於所有圖片拼合前的大小。單張的

GIF

只有相關的一個色表，而單獨分割的每一張

GIF

都有自己的一個色表，這就增加了總體的大小。因此，單獨的一張

JPEG

或者

PNG

sprite

在大小上非常可能比把一張圖分成多張得來的圖片總尺寸小。

減少滑鼠滑過的一些

bug

IE6

不會主動預載入滑鼠滑過即

a:hover

中的背景圖片，所以，如果使用多張圖片，滑鼠滑過會出現閃白的現象。使用

CSS

雪碧，由於一張圖片即可，所以不會出現這種現象。

不足：

CSS

雪碧的最大問題是內存使用

影響瀏覽器的縮放功能

拼圖維護比較麻煩

使

CSS

的編寫變得困難

CSS

雪碧調用的圖片不能被列印

錯誤得使用

Sprites

影響可訪問性

想要系統學習web前端和免費學習資料的 可以加裙六二三九六六八零六 學完有工作推薦

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！