【導讀】團購在近兩年特別火。尤其是今年，騰訊與國外最大的團購網站Grounpon聯(lián)手之后，團購的千團大戰(zhàn)發(fā)展到了白熱化！那么團購為什么會在短短兩年的發(fā)展中如此火爆呢？請看下面的分解。團購對消費者來說，最大的實惠就一個：更底的價格。這就是人的力量了。比如，你去買凱樂爾咖啡，五百克的，你一個人到淘寶店鋪去買，可能要八九十塊錢，到大商場去買可能更貴。上個月G團網就搞了這個團購活動，最低團購人數(shù)是10人，我39塊錢就買回。這個就是團購的一大優(yōu)勢。的人多了，就可以提高我們與商家談判的籌碼，我正是人的力量。下的聚劃算和騰訊旗下的QQ團購等等。主要技術有Ajax、CSS、Xml、JavaScript還有數(shù)據(jù)庫以及思想等等。但是團購系統(tǒng)之于我一個人獨立開發(fā)來說的話，在短時間內還是有難度的。前應用最廣泛的SHOPEX平臺做了一個小團購網站。公司團購網站的風格采用紅色調，這樣顯得熱情大氣而且吸引眼球。頁、今日團購頁面和往期團購頁面等等。實現(xiàn)的功能有登陸，注冊功能、會員管理功能、

　　

【正文】 業(yè)出版社 李清 編著 《設計模式之禪》 機械工業(yè)出版社 秦小波 編著 2021 年 6月 第一版 SHOPEX 官方網站資源參考：請點擊 SHOPEX 論壇資源參考：請點擊 欲知更多相關資源，請參見我的個人官網： 32 附錄： 相關代碼匯總： {require file=block/} div class=mains div class=left_body{widgets id=i1}/div div class=right_body {widgets id=i2} div class=main_show div class=goods_ad{widgets id=i3}/div div class=goods_show{widgets id=i4}/div /div {widgets id=i5} /div /div {require file=block/} div id=top div class=topmain div class=logo div style=width:0。 height:0。 fontsize:0。 overflow:hidden。 {widgets id=logo2}/div {widgets id=t1}/div div class=topinfo div class=toplogin{widgets id=t2}/div div class=topmenu{widgets id=t3}/div div class=topsearch div class=topkeysearch{widgets id=t4}/div div class=topkey{widgets id=t5}/div /div /div /div /div div id=foot 33 div class=footmain div class=footlogo div class=hidd{widgets id=f11}/div {widgets id=f1}/div div class=footinfo{widgets id=f2}{footer}/div div class=clear/div /div /div /body/html @import url()。 @import url()。 @import url()。 body { fontfamily: Arial, Helvetica, sansserif。 fontsize: 12px。 color:666。 textalign:center。 lineheight:23px。 } * { margin:0。 padding:0。 } a { color:666。 textdecoration:none。 } a:hover { fontsize: 12px。 textdecoration:none。 color:f48a00。 } ul, li { lineheight:23px。 } h3, h4, h5, h6 { padding:0。 margin:5px 0 0 0。 } h2 { fontsize:16px。 fontweight:bold。 textalign:left。 34 } h3 { textalign:left。 fontsize:14px。 fontweight:bold。 } /*布局樣式 */ .mains { width:1007px。 margin:0 auto。 overflow:hidden。 textalign:left。 } .left_body { float:left。 width:217px。 margin:0 10px。 display:inline。 overflow:hidden。 } .right_body { float:left。 width:760px。 overflow:hidden。 } .main_all { width:950px。 marginleft:30px。 marginbottom:10px。 overflow:hidden。 } .main_show { height:256px。 marginbottom:10px。 background:url()。 overflow:hidden。 } .main_show .goods_ad { float:left。 width:190px。 overflow:hidden。 } .main_show .goods_show { float:left。 width:570px。 overflow:hidden。 35 background:url() norepeat。 } /*附加布局樣式 */ .clear { bordertop:1px solid transparent !important。 bordertop:0。 clear:both。 lineheight:0。 fontsize:0。 height:0。 height:1%。 } .more { textalign:right。 marginright:5px。 } .more:after { content:。 display:block。 clear:both。 visibility:hidden。 height:0。 } /*附加寬度布局樣式 */ /*商品分類 goodscat*/ .GoodsCategoryWrap { color:654529。 padding:20px 0 20px 15px。 。 border:1px solid e1e1e1。 background:fff url() repeaty。 } .ccatdepth1 { lineheight:25px。 } .ccatdepth1 a { color:654529。 fontsize:14px。 paddingright:96px。 background:none。 } .ccatdepth1 a:hover { fontsize:14px。 fontweight:bold。 36 } .ccatdepth2 { lineheight:23px。 padding:5px 0 0 0。 bordertop:1px dashed 654529。 } .ccatdepth2 a { color:654529。 fontweight:normal。 borderbottom:none。 background:none。 padding:0。 margin:0。 fontsize:12px。 } .ccatdepth2 a:hover { color:fff。 background:654529。 fontsize:12px。 } .ccatdepth3 { margin:3px 0 0 10px。 } .ccatdepth3 a { color:333。 background:none。 padding:0。 } /*排行榜 */ .RankingList .pic { textalign:center。 } .RankingList li { padding:6px 0。 background:none。 borderbottom:1px dotted dedede。 } .RankingList li span { width:20px。 height:22px。 background:url() norepeat 0 2px。 display:block。 float:left。 color:ccc。 textalign:center。 } 37 .RankingList .hl span { fontsize:11px。 lineheight:22px。 fontweight:bold。 color:8a1331。 background:url() norepeat 0 22px。 } /*路徑顯示 */ .Navigation { lineheight:35px。 paddingleft:25px。 background:url() norepeat。 borderbottom:2px solid d86704。 marginbottom:10px。 } .now { color:aed352。 } /*品牌例表 */ .BrandListWrap img { width:80px。 height:30px。 border:1px solid dedede。 } /*幫助中心頁站點目錄 */ .border2 .TreeList { textalign:left。 } .border2 .TreeList .cat1 { borderbottom:1px dashed 699d32。 padding:6px 0 8px 5px。 } .border2 .TreeList .cat1 a { color:699d32。 fontweight:bold。 paddingleft:20px。 background:url() norepeat left。 display:inline。 } .border2 .TreeList .cat2 { lineheight:150%。 margin:5px 0 0 5px。 } 38 .border2 .TreeList .cat2 a { color:333。 fontweight:normal。 borderbottom:none。 background:none。 padding:0。 margin:0。 } /*價格篩選 */ .border2 .GoodsCategoryWrap, .border3 .GoodsCategoryWrap, .border5 .GoodsCategoryWrap { padding:0。 margin:2px。 background:none。 border:none。 } .border2 .ccatdepth1, .border3 .ccatdepth1, .border5 .ccatdepth1 { border:none。 padding:0。 display:inline。 } .border2 .ccatdepth1 a, .border3 .ccatdepth1 a, .border5 .ccatdepth1 a { border:none。 } .border2 .ccatdepth2, .border3 .ccatdepth2, .border5 .ccatdepth2 { lineheight:150%。 border:none。 } .border2 .ccatdepth2 td, .border3 .ccatdepth2 td, .border5 .ccatdepth2 td { width:90px。 textalign:center。 } /*首頁單層商品顯示 */ .border6 .GoodsListWrap { } .border6 .GoodsList { paddingtop:10px。 marginright:30px。 } .border6 .itemsWrap { 39 marginbottom:15px。 borderbottom:1px dashed dedede。 } .border6 .goodsImg { border:1px solid deded