第三步網頁設計素材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="#">護發(fā)</a></li><li><ahref="#">染發(fā)</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="#">會員專區(qū)</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>其他國家或地區(qū)網站</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;}