html+css+javascript 標(biāo)準(zhǔn)實(shí)例教程(第二版)15.ppt

1、實(shí)例版,第15章 邊框和邊距,15.1 設(shè)計(jì)邊框樣式border-style 15.2 調(diào)整邊框?qū)挾萣order-width 15.3 設(shè)置邊框顏色border-color 15.4 設(shè)置邊框?qū)傩詁order 15.5 邊距margin-top /margin-bottom /margin-left/ margin-right/margin 15.6 填充padding-toppadding- bottom /padding-left / padding- right /padding 15.7 小實(shí)例綜合設(shè)置邊框和邊距 15.8 習(xí)題,15.1 設(shè)計(jì)邊框樣式border-style,基本語法

2、,border-style:樣式取值 border-top-style:樣式取值 border-bottom-style:樣式取值 border-left-style:樣式取值 border-right-style:樣式取值,15.1 設(shè)計(jì)邊框樣式border-style,語法說明,15.1 設(shè)計(jì)邊框樣式border-style,語法說明, 邊框樣式屬性中border-style是一個(gè)復(fù)合屬性，其他4個(gè)都是單個(gè)邊框的樣式屬性，只能取一個(gè)值，而復(fù)合屬性border-style可以同時(shí)取一到4個(gè)值。下面分別說明border-style屬性的4個(gè)取值方法： 取一個(gè)值：四條邊框均使用這一個(gè)值。e:s

3、取兩個(gè)值：上下邊框使用第一個(gè)值，左右邊框使用第二個(gè)值，兩個(gè)值一定要用空格隔開。 取三個(gè)值：上邊框使用第一個(gè)值，左右邊框使用第二個(gè)值，下邊框使用第三個(gè)值，取值之間要用空格隔開。 取4個(gè)值：四條邊框按照上、右、下、左的順序來調(diào)用取值。取值之間也要用空格隔開。,15.1 設(shè)計(jì)邊框樣式border-style,實(shí)例代碼,15.1 設(shè)計(jì)邊框樣式border-style,接上頁,15.1 設(shè)計(jì)邊框樣式border-style,網(wǎng)頁效果,15.1 設(shè)計(jì)邊框樣式border-style,實(shí)例代碼,15.1 設(shè)計(jì)邊框樣式border-style,接上頁,15.1 設(shè)計(jì)邊框樣式border-style,網(wǎng)頁效果,

4、15.2 調(diào)整邊框?qū)挾萣order-width,基本語法,border-width:關(guān)鍵字|長度 border-top-width:關(guān)鍵字|長度 border-bottom-width:關(guān)鍵字|長度 border-right-width:關(guān)鍵字|長度 border-left-width:關(guān)鍵字|長度,15.2 調(diào)整邊框?qū)挾萣order-width,語法說明,邊框?qū)挾葘傩曰菊Z法中的關(guān)鍵字說明 長度包括長度值和長度單位，不可以使用負(fù)數(shù)。長度單位可以使用絕對單位也可使用相對單位，如px、pt、cm等。 基本語法中邊框?qū)挾葘傩詁order-width是一個(gè)復(fù)合屬性，可以同時(shí)設(shè)置四條邊框的寬度。具體使

5、用方法和邊框樣式的復(fù)合屬性border-style是一樣的，可以參照上一節(jié)關(guān)于border-style的講解。,表15-2,15.2 調(diào)整邊框?qū)挾萣order-width,表15-2 邊框?qū)挾葘傩灾嘘P(guān)鍵字說明,返回,15.2 調(diào)整邊框?qū)挾萣order-width,實(shí)例代碼,15.2 調(diào)整邊框?qū)挾萣order-width,接上頁,15.2 調(diào)整邊框?qū)挾萣order-width,網(wǎng)頁效果,15.3 設(shè)置邊框顏色border-color,基本語法,border-color:顏色關(guān)鍵字|RGB值 border-top-color:顏色關(guān)鍵字|RGB值 border-bottom-color:顏色關(guān)鍵字

6、|RGB值 border-left-color:顏色關(guān)鍵字|RGB值 border-right-color: 顏色關(guān)鍵字|RGB值,15.3 設(shè)置邊框顏色border-color,語法說明, 顏色關(guān)鍵字可使用常用的16個(gè)關(guān)鍵字 RGB值使用十六進(jìn)制的RGB值和RGB函數(shù)值都行。 在使用邊框顏色復(fù)合屬性border-color時(shí)，如果只設(shè)置1種顏色，則四條邊框的顏色一樣；設(shè)置2種顏色，則邊框的上下為一個(gè)顏色，左右為另一個(gè)顏色；設(shè)置3種顏色，邊框的顏色順序?yàn)樯?、左右、下；設(shè)置4中顏色，邊框的顏色順序?yàn)樯?、右、下、左?表15-3,15.3 設(shè)置邊框顏色border-color,表15-3 常用的1

7、6個(gè)顏色關(guān)鍵字,返回,15.3 設(shè)置邊框顏色border-color,實(shí)例代碼,15.3 設(shè)置邊框顏色border-color,接上頁,15.3 設(shè)置邊框顏色border-color,網(wǎng)頁效果,15.4 設(shè)置邊框?qū)傩詁order,基本語法,border:| border-top: | border-right: | border-bottom: | border-left: |,15.4 設(shè)置邊框?qū)傩詁order,語法說明, 基本語法中每一個(gè)屬性都是一個(gè)復(fù)合屬性，都可以同時(shí)設(shè)置邊框的寬度、樣式和顏色屬性。但是在用該語法定義邊框?qū)傩詴r(shí)，每個(gè)屬性間必須用空格隔開。 這五個(gè)屬性語法中，只有borde

8、r可以同時(shí)設(shè)置四條邊框的屬性。其他的只能設(shè)置單邊框的屬性。,15.4 設(shè)置邊框?qū)傩詁order,實(shí)例代碼,15.4 設(shè)置邊框?qū)傩詁order,接上頁,15.4 設(shè)置邊框?qū)傩詁order,網(wǎng)頁效果,15.5 邊距margin-top /margin-bottom /margin-left/ margin-right/margin,基本語法,margin-top:長度|百分比|auto margin-bottom: 長度|百分比|auto margin-left: 長度|百分比|auto margin-left: 長度|百分比|auto margin: 長度|百分比|auto,15.5 邊距mar

9、gin-top /margin-bottom /margin-left/ margin-right/margin,語法說明, 長度包括長度值和長度單位，長度單位可以使用前面多次提到的絕對單位或相對單位。 百分比是相對于上級元素寬度的百分比，允許使用負(fù)數(shù)。 auto為自動(dòng)提取邊距值，是默認(rèn)值。 margin復(fù)合屬性和其他復(fù)合屬性的設(shè)置方法是一樣的，也可以取1到4個(gè)值來同時(shí)設(shè)置邊框周圍的四個(gè)邊距。,15.5 邊距margin-top /margin-bottom /margin-left/ margin-right/margin,實(shí)例代碼,15.5 邊距margin-top /margin-bot

10、tom /margin-left/ margin-right/margin,網(wǎng)頁效果,15.6 填充padding-toppadding- bottom /padding-left / padding- right /padding,基本語法,padding-top:長度|百分比 padding-bottom: 長度|百分比 padding-left: 長度|百分比 padding-right: 長度|百分比 padding: 長度|百分比,15.6 填充padding-toppadding- bottom /padding-left / padding- right /padding,語法說明, 長度包括長度值和長度單位。 百分比是相對于上級元素寬度的百分比，不允許使用負(fù)數(shù)。 填充復(fù)合屬性padding的取值方法，可以參照邊框樣式border-style的取值方法。,15.6 填充padding-toppadding- bottom /padding-left / padding- right /padding,實(shí)例代碼,15.6 填充padding-toppadding- bottom /padding-left / paddin