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

第4章盒子模型1考核知識(shí)點(diǎn)盒子模型、邊框?qū)傩?、?nèi)外邊距屬性、<div>標(biāo)記、<span>標(biāo)簽、塊元素和行內(nèi)元素等知識(shí)點(diǎn)。2練習(xí)目標(biāo)●掌握盒子模型的邊框?qū)傩?、?nèi)邊距屬性、外邊距屬性。●靈活運(yùn)用邊框的復(fù)合屬性?！袷炀毷褂脙?nèi)邊距控制盒子內(nèi)容的位置?！袷煜ひ恍形谋驹谝粋€(gè)盒子中垂直居中的方法。●掌握元素的分類。●掌握<span>標(biāo)簽的應(yīng)用。實(shí)驗(yàn)1潮流新品寶貝展示請(qǐng)做出以下效果：要求：（1）給最外層的大盒子指定寬為350px;高為540px;，并為其設(shè)置單實(shí)線型寬為1px顏色為#0CC的邊框。（2）大標(biāo)題“潮流新品”，字大小為:18px，顏色為白色，在寬85px高30px底色為#09F的盒中居中顯示。（3）給定的“汽車”圖的寬高均為350px。（4）小標(biāo)題“Strati3D打印汽車”，字體為“微軟雅黑Light”，字號(hào)20px。（5）價(jià)格“1999.00”，字號(hào)22px，顏色為#F00，字型加粗。（6）“3D打印”、“修復(fù)成本低”，字顏色#09F，在邊框線為單實(shí)線型寬1px色#09F的盒中居中顯示。3實(shí)驗(yàn)內(nèi)容及要求實(shí)驗(yàn)1潮流新品寶貝展示結(jié)構(gòu)分析：頁(yè)面由標(biāo)題、圖片和說(shuō)明內(nèi)容組成，所有內(nèi)容都包在一個(gè)盒子中，盒子用<div>標(biāo)簽定義，標(biāo)題用<h1>、<h2>標(biāo)簽定義，圖片由<img>標(biāo)簽定義，說(shuō)明內(nèi)容用<p>標(biāo)簽定義，設(shè)置特殊效果的內(nèi)容用<span>定義。樣式分析：（1）通過(guò)<div>進(jìn)行整體控制，需要對(duì)其設(shè)置寬度、高度及邊框邊距樣式。（2）<h1>、<h2>、<p>標(biāo)簽定義的元素都是塊級(jí)元素，可以對(duì)其設(shè)置高度、寬度、邊框、內(nèi)外邊距、背景，實(shí)現(xiàn)布局和效果的設(shè)置。（3）<span>標(biāo)簽定義的元素是行內(nèi)元素，可以設(shè)置邊框、內(nèi)邊距、左右邊距，實(shí)現(xiàn)行內(nèi)元素布局和效果的設(shè)置。（4）文字效果按要求設(shè)置樣式即可。4實(shí)驗(yàn)分析實(shí)驗(yàn)1潮流新品寶貝展示1考核知識(shí)點(diǎn)盒子模型、邊框?qū)傩?、?nèi)外邊距屬性、背景設(shè)置、盒子模型布局。2練習(xí)目標(biāo)●掌握盒子模型的邊框?qū)傩?、?nèi)邊距屬性、外邊距屬性、背景的設(shè)置。●靈活運(yùn)用背景的復(fù)合屬性，掌握調(diào)整背景圖像位置的方法。●熟悉盒子的嵌套使用?！耢`活運(yùn)用盒子屬性進(jìn)行布局，使用內(nèi)邊距控制盒子中內(nèi)容的位置，使用外邊距控制盒子的位置。實(shí)驗(yàn)2

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

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