第 五章 DIV+CSS 基礎(chǔ)布局

1、網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6歡迎來到李老師課堂第五章 DIV+CSS 基礎(chǔ)布局5.1 CSS定位5.2 盒子模型5.3 塊元素和內(nèi)聯(lián)元素網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局需要DIV“圈地布局”DIV+CSS布局1、什么是DIVDiv與其他HTML標簽一樣，是一個HTML所支持的標簽，在代碼中應(yīng)用。標簽只是一個標識，作用是把內(nèi)容標識在一個區(qū)域，并

2、不負責其他事情，div只是CSS布局工作的第一步，需要通過Div將頁面中的內(nèi)容元素標識出來，而為內(nèi)容添加樣式則由CSS來完成。網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局需要DIV“圈地布局”網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局需要DIV“圈地布局”LOGO導(dǎo)航nav廣告大圖banner左邊內(nèi)容右邊內(nèi)容底部版權(quán)頭部 header廣

3、告 banner 內(nèi)容 content 頁腳 footer主體 main 中間內(nèi)容網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局position定位定位的基本思想: 定位 (Positioning) 屬性允許你對元素進行定位它允許你定義元素框相對于其正常位置應(yīng)該出現(xiàn)的位置，或者相對于父元素、另一個

4、元素甚至瀏覽器窗口本身的位置網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局定位的基本思想Position四屬性 相對定位 絕對定位 固定定位網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局靜態(tài)相對絕對固定定位的基本思想Position四屬性相對定位絕對定位固定定位relative相對定位如果對一個元素進行相對定位，它將出現(xiàn)在它所在的位置上。通過設(shè)置垂直或水平位置，讓這個元素“相對于”它的起點進行移動. .adv_relative position: rela

5、tive; left: 30px; top: 20px;網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局定位的基本思想Position四屬性 相對定位 絕對定位 固定定位absolute絕對定位元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，它的位置相對于最初的包含塊。 .adv_absolute position: absolute; left: 30px; top: 20px; 網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局定位的基本

6、思想Position四屬性 相對定位 絕對定位 固定定位第五章 DIV+CSS 基礎(chǔ)布局5.1 CSS定位5.2 盒子模型5.3 塊元素和內(nèi)聯(lián)元素網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局盒子模型網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局content上邊框左邊框下邊框右邊框上邊距margin-top下邊距margin-bottom左邊距margin-left右邊距margin-right上填充padding-top左填充padding-left右

7、填充padding-right下填充padding-bottomCSS允許指定字體、行間距、顏色、邊框、背景陰影和圖形，以及邊距和填充等。使用CSS控制Div。邊距和填充在CSS樣式中可以使用margin屬性來控制邊距，使用paddin屬性來控制填充。網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局content上邊距下邊距左邊距右邊距上填充左填充右填充下填充邊距和填充邊框和背景邊距和填充在CSS樣式中可以使用margin屬性來控制邊距，使用paddin屬性來控制填充。網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dr

8、eamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局邊距和填充邊框和背景margin 邊距屬性 margin-top 上邊距margin-right 右邊距 margin-bottom 下邊距margin-left 左邊距中心鏈接符，用于屬性間的數(shù)據(jù)鏈接邊距和填充在CSS樣式中可以使用margin屬性來控制邊距，使用paddin屬性來控制填充。網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局邊距和填充邊框和背景padding 填充屬性padding -top 上填充padding -right 右填充padding -b

9、ottom 下填充padding -left 左填充中心鏈接符，用于屬性間的數(shù)據(jù)鏈接邊框和背景Border屬性是內(nèi)邊距（填充）和外邊距的分界線，可以分離不同的HTML元素。網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局邊距和填充邊框和背景上邊框下邊框右邊框左邊框邊距和填充在CSS樣式中可以使用margin屬性來控制邊距，使用paddin屬性來控制填充。網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局邊距和填充邊框和背景border 邊框?qū)傩哉Z法格式Borde

10、r： border-width | border-style | border-color；border top-color 上邊框顏色border -right-color 右邊框顏色border -bottom-color 下邊框顏色border -left-color 左邊框顏色border-style：該屬性下提供了9個選項值可供選擇：none（無） dashed（虛線）dotted（點劃線） solid（實線）double（雙線） groove（槽狀）ridge（脊狀） inset（凹陷）outset（凸出）border-radius:CSS3中的新增屬性，設(shè)置圓角框。border-

11、collapse：邊框是否合成單一邊框collapse 合并separate 分開border-spacing：相鄰邊框的距離，前提是“分開”。第一個選項表示垂直間距，第二個選項表示水平間距第五章 DIV+CSS 基礎(chǔ)布局5.1 CSS定位5.2 盒子模型5.3 塊元素和內(nèi)聯(lián)元素網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局塊元素和內(nèi)聯(lián)元素（行內(nèi)元素）HTML代碼元素服務(wù)于特定的目的。標簽可以創(chuàng)建結(jié)構(gòu)、應(yīng)用格式化效果、標識合乎邏輯的內(nèi)容，或者發(fā)生交互。創(chuàng)建獨立的標簽成為塊（block）元素，在另一個標簽的主體內(nèi)執(zhí)行其工作的標

12、簽稱為內(nèi)聯(lián)（inline）元素。 塊級元素: div、h1或p元素 即：顯示為一塊內(nèi)容稱之為 “塊框“ ; 行內(nèi)元素: span,strong,a等元素 即：內(nèi)容顯示在行中稱 行內(nèi)框; 使用display屬性改變成框的類型 即：display:block; 讓行內(nèi)元素設(shè)置為塊級元素，display:none; 沒有框網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局塊元素內(nèi)聯(lián)元素塊元素在標準文檔流里面，塊級元素具有以下特點：總是在新行上開始，占據(jù)一整行；高度，行高以及外邊距和內(nèi)邊距都可控制；寬度始終是與瀏覽器寬度一樣，與內(nèi)容無關(guān)；它可以容納內(nèi)聯(lián)元素和其他塊元素。網(wǎng)頁制作基礎(chǔ)Html+Div+CSS零基礎(chǔ)Adobe Dreamweaver cs6第五章 DIV+CSS 基礎(chǔ)布局塊元素內(nèi)聯(lián)元素內(nèi)聯(lián)元素（行內(nèi)元