栅格系统案例携程旅行主页布局

第9课栅格系统案例：携程旅行主页布局（4教学目标：掌握栅格系统布局；流式布局和弹性盒子模型掌握弹性盒子模型的属性教学内容：栅格系统布局案例教学重点与难点：重点是栅格系统布局，难点是栅格系统教学过程（导入、讲授新课、巩固练习、课堂小结、布置作业携程旅行主页构成和布一、框架页(*.html)中代码的更1、header部分：删除id=”header”的div下的代码，删除的结果如下<!--header开始<divid="header"class="uhbc-text-headubbc-将hasBadgetrue,改为hasBadge/*以下各模块的图标的修改或新增.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:}四、内容页（*_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">旅游度假<!--景点门票<divclass="uh-otherc-org-me01umar-tubub-<divclass="ub-imgIcon-metro3ub-f1"<divclass="ub-f1tx-c">景点门票<!--车车<divclass="uh-otherc-gre-me01umar-tubub-<divclass="ub-imgIcon-metro4ub-f1"<divclass="ub-f1tx-c">车车<!--、接送机--<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-<!--飞机<divclass="uh-hotlec-pur-me01ubub-verumar-<divclass="ub-imgIcon-metro9ub-ac"<!--团购<divclass="uh-otherc-blu-me01umar-tubub-<divclass="ub-imgIcon-metro10ub-f1"<divclass="ub-f1tx-c">团购<!--攻略<divclass="uh-otherc-blu-me01umar-tubub-<divclass="ub-imgIcon-metro11ub-f1"<divclass="ub-f1tx-c">攻