《網(wǎng)頁設計與制作實踐》課件第4章盒子模型

第4章盒子模型1考核知識點盒子模型、邊框屬性、內外邊距屬性、<div>標記、<span>標簽、塊元素和行內元素等知識點。2練習目標●掌握盒子模型的邊框屬性、內邊距屬性、外邊距屬性。●靈活運用邊框的復合屬性?！袷炀毷褂脙冗吘嗫刂坪凶觾热莸奈恢??！袷煜ひ恍形谋驹谝粋€盒子中垂直居中的方法?！裾莆赵氐姆诸??！裾莆?lt;span>標簽的應用。實驗1潮流新品寶貝展示請做出以下效果：要求：（1）給最外層的大盒子指定寬為350px;高為540px;，并為其設置單實線型寬為1px顏色為#0CC的邊框。（2）大標題“潮流新品”，字大小為:18px，顏色為白色，在寬85px高30px底色為#09F的盒中居中顯示。（3）給定的“汽車”圖的寬高均為350px。（4）小標題“Strati3D打印汽車”，字體為“微軟雅黑Light”，字號20px。（5）價格“1999.00”，字號22px，顏色為#F00，字型加粗。（6）“3D打印”、“修復成本低”，字顏色#09F，在邊框線為單實線型寬1px色#09F的盒中居中顯示。3實驗內容及要求實驗1潮流新品寶貝展示結構分析：頁面由標題、圖片和說明內容組成，所有內容都包在一個盒子中，盒子用<div>標簽定義，標題用<h1>、<h2>標簽定義，圖片由<img>標簽定義，說明內容用<p>標簽定義，設置特殊效果的內容用<span>定義。樣式分析：（1）通過<div>進行整體控制，需要對其設置寬度、高度及邊框邊距樣式。（2）<h1>、<h2>、<p>標簽定義的元素都是塊級元素，可以對其設置高度、寬度、邊框、內外邊距、背景，實現(xiàn)布局和效果的設置。（3）<span>標簽定義的元素是行內元素，可以設置邊框、內邊距、左右邊距，實現(xiàn)行內元素布局和效果的設置。（4）文字效果按要求設置樣式即可。4實驗分析實驗1潮流新品寶貝展示1考核知識點盒子模型、邊框屬性、內外邊距屬性、背景設置、盒子模型布局。2練習目標●掌握盒子模型的邊框屬性、內邊距屬性、外邊距屬性、背景的設置?！耢`活運用背景的復合屬性，掌握調整背景圖像位置的方法?！袷煜ず凶拥那短资褂谩！耢`活運用盒子屬性進行布局，使用內邊距控制盒子中內容的位置，使用外邊距控制盒子的位置。實驗2

酷車e族寶貝展示請做出以下效果：要求：（1）利用盒子模型布局。（2）展示區(qū)域的大小高寬均為500px，用給定的自行車圖片(bicycles.png)做背景。（3）所有的文字內容部分都右對齊。（4）展示區(qū)域的邊框色為#0CC，標題文字的大小分別為26px、36px，價格的紅色文字加粗大小為40px。3實驗內容及要求實驗2

酷車e族寶貝展示結構分析：整體由兩大部分組成，圖片和說明文字內容，所有內容都包在展示區(qū)域的大盒子中，圖片做為大盒子的背景，所有文字內容放在嵌套在大盒的另一個盒子中，文字內容有兩個標題，用<h1><h2>標簽定義,另外兩行內容用段落<p>標簽定義，價格設置有突出顯示的效果用<span>標簽定義。樣式分析：圖片做為盒子的背景，在盒子底部水平居中顯示，用背景的復合屬性進行設置（background:url(bicycles.png)no-repeatcenterbottom;），內容區(qū)域的盒子（寬235px高190px）通過左外邊距（230px）定位到大盒子的右側，價格所在的段落區(qū)塊通過上外邊