柵格系統(tǒng)案例攜程旅行主頁布局

第9課柵格系統(tǒng)案例：攜程旅行主頁布局（4教學(xué)目標(biāo)：掌握柵格系統(tǒng)布局；流式布局和彈性盒子模型掌握彈性盒子模型的屬性教學(xué)內(nèi)容：柵格系統(tǒng)布局案例教學(xué)重點(diǎn)與難點(diǎn)：重點(diǎn)是柵格系統(tǒng)布局，難點(diǎn)是柵格系統(tǒng)教學(xué)過程（導(dǎo)入、講授新課、鞏固練習(xí)、課堂小結(jié)、布置作業(yè)攜程旅行主頁構(gòu)成和布一、框架頁(*.html)中代碼的更1、header部分：刪除id=”header”的div下的代碼，刪除的結(jié)果如下<!--header開始<divid="header"class="uhbc-text-headubbc-將hasBadgetrue,改為hasBadge/*以下各模塊的圖標(biāo)的修改或新增.Icon-background-}.Icon-background-}.Icon-background-}.Icon-background-}.Icon-background-}.Icon-background-}.Icon-background-}.Icon-background-}.Icon-background-}.Icon-background-}.Icon-background-}.Icon-background-}.c-m-{from(rgba(0,0,0,0.6)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,0.6)0%,rgba(0,0,0,0)100%);background-image:linear-gradient(left,rgba(0,0,0,0.6)0%,rgba(0,0,0,0)100%);}/*以下背景顏色為修改或新增的.c-org-background-}.c-gra-background-}.c-red-background-}.c-blu-background-}.c-blu1-background-}.c-blu-background-}.c-pink-background-}.c-gre-background-}.c-pur-background-}metro2{}}metro1{}.uinn-padding:0.625em0.25em0.5em}.umar-margin-}metro1{}metro1{}.ulev-font-}{background-}.uwh-}.t-}.uw-}.umar-margin-}/*以下幾個高度為幾個模塊的高度.uh-}.uh-}.uh-}三、ui-base.css文件中修改的代碼如下.umar-tmargin-top:}.umar-rmargin-right:}四、內(nèi)容頁（*_content.html）中Body部分的代碼如<bodyclass="um-vpbc-bg"<div<divid="page_0"class="upubub-verub-fv"tabindex="0"style="position:relative"><divclass="ubub-verub-<divclass="ubub-veruh-metro1ub-fhub-<divclass="ub-f1<!--分類開始<!--左模塊<divclass="ub-f1ubub-verumar-<!--酒店<divclass="uh-hotlec-pink-me01ubub-verumar-<divclass="ub-imgIcon-metro1ub-ac"<divclass="ulev-1ninn">你有未綁定的<span紅包<!--旅游度假<divclass="uh-otherc-org-me01umar-tubub-<divclass="ub-imgIcon-metro2ub-f1"<divclass="ub-f1tx-c">旅游度假<!--景點(diǎn)門票<divclass="uh-otherc-org-me01umar-tubub-<divclass="ub-imgIcon-metro3ub-f1"<divclass="ub-f1tx-c">景點(diǎn)門票<!--車車<divclass="uh-otherc-gre-me01umar-tubub-<divclass="ub-imgIcon-metro4ub-f1"<divclass="ub-f1tx-c">車車<!--、接送機(jī)--<divclass="ubuh-otherumar-<divclass="ub-f1uh-fourumar-rc-gre-me01ubub-verub-ub-<divclass="ub-imgIcon-ub-<divclass="ub-f1uh-fourc-gre-me01ubub-verub-ub-<divclass="ub-imgIcon-ub-<!--右模塊<divclass="ub-f1ubub-<!--特惠、公寓<divclass="ubuh-otherumar-<divclass="ub-f1uh-otherumar-rc-pink-me01ubub-verub-acub-pc"><divclass="ub-imgIcon-ub-<divclass="ub-f1uh-otherc-pink-me01ubub-verub-ub-<divclass="ub-imgIcon-ub-<!--飛機(jī)<divclass="uh-hotlec-pur-me01ubub-verumar-<divclass="ub-imgIcon-metro9ub-ac"<!--團(tuán)購<divclass="uh-otherc-blu-me01umar-tubub-<divclass="ub-imgIcon-metro10ub-f1"<divclass="ub-f1tx-c">團(tuán)購<!--攻略<divclass="uh-otherc-blu-me01umar-tubub-<divclass="ub-imgIcon-metro11ub-f1"<divclass="ub-f1tx-c">攻