静态页面布局分析.docx

大体结构Body分为header、content、footer三部分header部分header分为topbar、menu、nav-columncontent部分、footer部分一、Header部分：topbar,menu,nav-column1.topbardiv class=topbar id=topbar div class=wrap ul class=quick-menu frt//右浮动的在左侧写 lia rel=nofollow target=_top href=./ 我的订单/a/li lispan class=line|/span/li lia rel=nofollow target=_top href=./l我的收藏/a/li lispan class=line|/span/li lia href=./ target=_blank帮助中心/a/li lispan class=line|/span/li li class=tel24小时客服热线：400-888-8888/li /ul div class=login fltspan id=loginBar_293 style= class=ie-bugspan class=login-words您好，欢迎光临清风商城！/spana href=。/ class=login-btn登录/aspan class=line|/spana href=./ class=signup-btn注册/a/spanspan id=memberBar_293 style=display:none您好nbsp;span id=uname_293/span！a href=.l[会员中心]/aa href=./ [退出]/a/span/divCSS：.topbar{height:26px;background:#f7f7f7;line-height:26px;border-bottom:1px solid #eee;color:#666;overflow:hidden;}.topbar .wrap{height:26px;}.topbar a{color:#666;}.topbar a:hover{color:#e4393c;}.topbar .line{font-family:Verdana;color:#a40000;}.login a{padding:0 7px;}.quick-menu li{float:left;padding:3px 5px 0;line-height:21px;}注意：1、.login a{padding:0 7px;} .quick-menu li{float:left;padding:3px 5px 0;line-height:21px;}套用padding布局 2、menudiv class=menu div class=wrap clearfix div class=cart frt//购物车div class=minicart has-minicart id=minicart_294a href=./ class=minicart-text 购物车 b class=op-cart-number0/b /a div class=minicart-cont/div/div/div div class=logo flta href=./img alt=请填写logo文字描述 src= border=0//a/div//logo div class=search flt//有哪些信誉好的足球投注网站栏 form action=/index.php/search-result.html method=post class=SearchBar searchBar_ table cellpadding=0 cellspacing=0 tr td class=search_labelinput name=search_keywords size=12 type=text value=请输入商品关键字 onfocus=this.value=(this.value==请输入商品关键字)?:this.value; onblur=this.value=(this.value==)?请输入商品关键字:this.value; class=inputstyle keywords autocompleter=associate_autocomplete_goods:name,goods_id ac_options={} / /td tdinput type=submit value=有哪些信誉好的足球投注网站 class=btn_search onfocus=this.blur();//