《html+css+javascript 標(biāo)準(zhǔn)實(shí)例教程(第二版)15》由會員分享，可在線閱讀，更多相關(guān)《html+css+javascript 標(biāo)準(zhǔn)實(shí)例教程(第二版)15（40頁珍藏版）》請?jiān)谘b配圖網(wǎng)上搜索。

1、,HTML/CSS/JavaScript,標(biāo)準(zhǔn),教程實(shí)例版（第,2,版）,第,章,15,本書編委會 編著,實(shí)例版,第,15,章,邊框和邊距,15.1,設(shè)計(jì)邊框樣式,border-style,15.2,調(diào)整邊框?qū)挾?border-width,15.3,設(shè)置邊框顏色,border-color,15.4,設(shè)置邊框?qū)傩?border,15.5,邊距,margin-top/margin-bottom/margin-left/margin-right/margin,15.6,填充,padding-top,padding-bottom/padding-left/padding-right/padding,1

2、5.7,小實(shí)例,綜合設(shè)置邊框和邊距,15.8,習(xí)題,HTML/CSS/JavaScript,標(biāo)準(zhǔn)教程實(shí)例版（第,2,版）,15.1,設(shè)計(jì)邊框樣式,border-style,基本語法,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,是一個復(fù)合屬性，其他,

3、4,個都是單個邊框的樣式屬性，只能取一個值，而復(fù)合屬性,border-style,可以同時取一到,4,個值。下面分別說明,border-style,屬性的,4,個取值方法：,取一個值：四條邊框均使用這一個值。,e:s,取兩個值：上下邊框使用第一個值，左右邊框使用第二個值，兩個值一定要用空格隔開。,取三個值：上邊框使用第一個值，左右邊框使用第二個值，下邊框使用第三個值，取值之間要用空格隔開。,取,4,個值：四條邊框按照上、右、下、左的順序來調(diào)用取值。取值之間也要用空格隔開。,15.1,設(shè)計(jì)邊框樣式,border-style,實(shí)例代碼,15.1,設(shè)計(jì)邊框樣式,border-style,接上頁,15

4、.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)頁效果,15.2,調(diào)整邊框?qū)挾?border-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ū)挾?bord

5、er-width,語法說明,邊框?qū)挾葘傩曰菊Z法中的關(guān)鍵字說明,長度包括長度值和長度單位，不可以使用負(fù)數(shù)。長度單位可以使用絕對單位也可使用相對單位，如,px,、,pt,、,cm,等。,基本語法中邊框?qū)挾葘傩?border-width,是一個復(fù)合屬性，可以同時設(shè)置四條邊框的寬度。具體使用方法和邊框樣式的復(fù)合屬性,border-style,是一樣的，可以參照上一節(jié)關(guān)于,border-style,的講解。,表,15-2,15.2,調(diào)整邊框?qū)挾?border-width,表,15-2,邊框?qū)挾葘傩灾嘘P(guān)鍵字說明,返回,15.2,調(diào)整邊框?qū)挾?border-width,實(shí)例代碼,15.2,調(diào)整邊框?qū)挾?b

6、order-width,接上頁,15.2,調(diào)整邊框?qū)挾?border-width,網(wǎng)頁效果,15.3,設(shè)置邊框顏色,border-color,基本語法,border-color:,顏色關(guān)鍵字,|RGB,值,border-top-color:,顏色關(guān)鍵字,|RGB,值,border-bottom-color:,顏色關(guān)鍵字,|RGB,值,border-left-color:,顏色關(guān)鍵字,|RGB,值,border-right-color:,顏色關(guān)鍵字,|RGB,值,15.3,設(shè)置邊框顏色,border-color,語法說明,顏色關(guān)鍵字可使用常用的,16,個關(guān)鍵字,RGB,值使用十六進(jìn)制的,RGB,

7、值和,RGB,函數(shù)值都行。,在使用邊框顏色復(fù)合屬性,border-color,時，如果只設(shè)置,1,種顏色，則四條邊框的顏色一樣；設(shè)置,2,種顏色，則邊框的上下為一個顏色，左右為另一個顏色；設(shè)置,3,種顏色，邊框的顏色順序?yàn)樯?、左右、下；設(shè)置,4,中顏色，邊框的顏色順序?yàn)樯?、右、下、左?表,15-3,15.3,設(shè)置邊框顏色,border-color,表,15-3,常用的,16,個顏色關(guān)鍵字,返回,15.3,設(shè)置邊框顏色,border-color,實(shí)例代碼,15.3,設(shè)置邊框顏色,border-color,接上頁,15.3,設(shè)置邊框顏色,border-color,網(wǎng)頁效果,15.4,設(shè)置邊框?qū)傩?/p>

8、,border,基本語法,border:|,border-top:|,border-right:|,border-bottom:|,border-left:|,15.4,設(shè)置邊框?qū)傩?border,語法說明,基本語法中每一個屬性都是一個復(fù)合屬性，都可以同時設(shè)置邊框的寬度、樣式和顏色屬性。但是在用該語法定義邊框?qū)傩詴r，每個屬性間必須用空格隔開。,這五個屬性語法中，只有,border,可以同時設(shè)置四條邊框的屬性。其他的只能設(shè)置單邊框的屬性。,15.4,設(shè)置邊框?qū)傩?border,實(shí)例代碼,15.4,設(shè)置邊框?qū)傩?border,接上頁,15.4,設(shè)置邊框?qū)傩?border,網(wǎng)頁效果,15.5,邊距,

9、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,邊距,margin-top/margin-bottom/margin-left/margin-right/margin,語法說明,長度包括長度值和長度單位，長度單位可以使用前面多次提到的絕對單位

10、或相對單位。,百分比是相對于上級元素寬度的百分比，允許使用負(fù)數(shù)。,auto,為自動提取邊距值，是默認(rèn)值。,margin,復(fù)合屬性和其他復(fù)合屬性的設(shè)置方法是一樣的，也可以取,1,到,4,個值來同時設(shè)置邊框周圍的四個邊距。,15.5,邊距,margin-top/margin-bottom/margin-left/margin-right/margin,實(shí)例代碼,15.5,邊距,margin-top/margin-bottom/margin-left/margin-right/margin,網(wǎng)頁效果,15.6,填充,padding-top,padding-bottom/padding-left/pa

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