Web前端開(kāi)發(fā)項(xiàng)目教程1.1課程導(dǎo)論項(xiàng)目5美化傳統(tǒng)文化網(wǎng)任務(wù)5.1創(chuàng)作畫(huà)像展及圖片邊框

任務(wù)5.2添加創(chuàng)意漸變色與多重圖像背景目錄任務(wù)5.1創(chuàng)作畫(huà)像展及圖片邊框【任務(wù)效果圖】

【任務(wù)效果圖】★

5.1.1認(rèn)識(shí)盒子模型

★

5.1.2盒子的外邊距與內(nèi)邊距★

5.1.3盒子的寬與高【任務(wù)效果圖】★

5.1.4盒子的邊框★

5.1.5盒子的輪廓★5.1.6盒子的陰影

內(nèi)陰影頭像

多重內(nèi)陰影頭像【任務(wù)效果圖】★5.1.7CSS3新增盒子模型屬性

四角半徑參數(shù)關(guān)系

圓角邊框效果

邊框圖片素材

平鋪圖片邊框效果

拉伸圖片邊框效果

任務(wù)實(shí)現(xiàn)——?jiǎng)?chuàng)作圖片展、畫(huà)像展、圖片邊框【任務(wù)目標(biāo)】知識(shí)目標(biāo)理解盒子模型及其構(gòu)成；掌握使用padding、margin屬性設(shè)置盒子的內(nèi)、外邊距，使用width、height屬性調(diào)整盒子的寬與高，使用border復(fù)合屬性設(shè)置盒子的邊框，使用box-shadow屬性添加陰影的方法；掌握CSS3新增盒子模型屬性，包括使用rgba顏色模式及opacity屬性等多種設(shè)置透明效果的方法、圓角屬性及邊框圖像屬性。能力目標(biāo)

能夠應(yīng)用盒子模型的各種規(guī)律和特征控制頁(yè)面元素的顯示、布局排版網(wǎng)站頁(yè)面；提升觀察和判斷能力，會(huì)使用盒子屬性美化頁(yè)面元素、制作常見(jiàn)的盒子模型效果。素質(zhì)目標(biāo)

培養(yǎng)耐心細(xì)致、精益求精的品質(zhì)；提升網(wǎng)頁(yè)制作中的空間感以及創(chuàng)新意識(shí)?！救蝿?wù)效果圖】【任務(wù)效果圖】【任務(wù)效果圖】【導(dǎo)學(xué)知識(shí)】一、版塊構(gòu)成分析1.間隔條（1）顏色條

.hd{height:40px;background-color:#E3D1A9;

}（2）圖案條.hd{height:40px;background-image:url(../images/minzubj.jpg);}minzubj.jpg【導(dǎo)學(xué)知識(shí)】一、版塊構(gòu)成分析1.間隔條版塊之外：<divclass="hd">間隔條</div><divclass="area">

地域版塊主體內(nèi)容</div><divclass="hd">間隔條</div>版塊之內(nèi)：<divclass="area">

<divclass="hd">間隔條</div>

地域版塊主體內(nèi)容

<divclass="hd">間隔條</div></div>版塊內(nèi)/外邊距：上外邊距<divclass="area">

上內(nèi)邊距

地域版塊主體內(nèi)容

下內(nèi)邊距</div>下外邊距【導(dǎo)學(xué)知識(shí)】一、版塊構(gòu)成分析2.版塊主體背景層<divclass="area"></div>【導(dǎo)學(xué)知識(shí)】一、版塊構(gòu)成分析2.版塊主體遮罩層<divclass="baichang"></div>【導(dǎo)學(xué)知識(shí)】一、版塊構(gòu)成分析2.版塊主體展示外框<ulclass="mingdi"></ul>【導(dǎo)學(xué)知識(shí)】一、版塊構(gòu)成分析2.版塊主體展示圖文項(xiàng)<liclass="hansan"></li>【導(dǎo)學(xué)知識(shí)】一、版塊構(gòu)成分析2.版塊主體更多超鏈接<ahref="#"><divclass="more">更多>></div></a>

利用同樣的邊寫(xiě)代碼邊進(jìn)行測(cè)試的方式，完成民族畫(huà)像展和圖片邊框的創(chuàng)作。民族畫(huà)像可以少加幾個(gè)，更松散一些。圖片邊框可以換換圖片，更有創(chuàng)意一些?！救蝿?wù)小結(jié)】

新建頁(yè)面及樣式表文件單獨(dú)寫(xiě)與在已有頁(yè)面中修改某段代碼會(huì)因?yàn)轫?yè)面其他位置的元素或樣式的影響有所不同，注意前后的關(guān)聯(lián)?！凹埳系脕?lái)終覺(jué)淺，絕知此事要躬行?！笨吹脑俣?，聽(tīng)