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