实例介绍
【实例简介】九块邮触屏版淘宝客单页-手机wap购物网站模板
【实例截图】
【核心代码】
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="full-screen" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<meta name="apple-itunes-app" content="app-id=590973130">
<link rel="shortcut icon" type="image/x-icon" href="../www.jiukuaiyou.com/favicon.ico" media="screen">
<link href="css/global.css" rel="stylesheet" type="text/css" />
<title>仿九块邮触屏版淘宝客单页手机wap购物网站模板-www.genban.org整理发布</title>
<img src="../hm.baidu.com/hm.gif@si=39783c2b2b90a45e774b4dd32bdff570&et=0&nv=1&st=1&v=wap-0-0.2&rnd=5779471809" width="0" height="0" ></img>
<script src="js/zepto.js"></script>
<script src="js/underscore.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','../www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41501053-4', 'jiukuaiyou.com');
ga('send', 'pageview');
</script>
</head>
<body>
<div class="main">
<div class="app">
<div id="head">
<div class="fixtop">
<span id="find"><i class="ico08"><img src="images/ss1.png" width="29px" /></i></span>
<span id="index"><i class="ico07"><img src="images/111.png" width="78px" /></i></span>
<span id="user"><i class="ico10"><img src="images/jd1.png" width="20px" style="float: left;" />签到</i></i></span>
</div>
<ul class="head-nav">
<a href="default.htm"><li class="active">首页</li></a>
<a href="jiu/yugao"><li>明日预告</li></a>
<a href="zc"><li>热卖专场</li></a>
<a href="../m.juanpi.com/default.htm"><li>卷皮折扣</li></a>
</ul>
<div id="nav" class="view currents out">
<div id="search-box">
<div id="search-form" method="get" >
<div class="box-search">
<span class="icon-search icon"></span>
<input id="keyword" x-webkit-speech type="text" name="key" placeholder="请输入商品关键字" autocomplete="off" value="">
<span id="delete-search" class="delete-button" style="display: none;"><i class="ico20"><img src="images/X.png" width="18px" /></i></span>
</div>
<button type="submit" id="search-submit">
<i class="ico01">
<img src="images/search-w.png" />
<img class="active" src="images/search-o.png" style="display:none;" />
</i>
</button>
</div>
</div>
<ul class="nav-list">
<a href="jiu/all"><li>全部</li></a>
<a href="jiu/fushi"><li>服饰</li></a>
<a href="jiu/meizhuang"><li>美妆</li></a>
<a href="jiu/xiebao"><li>鞋包配饰</li></a>
<a href="jiu/meishi"><li>美食</li></a>
<a href="jiu/jujia"><li>居家电器</li></a>
<a href="jiu/muying"><li>母婴</li></a>
<a href="jiu/wenti"><li>文体</li>
<a href="shijiu"><li>十九块九</li></a>
</ul>
</div>
</div>
<div id="goods">
<div id="cover"></div>
<div id="dwon"></div>
<ul class="goods-list clear">
<li>
<a target="_blank" href="jump/67939165">
<img src="http://s1.juancdn.com/bao/140305/8/f/53171e5bdfe40_580x380.jpg_290x190.jpg" />
</a>
<a target="_blank" href="jump/67939165">
<h1><i class="ico13"><img src="images/sdj.png"></i>可爱时尚实用迷你照明电筒 【包邮】</h1>
<div class="list-price buy">
<i>￥</i><span class="price-new">9.9</span><i class="del">/￥19</i>
<span class="good-btn">
<i class="ico15"><img src="images/sts.png"/></i>
去抢购
</span>
</div>
</a>
</li>
<li>
<a target="_blank" href="jump/66939495">
<img src="http://s1.juancdn.com/bao/140307/e/4/53198186beb1a_580x380.jpg_290x190.jpg" />
</a>
<a target="_blank" href="jump/66939495">
<h1><i class="ico13"><img src="images/sdj.png"></i>男士全棉中筒运动袜（5双） 【包邮】</h1>
<div class="list-price end">
<i>￥</i><span class="price-new">9.9</span><i class="del">/￥98</i>
<span class="good-btn">抢光了</span>
</div>
</a>
</li>
<li>
<a target="_blank" href="jump/60049305">
<img src="http://s1.juancdn.com/bao/140304/e/e/53154235f1904_290x190.jpg_290x190.jpg" />
</a>
<a target="_blank" href="jump/60049305">
<h1><i class="ico13"><img src="images/sdj.png"></i>美白补水蜗牛原液面膜贴（6片） 【包邮】</h1>
<div class="list-price end">
<i>￥</i><span class="price-new">9</span><i class="del">/￥78</i>
<span class="good-btn">抢光了</span>
</div>
</a>
</li>
<li>
<a target="_blank" href="jump/65939295">
<img src="http://s1.juancdn.com/bao/140219/f/d/530474f780e53_290x190.jpg_290x190.jpg" />
</a>
<a target="_blank" href="jump/65939295">
<h1><i class="ico13"><img src="images/sdj.png"></i>超薄脚尖透明短丝袜（5双装） 【包邮】</h1>
<div class="list-price buy">
<i>￥</i><span class="price-new">5.9</span><i class="del">/￥23</i>
<span class="good-btn">
<i class="ico15"><img src="images/sts.png"/></i>
去抢购
</span>
</div>
</a>
</li>
<li>
<a target="_blank" href="jump/65939585">
<img src="http://s1.juancdn.com/bao/140302/5/a/531340c8af2e6_290x190.jpg_290x190.jpg" />
</a>
<a target="_blank" href="jump/65939585">
<h1><i class="ico13"><img src="images/sdj.png"></i>百搭修身高腰PU皮短裤 【包邮】</h1>
<div class="list-price buy">
<i>￥</i><span class="price-new">9.9</span><i class="del">/￥38</i>
<span class="good-btn">
<i class="ico15"><img src="images/sbs.png"/></i>
去抢购
</span>
</div>
</a>
</li>
<li>
<a target="_blank" href="jump/69939975">
<img src="http://s1.juancdn.com/bao/140307/b/2/53198ee149dce_580x380.jpg_290x190.jpg" />
</a>
<a target="_blank" href="jump/69939975">
<h1><i class="ico13"><img src="images/sdj.png"></i>男童长袖纯棉打底衫 【包邮】</h1>
<div class="list-price buy">
<i>￥</i><span class="price-new">8.8</span><i class="del">/￥58</i>
<span class="good-btn">
<i class="ico15"><img src="images/sbs.png"/></i>
去抢购
</span>
</div>
</a>
</li>
<li>
<a target="_blank" href="jump/60939865">
<img src="http://s1.juancdn.com/bao/140307/0/8/53198c234151e_580x380.jpg_290x190.jpg" />
</a>
<a target="_blank" href="jump/60939865">
<h1><i class="ico13"><img src="images/sdj.png"></i>经典鸟巢水晶洞洞鞋 【包邮】</h1>
<div class="list-price buy">
<i>￥</i><span class="price-new">9.9</span><i class="del">/￥165</i>
<span class="good-btn">
<i class="ico15"><img src="images/sbs.png"/></i>
去抢购
</span>
</div>
</a>
</li>
<li>
<a target="_blank" href="jump/62839235">
<img src="http://s1.juancdn.com/bao/140307/6/7/531969f054d82_580x380.jpg_290x190.jpg" />
</a>
<a target="_blank" href="jump/62839235">
<h1><i class="ico13"><img src="images/sdj.png"></i>雅康琪黑糖沙琪玛（500g） 【包邮】</h1>
<div class="list-price buy">
<i>￥</i><span class="price-new">9.9</span><i class="del">/￥12</i>
<span class="good-btn">
<i class="ico15"><img src="images/sbs.png"/></i>
去抢购
</span>
</div>
</a>
</li>
<li>
<a target="_blank" href="jump/60839945">
<img src="http://s1.juancdn.com/bao/140307/d/2/53197bb2c0355_580x380.jpg_290x190.jpg" />
<i class="ico05"><img src="images/yugao2.png"><em>专场</em> </i> </a>
<a target="_blank" href="jump/60839945">
<h1><i class="ico13"><img src="images/sdj.png"></i>苹果系列产品数据线 【包邮】</h1>
<div class="list-price buy">
<i>￥</i><span class="price-new">5.5</span><i class="del">/￥20</i>
<span class="good-btn">
<i class="ico15"><img src="images/sts.png"/></i>
去抢购
</span>
</div>
</a>
</li>
<li>
<a target="_blank" href="jump/61839445">
<img src="http://s1.juancdn.com/bao/140307/6/e/53195f9844a8c_580x380.jpg_290x190.jpg" />
<i class="ico05"><img src="images/yugao2.png"><em>专场</em> </i> </a>
<a target="_blank" href="jump/61839445">
<h1><i class="ico13"><img src="images/sdj.png"></i>户外运动保温太空杯(500ml) 【包邮】</h1>
<div class="list-price end">
<i>￥</i><span class="price-new">9.9</span><i class="del">/￥39</i>
<span class="good-btn">抢光了</span>
</div>
</a>
</li>
<li>
<a target="_blank" href="jump/69839935">
<img src="http://s1.juancdn.com/bao/140307/8/3/531926896fee5_580x380.jpg_290x190.jpg" />
<i class="ico05"><img src="images/yugao2.png"><em>专场</em> </i> </a>
<a target="_blank" href="jump/69839935">
<h1><i class="ico13"><img src="images/sdj.png"></i>桶装彩色铅笔(18色) 【包邮】</h1>
<div class="list-price buy">
<i>￥</i><span class="price-new">9.9</span><i class="del">/￥11</i>
<span class="good-btn">
<i class="ico15"><img src="images/sts.png"/></i>
去抢购
</span>
</div>
</a>
</li>
<li>
<a target="_blank" href="jump/60839535">
<img src="http://s1.juancdn.com/bao/140304/4/3/531598591094c_290x190.jpg_290x190.jpg" />
<i class="ico05"><img src="images/yugao2.png"><em>专场</em> </i> </a>
<a target="_blank" href="jump/60839535">
<h1><i class="ico13"><img src="images/sdj.png"></i>USB线/电线理线器 【包邮】</h1>
<div class="list-price buy">
<i>￥</i><span class="price-new">3.9</span><i class="del">/￥15</i>
<span class="good-btn">
<i class="ico15"><img src="images/sbs.png"/></i>
去抢购
</span>
</div>
</a>
</li>
<li>
<a target="_blank" href="jump/68049215">
<img src="http://s1.juancdn.com/bao/140306/c/3/531856b2769cd_580x380.jpg_290x190.jpg" />
</a>
<a target="_blank" href="jump/68049215">
<h1><i class="ico13"><img src="images/sdj.png"></i>iphone5/5s彩绘手机壳 【包邮】</h1>
<div class="list-price buy">
<i>￥</i><span class="price-new">3.5</span><i class="del">/￥18</i>
<span class="good-btn">
<i class="ico15"><img src="images/sts.png"/></i>
去抢购
</span>
</div>
</a>
</li>
<li>
<a target="_blank" href="jump/62049705">
<img src="http://s1.juancdn.com/bao/140305/0/d/5316d572d52d3_580x380.jpg_290x190.jpg" />
</a>
<a target="_blank" href="jump/62049705">
<h1><i class="ico13"><img src="images/sdj.png"></i>滋润祛黄抗氧化纯离子水（120ml） 【包邮】</h1>
<div class="list-price buy">
<i>￥</i><span class="price-new">7.8</span><i class="del">/￥48</i>
<span class="good-btn">
<i class="ico15"><img src="images/sts.png"/></i>
去抢购
</span>
</div>
</a>
</li>
<li>
<a target="_blank" href="jump/62049005">
<img src="http://s1.juancdn.com/bao/140307/6/a/5319281807bb6_580x380.jpg_290x190.jpg" />
</a>
<a target="_blank" href="jump/62049005">
<h1><i class="ico13"><img src="images/sdj.png"></i>祛痘控油泡沫洗面奶（80g） 【包邮】</h1>
<div class="list-price buy">
<i>￥</i><span class="price-new">7.9</span><i class="del">/￥39</i>
<span class="good-btn">
<i class="ico15"><img src="images/sts.png"/></i>
去抢购
</span>
</div>
</a>
</li>
<li>
<a target="_blank" href="jump/68939895">
<img src="http://s1.juancdn.com/bao/140307/8/8/53198306b6c4e_580x380.jpg_290x190.jpg" />
</a>
<a target="_blank" href="jump/68939895">
<h1><i class="ico13"><img src="images/sdj.png"></i>夏季圆领修身棉T恤 【包邮】</h1>
<div class="list-price end">
<i>￥</i><span class="price-new">9.9</span><i class="del">/￥90</i>
<span class="good-btn">抢光了</span>
</div>
</a>
</li>
<li>
<a target="_blank" href="jump/69939395">
<img src="http://s1.juancdn.com/bao/140219/d/0/53045ffd8a85a_290x190.jpg_290x190.jpg" />
</a>
<a target="_blank" href="jump/69939395">
<h1><i class="ico13"><img src="images/sdj.png"></i>春夏款百褶半身裙 【包邮】</h1>
<div class="list-price buy">
<i>￥</i><span class="price-new">9.9</span><i class="del">/￥98</i>
<span class="good-btn">
<i class="ico15"><img src="images/sts.png"/></i>
去抢购
</span>
</div>
</a>
</li>
<li>
<a target="_blank" href="jump/64939675">
<img src="http://s1.juancdn.com/bao/140307/e/9/531944c3c6801_580x380.jpg_290x190.jpg" />
</a>
<a target="_blank" href="jump/64939675">
<h1><i class="ico13"><img src="images/sdj.png"></i>黑白条纹夏季温馨亲子装 【包邮】</h1>
<div class="list-price buy">
<i>￥</i><span class="price-new">9.9</span><i class="del">/￥79</i>
<span class="good-btn">
<i class="ico15"><img src="images/sts.png"/></i>
去抢购
</span>
</div>
</a>
</li>
<li>
<a target="_blank" href="jump/66939955">
<img src="http://s1.juancdn.com/bao/140228/7/1/531074121a40c_290x190.jpg_290x190.jpg" />
</a>
<a target="_blank" href="jump/66939955">
<h1><i class="ico13"><img src="images/sdj.png"></i>欧式风格装饰小抱枕（40x40cm） 【包邮】</h1>
<div class="list-price buy">
<i>￥</i><span class="price-new">9.9</span><i class="del">/￥33</i>
<span class="good-btn">
<i class="ico15"><img src="images/sts.png"/></i>
去抢购
</span>
</div>
</a>
</li>
<li>
<a target="_blank" href="jump/65939755">
<img src="http://s1.juancdn.com/bao/140301/9/0/531190e2b7f03_290x190.jpg_290x190.jpg" />
</a>
<a target="_blank" href="jump/65939755">
<h1><i class="ico13"><img src="images/sdj.png"></i>深层修复滋养顺滑洗护套装 【包邮】</h1>
<div class="list-price buy">
<i>￥</i><span class="price-new">9.9</span><i class="del">/￥53</i>
<span class="good-btn">
<i class="ico15"><img src="images/sts.png"/></i>
去抢购
</span>
</div>
</a>
</li>
</ul>
<div class="paging">
<div class="paging-nav">
<a class="next" href="jiu/all/2">下一页</a> </div>
<div class="paging-totop">
<a href="#"><i class="ico14"></i>回到顶部</a>
</div>
</div>
</div>
<div id="foot">
<div class="foot-nav">
<a href="default.htm">首页</a><i></i><a href="app">客户端</a><i></i><a href="../www.jiukuaiyou.com/default.htm">电脑版</a>
</div>
<div class="foot-copyright"></div>
<h2>(c)2014九块邮</h2>
</div>
<div id="seach-page" class="view current out">
<div id="p-head">
<div class="fixtop">
<span id="p-find"><i class="ico18"><img src="images/left.png" width="16px;" /></i></span>
<span id="p-index">搜索结果</span>
<span id="p-user"></span>
</div>
</div>
<div id="p-search-box">
<div id="p-search-form" >
<div class="box-search">
<span class="icon-search icon"></span>
<input id="s-keyword" type="text" placeholder="请输入商品关键字" autocomplete="off" value="">
<span id="p-delete-search" class="delete-button" style="display: none;"> </span>
</div>
<input type="hidden" id="p-page" value="">
<button type="submit" id="p-search-submit">
<i class="ico01">
<img src="images/search-w.png" />
<img class="active" src="images/search-o.png" style="display:none;" />
</i>
</button>
</div>
</div>
<div id="p-goods" class="clear">
<ul id="element" class="goods-list clear" >
</ul>
</div>
<div id="foot">
<div class="foot-nav">
<a href="default.htm">首页</a><i></i><a href="app">客户端</a><i></i><a href="../www.jiukuaiyou.com/default.htm">电脑版</a>
</div>
<div class="foot-copyright"></div>
<h2>(c)2014九块邮</h2>
</div>
</div>
<div id="alert_wrap" class="alert_black_bg">
<div class="alert_box">
<div class="alert_content">
<div class="message">
<i class="close"></i>
<img class="icon" src="images/cus_jqy.png">
<div class="jky_des">
<p class="f14">使用九块邮客户端</p>
<p class="f12 yellow">全场九块九包邮，</p>
<p class="f12 yellow">体验掌上的小幸福</p>
</div>
</div>
<a href="app" class="sub">立即使用</a>
</div>
</div>
</div>
<div class="alert_fullbg"></div>
<!-- /*Download alert*/ -->
<div id="alert_exchange_new" class="alert_bg" style="left: 50%; margin-left:-130px; top: 35px; position: fixed;">
<div class="alert_box">
<div class="alert_top">
<i id="close_box" class="close"></i>
</div>
<a href="app">
<div class="alert_content">
<div class="message">
<img class="icon" src="images/cus_jqy.png" />
<p class="fontL">九块邮客户端</p>
<p class="fontS">体验更好，功能更全！</p>
</div>
<button class="sub" value="">马上下载</button>
</div>
</a>
</div>
</div>
<!-- <div id="alert_wrap" class="alert_black_bg">
<div class="alert_box">
<div class="alert_content">
<div class="message">
<i class="close"></i>
<img class="icon" src="images/cus_jqy.png">
<div class="jky_des">
<p class="f14">使用九块邮客户端</p>
<p class="f12 yellow">全场九块九包邮，</p>
<p class="f12 yellow">体验掌上九块邮的小幸福</p>
</div>
</div>
<a href="#" class="sub">立即使用</a>
</div>
</div>
</div> -->
</div>
</div>
<!-- 定义模板，将模板内容放到一个script标签中 -->
<script type="text/template" id="tpl">
<% for(var i = 0; i < list.length; i ) { %>
<% var goods = list[i] %>
<li>
<img src="<%= goods.picurl %>" />
<% if(goods.tag == "1") { %>
<i class="ico05"><img src="images/yugao1.png"><em>品牌</em> </i>
<% } %>
<% if(goods.tag == "2") { %>
<i class="ico05"><img src="images/yugao2.png"><em>专场</em> </i>
<% } %>
<h1>
<% if(goods.hottag == "1") { %>
<i class="ico13"><img src="images/sdj.png"></i>
<% } %>
<%=goods.title%>
<% if(goods.ismail != "0") { %> 包邮 <% } %>
</h1>
<% if(goods.status == "1") { %>
<div class="list-price start">
<i>￥</i><span class="price-new"><%=goods.cprice%></span><i class="del">/￥<%=goods.oprice%></i>
<span class="good-btn start"><i class="ico15"></i>10点开始</span>
</div>
<% } %>
<% if(goods.status == "2") { %>
<div class="list-price buy">
<i>￥</i><span class="price-new"><%=goods.cprice%></span><i class="del">/￥<%=goods.oprice%></i>
<span class="good-btn">
<% if(goods.taobao_flag == "1") { %>
<i class="ico15"><img src="images/sts.png"/></i>
<% } else {%>
<i class="ico15"><img src="images/sbs.png"/></i>
<% } %>
去抢购</span>
</div>
<% } %>
<% if(goods.status == "3") { %>
<div class="list-price end">
<i>￥</i><span class="price-new"><%=goods.cprice%></span><i class="del">/￥<%=goods.oprice%></i>
<span class="good-btn end"><i class="ico15"></i>抢光了</span>
</div>
<% } %>
<% if(goods.status == "4") { %>
<div class="list-price end">
<i>￥</i><span class="price-new"><%=goods.cprice%></span><i class="del">/￥<%=goods.oprice%></i>
<span class="good-btn end"><i class="ico15"></i>已结束</span>
</div>
<% } %>
</li>
<% } %>
</script>
<script type="text/javascript">
function addLoadEvent(func) {
var oldOnload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
oldOnload();
func();
}
}
}
// 添加Load事件处理
addLoadEvent(hideMenu);
function hideMenu() {
setTimeout("window.scrollTo(0, 0)", 1);
}
</script>
<script type="text/javascript" src="js/mjky.js"></script>
</body>
</html>
好例子网口号：伸出你的我的手 — 分享！
相关文章
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论