第三步网页设计素材wui web化布局

1WUIWEB标准化布局12WEB标准化布局实例23欧莱雅化妆品网站效果34顶部导航模块45布局示意图5注意overflow:hidden的使用6Html代码示意6<divclass="header"> <divclass="hLeft"> <imgclass="logo"src="images/logo.png"/><ulclass="nav"> <li><ahref="#"class="first">护肤</a></li><li><ahref="#">彩妆</a></li><li><ahref="#">护发</a></li><li><ahref="#">染发</a></li><li><ahref="#">男士</a></li></ul></div><divclass="hRight"> <ulclass="help"> <li><ahref="#"class="ico01">评测中心</a></li><li><ahref="#"class="ico02">视频直播</a></li><li><ahref="#"class="ico03">微博互动</a></li><li><ahref="#"class="ico04last">型男手册</a></li></ul><divclass="login"><ahref="#">注册</a>/<ahref="#">登录</a></div><ulclass="custem"><li><ahref="#">品牌故事</a></li><li><ahref="#">会员专区</a></li><li><ahref="#"class="last">电子商城</a></li></ul></div></div>7CSS代码示意7.header,.main,.footer{width:950px;margin:0auto;}.nava,.helpa,.custema,.login,.logina,.copyRight{color:#999;}/*gray*/.header,.help{overflow:hidden;}/*overflow:hidden*/.hLeft,.navli,.helpli,.custemli,.mail{float:left;}.hRight,.login,.custem,.logoB{float:right;}.custem{clear:both;}/*float*/.logo{padding-top:10px;}.nava{line-height:48px;padding:023px}.nav.first{padding-left:0;}.helpa{line-height:42px;padding-left:28px;padding-right:17px;background-repeat:no-repeat;display:block;background-position:leftcenter;}.help.last{padding-right:0;color:#f88c00;}.help.ico01{background-image:url(images/ico01.png);}.help.ico02{background-image:url(images/ico02.png);}.help.ico03{background-image:url(images/ico03.png);}.help.ico04{background-image:url(images/ico04.png);}.login{line-height:40px;}.custema{line-height:48px;padding:025px;}.custem.last{padding-right:0;color:#c0973d;background-image:url(images/car.png);background-repeat:no-repeat;background-position:leftcenter;}8广告图模块89布局示意图9推荐使用div标签10Html代码示意10<divclass="main"> <divclass="bannerBox"> <divclass="winBox"> <divclass="showImgBox"> <ahref="#"><imgsrc="images/adBanner01.png"/></a><ahref="#"><imgsrc="images/adBanner02.png"/></a><ahref="#"><imgsrc="images/adBanner03.png"/></a><ahref="#"><imgsrc="images/adBanner04.png"/></a><ahref="#"><imgsrc="images/adBanner05.png"/></a><ahref="#"><imgsrc="images/adBanner06.png"/></a> </div></div><divclass="numBtn"> <aclass="current">1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a></div></div><divclass="bannerBox"> <ahref="#"><imgsrc="images/ad02.png"/></a></div><divclass="bannerBox"> <ahref="#"><imgsrc="images/ad03.png"/></a></div><divclass="bannerBox"> <ahref="#"><imgsrc="images/ad04.png"/></a></div><divclass="bannerBox"> <ahref="#"><imgsrc="images/ad05.png"/></a></div><divclass="bannerBox"> <ahref="#"><imgsrc="images/ad06.png"/></a></div><divclass="bannerBox"> <ahref="#"><imgsrc="images/ad07.png"/></a></div></div>11CSS代码示意11.bannerBox{margin-bottom:40px;}..bannerBox{position:relative;}.numBtn{position:absolute;left:942px;top:60px;}.numBtna{display:block;width:33px;height:33px;line-height:33px;text-align:center;}.numBtn.current{background-image:url(images/numB.png);color:black;}/*交互实现的相关CSS*/.winBox{width:950px;height:440px;overflow:hidden;position:relative;}.showImgBox{position:absolute;left:0;top:0;}.showImgBoximg{width:950px;height:440px;}.numBtna{cursor:pointer;}.other{position:relative;display:inline;cursor:pointer;}.moreWeb{width:100px;height:80px;position:absolute;left:0;top:15px;display:none;}.moreWeba{padding:5px0;display:block;background-color:black;}.other:hover.moreWeb{display:block;}12底部版权模块1213布局示意图13推荐使用div标签14Html代码示意14<divclass="footer"> <aclass="mail"href="#">订阅电子书刊</a><imgclass="logoB"src="images/logoB.png"/><divclass="navDownBox"> <divclass="navDown"><ahref="#">联系我们</a>|<ahref="#">销售网点</a>|<ahref="#">网站地图</a>|<ahref="#">2013会员积分兑礼</a><divclass="other"><span>其他国家或地区网站</span><divclass="moreWeb"> <ahref="#">日本</a><ahref="#">美国</a><ahref="#">英国</a></div></div></div><divclass="copyRight"> 巴黎欧莱雅顾客关怀中心：会员积分兑礼服务热线：<br/><br/>沪ICP备11031739号-1</div></div></div>15CSS代码示意15.navDownBox{width:530px;margin:0auto;}.mail{display:block;width:172px;line-height:25px;background-color:#282828;color:#666;background-image:url(images/mail.png);background-repeat:no-repeat;background-position:centerright;padding-left:10px;}.navDowna{line-height:20px;padding:015px;}