靜態(tài)頁(yè)面布局

1、大體結(jié)構(gòu)Body分為header、content、footer三部分一、 header部分header分為topbar、menu、nav-column二、 content部分、三、 footer部分一、Header部分：topbar,menu,nav-column1.topbar<div class="topbar" id="topbar"> <div class="wrap"> <ul class="quick-menu frt">/右浮動(dòng)的在左側(cè)寫 <li><

2、;a rel="nofollow" target="_top" href="./ ">我的訂單</a></li> <li><span class="line">|</span></li> <li><a rel="nofollow" target="_top" href="./l">我的收藏</a></li> <li>&l

3、t;span class="line">|</span></li> <li><a href="./ " target="_blank">幫助中心</a></li> <li><span class="line">|</span></li> <li class="tel">24小時(shí)客服熱線：400-888-8888</li> </ul> &

4、lt;div class="login flt"><span id="loginBar_293" style="" class="ie-bug"><span class="login-words">您好，歡迎光臨清風(fēng)商城！</span><a href="。/ " class="login-btn">登錄</a><span class="line">|</

5、span><a href="./" class="signup-btn">注冊(cè)</a></span><span id="memberBar_293" style="display:none">您好&nbsp;<span id="uname_293"></span>！<a href=".l">會(huì)員中心</a><a href="./ ">退

6、出</a></span></div>CSS：.topbarheight:26px;background:#f7f7f7;line-height:26px;border-bottom:1px solid #eee;color:#666;overflow:hidden;.topbar .wrapheight:26px;.topbar acolor:#666;.topbar a:hovercolor:#e4393c;.topbar .linefont-family:Verdana;color:#a40000;.login apadding:0 7px;.quick

7、-menu lifloat:left;padding:3px 5px 0;line-height:21px;注意：1、.login apadding:0 7px; .quick-menu lifloat:left;padding:3px 5px 0;line-height:21px;套用padding布局 2、menu<div class="menu"> <div class="wrap clearfix"> <div class="cart frt">/購(gòu)物車<div class="

8、;minicart has-minicart" id="minicart_294"><a href="./" class="minicart-text"> 購(gòu)物車 <b class="op-cart-number">0</b> </a> <div class="minicart-cont"></div></div></div> <div class="logo flt&

9、quot;><a href="./"><img alt="請(qǐng)?zhí)顚憀ogo文字描述" src=" " border="0"/></a></div>/logo <div class="search flt">/搜索欄 <form action="/index.php/search-result.html" method="post" class="SearchBar search

10、Bar_"> <table cellpadding="0" cellspacing="0"> <tr> <td class="search_label"><input name="search_keywords" size="12" type="text" value="請(qǐng)輸入商品關(guān)鍵字" onfocus="this.value=(this.value='請(qǐng)輸入商品關(guān)鍵字'

11、)?'':this.value;" onblur="this.value=(this.value='')?'請(qǐng)輸入商品關(guān)鍵字':this.value;" class="inputstyle keywords" autocompleter="associate_autocomplete_goods:name,goods_id" ac_options="" /> </td> <td><input type="subm

12、it" value="搜索" class="btn_search" onfocus='this.blur();'/></td> </tr> </table></form> <div class="clear"></div> <ul class="qfnavs"><li class="first"><a href="./ " target=&qu

13、ot;_blank">行車記錄儀</a></li><li><a href="./ " target="_blank">格蘭仕空調(diào)</a></li><li><a href="./ " target="_blank">三星電視品牌周</a></li><li><a href="./ " target="_blank">聽歌神

14、器</a></li><li class="last"><a href="./ " target="_blank">樂(lè)視盒子 </a></li></ul> </div> </div></div>CSS:/購(gòu)物車樣式先不研究；logo無(wú)樣式，直接被padding和浮動(dòng)定位置，采用a img的方式搜索欄.menupadding:20px 0 10px;.searchpadding-left:200px;overflow:h

15、idden;/沒(méi)有定高度而是根據(jù)里面的內(nèi)容來(lái).SearchBarbackground:#FFF;.SearchBar table tdpadding:0;.SearchBar .keywordsborder:none;background:none;width:350px;height:14px;line-height:20px;padding:8px 5px 7px 10px;color:#999;float:left; border:3px solid #e4393c.SearchBar .btn_searchborder:0;padding:0;height:35px;color:#FF

16、F;font-weight:bold;float:left;cursor:pointer; background:#e4393c;width:81px;border:3px solid #e4393c.search .qfnavsheight:30px;width:400px;overflow:hidden;/定義了寬高并且超出隱藏.search .qfnavs lifloat:left;line-height:30px;height:30px;padding-right:10px;/ .search .qfnavs li acolor:#999;.search .qfnavs li a:ho

17、vercolor:#e4393c;注意：1.都用的padding來(lái)布局3、nav-column<div class="nav-column"> <div class="wrap"> <div class="all-category flt" id="all-category"> <div class="category-handle" id="category_handle"> <span>全部商品分類</sp

18、an></div><div class="category-box" id="category_box"> <ul class="category-list"> <li class="category-item"> <div class="cat-root-box"> <a href="/index.php/gallery-1.html" class="category-link"&g

19、t;女鞋</a> <div class="cat-lv2-redundancy"> <a href="/index.php/gallery-2.html" class="level2">涼鞋</a> <a href="/index.php/gallery-3.html" class="level2">單鞋</a> <a href="/index.php/gallery-4.html" class=&

20、quot;level2">靴子</a> </div> </div> <div class="cat-children-box clearfix"> <div class="cat-children"> <dl class="sub-category clearfix"> <dt><a href="/index.php/gallery-2.html" class="level2">涼鞋&

21、lt;/a></dt> <dd class="clearfix"> </dd> </dl> <dl class="sub-category clearfix"> <dt><a href="/index.php/gallery-3.html" class="level2">單鞋</a></dt> <dd class="clearfix"> </dd> </

22、dl> <dl class="sub-category clearfix"> <dt><a href="/index.php/gallery-4.html" class="level2">靴子</a></dt> <dd class="clearfix"> </dd> </dl> </div> <div class="close" onclick="$(this).ge

23、tParent('.category-item').removeClass('active')"></div> <div class="cat-link"> <div class="cat-goto"><a href="/index.php/gallery-1.html" target="_blank">女鞋頻道</a><i></i></div> <dl class=

24、"cat-link-brand"> <dt>相關(guān)品牌</dt> <dd> <a href="/index.php/brand-2.html" class="item">CROCS</a> <a href="/index.php/brand-8.html" class="item">百麗</a> <a href="/index.php/brand-13.html" class=&qu

25、ot;item">他她</a> </dd> </dl> </div> </div> </li> <li class="category-item"> <div class="cat-root-box"> <a href="/index.php/gallery-5.html" class="category-link">女包</a> <div class="cat-l

26、v2-redundancy"> <a href="/index.php/gallery-6.html" class="level2">休閑包</a> <a href="/index.php/gallery-7.html" class="level2">時(shí)裝包</a> <a href="/index.php/gallery-8.html" class="level2">錢包卡包</a> &l

27、t;/div> </div> <div class="cat-children-box clearfix"> <div class="cat-children"> <dl class="sub-category clearfix"> <dt><a href="/index.php/gallery-6.html" class="level2">休閑包</a></dt> <dd class=&

28、quot;clearfix"> </dd> </dl> <dl class="sub-category clearfix"> <dt><a href="/index.php/gallery-7.html" class="level2">時(shí)裝包</a></dt> <dd class="clearfix"> </dd> </dl> <dl class="sub-cate

29、gory clearfix"> <dt><a href="/index.php/gallery-8.html" class="level2">錢包卡包</a></dt> <dd class="clearfix"> </dd> </dl> </div> <div class="close" onclick="$(this).getParent('.category-item'

30、).removeClass('active')"></div> <div class="cat-link"> <div class="cat-goto"><a href="/index.php/gallery-5.html" target="_blank">女包頻道</a><i></i></div> <dl class="cat-link-brand"> &

31、lt;dt>相關(guān)品牌</dt> <dd> <a href="/index.php/brand-1.html" class="item">CHANEL</a> <a href="/index.php/brand-3.html" class="item">DIOR</a> <a href="/index.php/brand-4.html" class="item">ELLE</a>

32、; <a href="/index.php/brand-5.html" class="item">Esprit</a> <a href="/index.php/brand-6.html" class="item">ONLY</a> <a href="/index.php/brand-7.html" class="item">VERO MODA</a> <a href="/index.php

33、/brand-11.html" class="item">麥包包</a> </dd> </dl> </div> </div> </li> <li class="category-item no-lv2"> <div class="cat-root-box"> <a href="/index.php/gallery-9.html" class="category-link">

34、飾品</a> </div> <div class="cat-children-box clearfix"> </div> </li> <li class="category-item"> <div class="cat-root-box"> <a href="/index.php/gallery-10.html" class="category-link">女裝</a> <div c

35、lass="cat-lv2-redundancy"> <a href="/index.php/gallery-11.html" class="level2">上衣</a> <a href="/index.php/gallery-12.html" class="level2">連衣裙</a> <a href="/index.php/gallery-13.html" class="level2">

36、;褲裝</a> </div> </div> <div class="cat-children-box clearfix"> <div class="cat-children"> <dl class="sub-category clearfix"> <dt><a href="/index.php/gallery-11.html" class="level2">上衣</a></dt>

37、; <dd class="clearfix"> </dd> </dl> <dl class="sub-category clearfix"> <dt><a href="/index.php/gallery-12.html" class="level2">連衣裙</a></dt> <dd class="clearfix"> </dd> </dl> <dl cla

38、ss="sub-category clearfix"> <dt><a href="/index.php/gallery-13.html" class="level2">褲裝</a></dt> <dd class="clearfix"> </dd> </dl> </div> <div class="close" onclick="$(this).getParent('.ca

39、tegory-item').removeClass('active')"></div> <div class="cat-link"> <div class="cat-goto"><a href="/index.php/gallery-10.html" target="_blank">女裝頻道</a><i></i></div> <dl class="cat-link-

40、brand"> <dt>相關(guān)品牌</dt> <dd> <a href="/index.php/brand-4.html" class="item">ELLE</a> <a href="/index.php/brand-5.html" class="item">Esprit</a> <a href="/index.php/brand-6.html" class="item"

41、>ONLY</a> <a href="/index.php/brand-7.html" class="item">VERO MODA</a> </dd> </dl> </div> </div> </li> <li class="category-item"> <div class="cat-root-box"> <a href="/index.php/gallery-14.h

42、tml" class="category-link">美容護(hù)膚</a> <div class="cat-lv2-redundancy"> <a href="/index.php/gallery-15.html" class="level2">潔面</a> <a href="/index.php/gallery-16.html" class="level2">化妝水/爽膚水</a> <

43、a href="/index.php/gallery-17.html" class="level2">面霜/面乳</a> <a href="/index.php/gallery-18.html" class="level2">面膜</a> <a href="/index.php/gallery-19.html" class="level2">套裝</a> <a href="/index.php/

44、gallery-20.html" class="level2">防曬</a> <a href="/index.php/gallery-21.html" class="level2">眼部護(hù)理</a> </div> </div> <div class="cat-children-box clearfix"> <div class="cat-children"> <dl class="

45、sub-category clearfix"> <dt><a href="/index.php/gallery-15.html" class="level2">潔面</a></dt> <dd class="clearfix"> </dd> </dl> <dl class="sub-category clearfix"> <dt><a href="/index.php/galle

46、ry-16.html" class="level2">化妝水/爽膚水</a></dt> <dd class="clearfix"> </dd> </dl> <dl class="sub-category clearfix"> <dt><a href="/index.php/gallery-17.html" class="level2">面霜/面乳</a></dt>

47、; <dd class="clearfix"> </dd> </dl> <dl class="sub-category clearfix"> <dt><a href="/index.php/gallery-18.html" class="level2">面膜</a></dt> <dd class="clearfix"> </dd> </dl> <dl clas

48、s="sub-category clearfix"> <dt><a href="/index.php/gallery-19.html" class="level2">套裝</a></dt> <dd class="clearfix"> </dd> </dl> <dl class="sub-category clearfix"> <dt><a href="/index.p

49、hp/gallery-20.html" class="level2">防曬</a></dt> <dd class="clearfix"> </dd> </dl> <dl class="sub-category clearfix"> <dt><a href="/index.php/gallery-21.html" class="level2">眼部護(hù)理</a></dt&

50、gt; <dd class="clearfix"> </dd> </dl> </div> <div class="close" onclick="$(this).getParent('.category-item').removeClass('active')"></div> <div class="cat-link"> <div class="cat-goto">&l

51、t;a href="/index.php/gallery-14.html" target="_blank">美容護(hù)膚頻道</a><i></i></div> <dl class="cat-link-brand"> <dt>相關(guān)品牌</dt> <dd> <a href="/index.php/brand-9.html" class="item">貝佳斯</a> <a h

52、ref="/index.php/brand-10.html" class="item">芳草集</a> <a href="/index.php/brand-12.html" class="item">倩碧</a> <a href="/index.php/brand-14.html" class="item">雅漾</a> </dd> </dl> </div> </div

53、> </li> </ul></div><div class="nav flt"><ul class="MenuList MenuList_288 clearfix"> <li><a href="http:/localhost:88/index.php/index.html" >首頁(yè)</a></li> <li><a href="http:/localhost:88/index.php/member

54、.html" >會(huì)員中心</a></li> <li><a href="http:/localhost:88/index.php/brand-showlist.html" >品牌區(qū)</a></li> <li><a href="http:/localhost:88/index.php/article-help-l-1.html" >幫助中心</a></li> <li><a href="http:/

55、localhost:88/index.php/article-cominfo_about-l-17.html" >關(guān)于我們</a></li></ul></div>CSS:這里只寫nav的樣式.navwidth:1000px;overflow:hidden;.MenuListheight:39px;.MenuList lifloat:left;.MenuList li acolor:#FFF;padding:0 25px;display:block;height:39px;line-height:38px;font-size:14p

56、x;font-family:'Microsoft Yahei'float:left;font-weight:bold;.MenuList .currentbackground:#a40000;注意：1.z-index 是表示數(shù)字大的div在數(shù)字小的上面顯示2.依舊是采用padding來(lái)布局的其他內(nèi)容使用的padding布局特別是在ul li中常見四、 footer<div id="footer" class="footer"> <div class="foot-img"><img src=

57、'http:/localhost:88/themes/yx/images/ad/footimg.jpg' alt="重體驗(yàn)，更開放" width='990'height='100' /></div><div class="service-column"> <div class="wrap clearfix"> <div class="weibo-area frt"><ul> <li class=&

58、quot;sina-weibo"> <a class="weibo-ico" href="./ " target="_blank">新浪微博</a> <div class="weibo-info"> <p><a href="./" target="_blank">查看微博</a></p> <a class="weibo-btn" href="

59、./" target="_blank">立即關(guān)注</a> </div> </li> <li class="qq-weibo"> <a class="weibo-ico" href="./" target="_blank">騰訊微博</a> <div class="weibo-info"> <p><a href="./" target=&qu

60、ot;_blank">查看微博</a></p> <a class="weibo-btn" href="./" target="_blank">立即關(guān)注</a> </div> </li> </ul></div> <ul class="help-area flt"> <li class="item1"><div class="content-list

61、"> <h3 class="content-title">新手上路</h3> <div class='article-index-list'><ul> <li class="article-index lv-1 content-item"> <a href="http:/localhost:88/index.php/article-help_babyhelp-51.html" title="顧客必讀">顧客必讀&

62、lt;/a></li> <li class="article-index lv-1 content-item"> <a href="http:/localhost:88/index.php/article-help_babyhelp-49.html" title="訂單的幾種狀態(tài)">訂單的幾種狀態(tài)</a></li> <li class="article-index lv-1 content-item"> <a href="

63、http:/localhost:88/index.php/article-help_babyhelp-48.html" title="積分獎(jiǎng)勵(lì)計(jì)劃">積分獎(jiǎng)勵(lì)計(jì)劃</a></li> <li class="article-index lv-1 content-item"> <a href="http:/localhost:88/index.php/article-help_babyhelp-47.html" title="商品退貨保障">商品退貨保障&l

64、t;/a></li> </ul></div></div></li> <li class="item2"><div class="content-list"> <h3 class="content-title">購(gòu)物指南</h3> <div class='article-index-list'><ul> <li class="article-index lv-1 content-item"> <a href="http:/localhost:88/index.p