1、授課人：何蘊婷EMAIL：CSSCSS樣式樣式（8 8） -盒子模型盒子模型內部培訓資料,不作任何宣傳用途1、通過實訓項目了解css盒子模型的結構。內部培訓資料,不作任何宣傳用途在網頁中css的盒子模型的實現內部培訓資料,不作任何宣傳用途 通過實例了解盒子模型中各種屬性的設置對頁面的控制效果1、綜合實例、綜合實例內部培訓資料,不作任何宣傳用途新課講授新課講授 1、P172，盒子實際寬度是由content+padding+border+margin組成盒子模型盒子模型內容內邊距外邊距邊框內部培訓資料,不作任何宣傳用途新課講授新課講授 2、邊框實例 IE對邊框的某些屬性不大支持盒子模型盒子模型內部

2、培訓資料,不作任何宣傳用途課堂實踐課堂實踐邊距實例bodybackground-color:#99CCFF;#boxwidth:154px; height:160px;/* 塊的大小 */ (1)插入并設置塊的大小插入并設置塊的大小內部培訓資料,不作任何宣傳用途課堂實踐課堂實踐bodybackground-color:#99CCFF;#boxwidth:154px; height:160px;/* 塊的大小 */#box img /* 設置相片 */height:90px; width:135px; /* 指定相片大小 */ (2)插入圖片并設置大小插入圖片并設置大小內部培訓資料,不作任何宣傳

3、用途課堂實踐課堂實踐#boxwidth:154px; height:160px;/* 塊的大小 */margin:36px;padding:20px;border:10px gray dashed; background-color:#000000;(3)設置塊的內外邊距與邊框樣式設置塊的內外邊距與邊框樣式內部培訓資料,不作任何宣傳用途課堂實踐課堂實踐#box img /* 相片 */ border:5px yellow solid ;/* 指定相片的邊框 */margin:0px; /* 指定相片的外邊距 */height:90px; width:135px;/* 指定相片的內邊距 */ p

4、adding:34px 14px 36px 11px;(4)相片的樣式相片的樣式內部培訓資料,不作任何宣傳用途課堂實踐課堂實踐(5)(5)擴展：修改實例的各屬性的值，并瀏覽頁面，觀擴展：修改實例的各屬性的值，并瀏覽頁面，觀察頁面的變化。察頁面的變化。內部培訓資料,不作任何宣傳用途課堂實踐課堂實踐（1）定義并添加簽名塊2、給圖片加上簽名、給圖片加上簽名#contentcolor:#FFFFFF;鳴沙山內部培訓資料,不作任何宣傳用途課堂實踐課堂實踐（2）設置簽名塊浮動2、給圖片加上簽名、給圖片加上簽名#contentcolor:#FFFFFF;float:center;內部培訓資料,不作任何宣傳用途課堂實踐課堂實踐（3）設置簽名塊位置絕對定位（P210）2、給圖片加上簽名、給圖片加上簽名#contentcolor:#FFFFFF;float:center;position:absolute;left:137px;top:82px;內部培訓資料,不作任何宣傳用途課后作業課后作業 1. 1. 參照課本中的例子，創建一網頁參照課本中