-
- 素材大。
- 1.17 MB
- 素材授權(quán):
- 免費(fèi)下載
- 素材格式:
- .ppt
- 素材上傳:
- lipeier
- 上傳時(shí)間:
- 2019-04-09
- 素材編號(hào):
- 227963
- 素材類別:
- 課件PPT
-
素材預(yù)覽
這是有關(guān)盒子得ppt,包括了認(rèn)識(shí)盒子模型,盒子模型相關(guān)屬性,元素的類型與轉(zhuǎn)換,塊元素垂直外邊距的合并,階段案例—制作音樂(lè)盒等內(nèi)容,歡迎點(diǎn)擊下載。
有關(guān)盒子得ppt是由紅軟PPT免費(fèi)下載網(wǎng)推薦的一款課件PPT類型的PowerPoint.
第四章 盒子模型 盒子模型的概念 元素的類型 4.1 認(rèn)識(shí)盒子模型 盒子模型的概念 4.1 認(rèn)識(shí)盒子模型 以手機(jī)盒子為例,更形象地認(rèn)識(shí)CSS盒子模型 4.1 認(rèn)識(shí)盒子模型 多個(gè)手機(jī)盒子放在一起時(shí),它們之間的距離就是CSS盒子模型的外邊距。 4.1 認(rèn)識(shí)盒子模型 結(jié)論: 網(wǎng)頁(yè)就是多個(gè)盒子嵌套排列的結(jié)果。 內(nèi)邊距出現(xiàn)在內(nèi)容區(qū)域的周圍,當(dāng)給元素添加背景色或背景圖像時(shí),該元素的背景色或背景圖像也將出現(xiàn)在內(nèi)邊距中。 外邊距是該元素與相鄰元素之間的距離。 如果給元素定義邊框?qū)傩,邊框(qū)⒊霈F(xiàn)在內(nèi)邊距和外邊距之間。 4.2 盒子模型相關(guān)屬性 4.2.1 邊框?qū)傩? 4.2 盒子模型相關(guān)屬性 4.2.1 邊框?qū)傩?mdash;設(shè)置邊框樣式(border-style) 邊框樣式用于定義頁(yè)面中邊框的風(fēng)格,常用屬性值如下: none:沒(méi)有邊框即忽略所有邊框的寬度(默認(rèn)值) solid:邊框?yàn)閱螌?shí)線 dashed:邊框?yàn)樘摼 dotted:邊框?yàn)辄c(diǎn)線 double:邊框?yàn)殡p實(shí)線 4.2 盒子模型相關(guān)屬性 4.2.1 邊框?qū)傩?mdash;設(shè)置邊框樣式(border-style) 既可以對(duì)盒子的單邊進(jìn)行設(shè)置,也可以綜合設(shè)置四條邊的樣式: border-top-style:上邊框樣式 border-right-style:右邊框樣式 border-bottom-style:下邊框樣式 border-left-style:左邊框樣式 border-style:上邊框樣式 右邊框樣式 下邊框樣式 左邊框樣式 border-style:上邊框樣式 左右邊框樣式 下邊框樣式 border-style:上下邊框樣式 左右邊框樣式 border-style:上下左右邊框樣式 4.2 盒子模型相關(guān)屬性 4.2.1 邊框?qū)傩?mdash;設(shè)置邊框樣式(border-style) 例如
只有上邊為虛線dashed,其他三邊為單實(shí)線solid,可以使用border-style綜合屬性分別設(shè)置各邊樣式: 或綜合設(shè)置四條邊,然后采用上邊覆蓋: 4.2 盒子模型相關(guān)屬性 4.2.1 邊框?qū)傩?mdash;設(shè)置邊框?qū)挾龋╞order-width) border-top-width:上邊框?qū)挾?border-right-width:右邊框?qū)挾?border-bottom-width:下邊框?qū)挾?border-left-width:左邊框?qū)挾?border- width:上邊框?qū)挾?[右邊框?qū)挾?下邊框?qū)挾?左邊框?qū)挾萞 4.2 盒子模型相關(guān)屬性 4.2.1 邊框?qū)傩?mdash;設(shè)置邊框顏色(border-color) 4.2 盒子模型相關(guān)屬性 4.2.1 邊框?qū)傩?mdash;設(shè)置邊框顏色(border-color) 4.2 盒子模型相關(guān)屬性 4.2.1 邊框?qū)傩?mdash;設(shè)置邊框顏色(border-color) 注意: 4.2 盒子模型相關(guān)屬性 4.2.1 邊框?qū)傩?mdash;綜合設(shè)置邊框 border-top:上邊框?qū)挾?樣式 顏色 border-right:右邊框?qū)挾?樣式 顏色 border-bottom:下邊框?qū)挾?樣式 顏色 border-left:左邊框?qū)挾?樣式 顏色 border:四邊寬度 樣式 顏色 4.2 盒子模型相關(guān)屬性 4.2.1 邊框?qū)傩?mdash;綜合設(shè)置邊框 像border、border-top等這樣,能夠一個(gè)屬性定義元素的多種樣式,在CSS中稱之為復(fù)合屬性。 常用的復(fù)合屬性有font、border、margin、padding和background等。 復(fù)合屬性可以簡(jiǎn)化代碼,提高頁(yè)面的運(yùn)行速度,但是如果只有一項(xiàng)值,最好不要應(yīng)用復(fù)合屬性,以免樣式不被兼容。 4.2 盒子模型相關(guān)屬性 4.2.2 內(nèi)邊距屬性 padding-top:上內(nèi)邊距 padding-right:右內(nèi)邊距 padding-bottom:下內(nèi)邊距 padding-left:左內(nèi)邊距 padding:上內(nèi)邊距[右內(nèi)邊距 下內(nèi)邊距 左內(nèi)邊距] 4.2 盒子模型相關(guān)屬性 4.2.3 外邊距屬性 margin-top:上外邊距 margin-right:右外邊距 margin-bottom:下外邊距 margin-left:上外邊距 margin:上外邊距 [右外邊距 下外邊距 左外邊距] 4.2 盒子模型相關(guān)屬性 4.2.3 外邊距屬性 4.2 盒子模型相關(guān)屬性 4.2.3 外邊距屬性 4.2 盒子模型相關(guān)屬性 4.2.4 背景屬性 4.2 盒子模型相關(guān)屬性 4.2.4 背景屬性 4.2 盒子模型相關(guān)屬性 4.2.4 背景屬性 4.2 盒子模型相關(guān)屬性 4.2.4 背景屬性 4.2 盒子模型相關(guān)屬性 4.2.4 背景屬性 4.2 盒子模型相關(guān)屬性 4.2.5 盒子的寬與高 4.2 盒子模型相關(guān)屬性 4.2.5 盒子的寬與高 4.3 元素的類型與轉(zhuǎn)換 4.3.1 元素的類型 4.3 元素的類型與轉(zhuǎn)換 4.3.1 元素的類型 4.3 元素的類型與轉(zhuǎn)換 4.3.1 元素的類型 4.3 元素的類型與轉(zhuǎn)換 4.3.2
與標(biāo)記 4.3 元素的類型與轉(zhuǎn)換 4.3.2與標(biāo)記 4.3 元素的類型與轉(zhuǎn)換 4.3.2與標(biāo)記 4.3 元素的類型與轉(zhuǎn)換 4.3.3 元素的轉(zhuǎn)換 4.3 元素的類型與轉(zhuǎn)換 4.3.3 元素的轉(zhuǎn)換 4.4塊元素垂直外邊距的合并 4.4.1 相鄰塊元素垂直外邊距的合并 4.4塊元素垂直外邊距的合并 4.4.2 嵌套塊元素垂直外邊距的合并 4.5階段案例-制作音樂(lè)盒 效果圖如下 本章首先介紹了盒子模型的概念,與盒子模型相關(guān)的屬性,然后講解了塊元素、行內(nèi)元素,最常用的塊元素與行內(nèi)元素,以及元素類型的轉(zhuǎn)換,最后制作出了一個(gè)常見的盒子模型效果。 通過(guò)本章的學(xué)習(xí),讀者應(yīng)該能夠熟悉盒子模型的構(gòu)成,熟練運(yùn)用盒子模型相關(guān)屬性控制網(wǎng)頁(yè)中的元素,理解塊元素與行內(nèi)元素的區(qū)別,掌握標(biāo)記與標(biāo)記的使用。潘多拉的盒子ppt:這是潘多拉的盒子ppt,包括了讀一讀,妙開頭,好結(jié)尾,精彩展示,擊鼓傳盒等內(nèi)容,歡迎點(diǎn)擊下載。
繪本喜歡盒子的人ppt:這是繪本喜歡盒子的人ppt,包括了我喜歡的繪本,彩筆娃邀你一起來(lái)到“繪本的王國(guó)”,這些書為什么叫繪本,繪本的封面上一般會(huì)有哪些信息等內(nèi)容,歡迎點(diǎn)擊下載。
半透明3D立體方塊盒子PPT圖表:跟大家分享一份半透明的3D立體方塊盒子PPT圖表,透明質(zhì)感并列關(guān)系的PPT圖表,不容錯(cuò)過(guò)!