oneShop的二维平面实现(上) H5部分
2018-11-20 本文已影响0人
敏姐姐_e9d0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>oneShop</title>
</head>
<body>
<div class="header">
<div class="header1" >
送货至<select>
<option value="四川">四川省</option>
<option value="北京">北京市</option>
<option value="其他">其他</option>
</select>
</div>
<div class="header2">
<ul>
<li>你好，请登录！</li>
<li><a class="header2-1"href="">免费注册</a></li>
<li><a href="">|我的订单</a></li>
<li><a href="">收藏夹</a></li>
<li><img class="tu01" src="oneShop/loadMore.png" alt="下拉列表"/></li>
<li><a href="">用户服务</a></li>
<li><img class="tu01" src="oneShop/loadMore.png" alt="下拉列表"/></li>
<li><a href="">网站导航</a></li>
<li><img class="tu01" src="oneShop/loadMore.png" alt="下拉列表"/></li>
<li>|关注我们</li>
<li><img src="oneShop/sh1.png" alt="微博"/></li>
<li><img src="oneShop/sh2.png" alt="微信"/></li>
<li>|手机版</li>
<li><img src="oneShop/s_tel.png" alt="手机版"/></li>
</ul>
</div>
</div>
<!--banner部分-->
<div class="banner">
<div class="banner1">
<img class="tu02" src="oneShop/loginlogo.jpg" alt=""/>
</div>
<div class="banner2">
<div class="banner2-1">
<input class="banner2-1-1" type="text"/>
<input class="banner2-1-2" type="text" value="搜索"/>
</div>
<div class="banner2-2">
<a href="">咖啡</a>
<a href="">iphone6s</a>
<a href="">新鲜美食</a>
<a href="">蛋糕</a>
<a href="">日用品</a>
<a href="">连衣裙</a>
</div>
</div>
<div class="banner3">
<div class="banner3-1">
<img src="oneShop/car.png" alt=""/>
<a href="">购物车</a>
</div>
</div>
</div>
<div class="oneshop">
<div class="a">
<div class="a1">
<p>全部商品分类</p>
</div>
<div class="a2">
<a class="a2-1" href="">首页</a>
<a class="a2-2"href="">自营超市</a>
<a href="">1号团</a>
<a href="">1号超市</a>
<a href="">女装</a>
<a href="">美妆</a>
<a href="">1号海购</a>
<a href="">团购</a>
</div>
<div class="a3">
<img src="oneShop/phone.png" alt=""/>
</div>
</div>
<!主部分部分-->
<div class="b">
<div class="b1">
<ul>
<li><a href="">进口食品、生鲜</a>
<img src="oneShop/r_right.png" alt=""/>
</li>
<li><a href="">食品、饮料、酒</a>
<img src="oneShop/r_right.png" alt=""/>
</li>
<li><a href="">母婴、玩具、童装</a>
<img src="oneShop/r_right.png" alt=""/>
</li>
<li><a href="">家居、家庭清洁、纸品</a>
<img src="oneShop/r_right.png" alt=""/>
</li>
<li><a href="">美妆、个人护理、洗护</a>
<img src="oneShop/r_right.png" alt=""/>
</li>
<li><a href="">女装、内衣、中老年</a>
<img src="oneShop/r_right.png" alt=""/>
</li>
<li><a href="">鞋靴、箱包、腕表配饰</a>
<img src="oneShop/r_right.png" alt=""/>
</li>
<li><a href="">男装、运动</a>
<img src="oneShop/r_right.png" alt=""/>
</li>
<li><a href="">手机、小家电、电脑</a>
<img src="oneShop/r_right.png" alt=""/>
</li>
<li><a href="">礼品、充值</a>
<img src="oneShop/r_right.png" alt=""/>
</li>
</ul>
</div>
<div class="b2">
<img class="b2-1" src="oneShop/ban1.jpg" alt=""/>
<img class="b2-2" src="oneShop/s_left.png" alt=""/>
<img class="b2-3" src="oneShop/s_right.png" alt=""/>
</div>
<div class="b3">
<div class="b3-1">
<div class="b3-1-1"><p><strong>快讯</strong></p></div>
<div class="b3-1-2"><p>更多></p></div>
</div>
<div class="b3-2">
<ul>
<li><strong>【特惠】 </strong>掬一轮明月 表无尽思念</li>
<li><strong>【公告】 </strong>好奇金装成长裤新品上市</li>
<li><strong>【特惠】 </strong>大牌闪购·抢！</li>
<li><strong>【公告】 </strong>发福利 买车就抢千元油卡</li>
<li><strong>【公告】 </strong>家电低至五折</li>
</ul>
</div>
<div class="b3-3">
<p><strong>1号钱包</strong></p>
</div>
<div class="b3-4">
<p>收益日结，收益赚Hight!</p>
<img src="oneShop/oneAD.jpg" alt=""/>
</div>
</div>
</div>
<!热门部分-->
<div class="c">
<div class="c1">
<div class="c1-1">
<img src="oneShop/l_img.jpg" alt=""/>
</div>
<div class="c1-2">
<div class="c1-2-1">
<p>¥53.00</p>
</div>
<div class="c1-2-2">
<p>16R</p>
</div>
</div>
</div>
<div class="c2">
<div class="c2-1">
<img src="oneshop/hot.png" alt=""/>
<img src="oneShop/hot1.jpg" alt=""/>
</div>
<div class="c2-2">
<div class="c2-2-1">
<p><strong>德国进口</strong></p>
<p>德亚全脂纯牛奶200ml*48盒</p>
</div>
<div class="c2-2-2">
<p><strong>¥186</strong></p>
<p>26R</p>
</div>
</div>
</div>
<div class="c3">
<div class="c3-1">
<img src="oneShop/hot.png" alt=""/>
<img src="oneShop/hot2.jpg" alt=""/>
</div>
<div class="c3-2">
<div class="c3-2-1">
<p><strong>iphone 6S</strong></p>
<p>Apple/苹果 iphone 6s Plus公开版</p>
</div>
<div class="c3-2-2">
<p><strong>¥5288</strong></p>
<p>25R</p>
</div>
</div>
</div>
<div class="c4">
<div class="c4-1">
<img src="oneShop/hot.png" alt=""/>
<img src="oneShop/hot3.jpg" alt=""/>
</div>
<div class="c4-2">
<div class="c4-2-1">
<p><strong>倩碧特惠组合套装</strong></p>
<p>倩碧补水组合套装8折促销</p>
</div>
<div class="c4-2-2">
<p><strong>¥368</strong></p>
<p>18R</p>
</div>
</div>
</div>
<div class="c5">
<div class="c5-1">
<img src="oneShop/hot.png" alt=""/>
<img src="oneShop/hot4.jpg" alt=""/>
</div>
<div class="c5-2">
<div class="c5-2-1">
<p><strong>品利特级橄榄油</strong></p>
<p>75ml*4瓶装组合 西班牙原装进口</p>
</div>
<div class="c5-2-2">
<p><strong>¥280</strong></p>
<p>30R</p>
</div>
</div>
</div>
</div>
<!mban2部分-->
<div class="mban2">
<img src="oneShop/mban_2.jpg" alt=""/>
</div>
<!--进口 生鲜 1f-->
<div class="d">
<div class="d1">
<p> <strong>1F</strong></p>
<p><strong>进口·生鲜</strong></p>
</div>
<div class="d2">
<a href="">进口咖啡</a>
<a href="">进口酒</a>
<a href="">进口母婴</a>
<a href="">新鲜蔬菜</a>
<a href="">新鲜水果</a>
</div>
</div>
<!--进口 生鲜 商品-->
<div class="e">
<div class="e1">
<div class="e1-1">
<img src="oneShop/fre_r.jpg" alt=""/>
</div>
<div class="e1-2">
<ul>
<li> 进口水果 奇异果 西柚</li>
<li> 海鲜水产 品质牛肉</li>
<li> 奶粉 鲜活禽蛋 进口酒</li>
<li> 进口奶粉 鲜活禽蛋</li>
</ul>
</div>
</div>
<div class="e2">
<div class="e2-1">
<!--贝思客-->
<div class="e2-1-1">
<p> 贝思客 草莓先生&蓝莓小姐</p>
<p>¥98.00</p>
<img src="oneShop/fre_1.jpg" alt=""/>
</div>
<!--微笑果园SMILE-->
<div class="e2-1-2">
<p> 微笑果园SMILE 智利进口绿奇异果</p>
<p>¥84.00</p>
<img src="oneShop/fre_2.jpg" alt=""/>
</div>
<!--新鲜美味-->
<div class="e2-1-3">
<p> 新鲜美味 进口美食</p>
<p>¥98.00</p>
<img src="oneShop/fre_3.jpg" alt=""/>
</div>
<!--相约过中秋-->
<div class="e2-1-4">
<img src="oneShop/fre_b1.jpg" alt=""/>
</div>
</div>
<!--第二部分-->
<div class="e2-2">
<!--进口美食-->
<div class="e2-2-1">
<p> 新鲜美味 进口美食</p>
<p>¥24.00</p>
<img src="oneShop/fre_4.jpg" alt=""/>
</div>
<!--纯牛奶-->
<div class="e2-2-2">
<p> 新鲜美味 纯牛奶</p>
<p>¥142.00</p>
<img src="oneShop/fre_5.jpg" alt=""/>
</div>
<!--新鲜美味-->
<div class="e2-2-3">
<p> 莫斯利安</p>
<p>¥62.00</p>
<img src="oneShop/fre_6.jpg" alt=""/>
</div>
<!--猕猴桃-->
<div class="e2-2-4">
<img src="oneShop/fre_b2.jpg" alt=""/>
</div>
</div>
</div>
</div>
<!--个人美妆 2f-->
<div class="f">
<div class="f1">
<p> <strong>2F</strong></p>
<p><strong>个人美妆</strong></p>
</div>
<div class="f2">
<a href="">洗发护发</a>
<a href="">面膜</a>
<a href="">洗面奶</a>
<a href="">香水</a>
<a href="">淋浴露</a>
</div>
</div>
<!--个人美妆 商品-->
<div class="h">
<div class="h1">
<div class="h1-1">
<img src="oneShop/make_r.jpg" alt=""/>
</div>
<div class="h1-2">
<ul>
<li> 洗发护发 牙刷牙膏 </li>
<li> 面膜 补水面膜 香水</li>
<li> 面霜 洗面奶 脱毛膏</li>
<li> 淋浴露</li>
</ul>
</div>
</div>
<div class="h2">
<div class="h2-1">
<!--美宝莲粉饼-->
<div class="h2-1-1">
<p> 美宝莲粉饼</p>
<p>¥260.00</p>
<img src="oneShop/make_1.jpg" alt=""/>
</div>
<!--洗衣液-->
<div class="h2-1-2">
<p> 洗衣液</p>
<p>¥60.00</p>
<img src="oneShop/make_2.jpg" alt=""/>
</div>
<!--洗发水-->
<div class="h2-1-3">
<p> 洗发水</p>
<p>¥160.00</p>
<img src="oneShop/make_3.jpg" alt=""/>
</div>
<!--相约过中秋-->
<div class="h2-1-4">
<img src="oneShop/make_b1.jpg" alt=""/>
</div>
</div>
<!--第二部分-->
<div class="h2-2">
<!--男士洗发水-->
<div class="h2-2-1">
<p> 男士洗发水</p>
<p>¥120.00</p>
<img src="oneShop/make_4.jpg" alt=""/>
</div>
<!--美宝莲粉饼-->
<div class="h2-2-2">
<p>美宝莲粉饼</p>
<p>¥260.00</p>
<img src="oneShop/make_5.jpg" alt=""/>
</div>
<!--男士设计洗面奶-->
<div class="h2-2-3">
<p>男士设计 洗面奶</p>
<p>¥90.00</p>
<img src="oneShop/make_6.jpg" alt=""/>
</div>
<!--七夕美妆-->
<div class="h2-2-4">
<img src="oneShop/make_b2.jpg" alt=""/>
</div>
</div>
</div>
</div>
<!--mbanner部分-->
<div class="mban2">
<img src="oneShop/mban_2.jpg" alt=""/>
</div>
<!--母婴玩具 3f-->
<div class="i">
<div class="i1">
<p> <strong>3F</strong></p>
<p><strong>母婴玩具</strong></p>
</div>
<div class="i2">
<a href="">营养品</a>
<a href="">孕妈背带裤</a>
<a href="">儿童玩具</a>
<a href="">婴儿床</a>
<a href="">喂奶器</a>
</div>
</div>
<!--母婴玩具 商品-->
<div class="j">
<div class="j1">
<div class="j1-1">
<img src="oneShop/baby_r.jpg" alt=""/>
</div>
<div class="j1-2">
<ul>
<li> 洗发护发 牙刷牙膏 </li>
<li> 面膜 补水面膜 香水</li>
<li> 面霜 洗面奶 脱毛膏</li>
<li> 淋浴露</li>
</ul>
</div>
</div>
<div class="j2">
<!--第一部分-->
<div class="j2-1">
<!--儿童推车-->
<div class="j2-1-1">
<p> 儿童推车</p>
<p>¥560.00</p>
<img src="oneShop/baby_1.jpg" alt=""/>
</div>
<!--妈咪纸尿裤-->
<div class="j2-1-2">
<p> 妈咪纸尿裤</p>
<p>¥260.00</p>
<img src="oneShop/baby_2.jpg" alt=""/>
</div>
<!--儿童玩具 挖掘机-->
<div class="j2-1-3">
<p> 儿童玩具 挖掘机</p>
<p>¥160.00</p>
<img src="oneShop/baby_3.jpg" alt=""/>
</div>
<!--相约过中秋-->
<div class="j2-1-4">
<img src="oneShop/baby_b1.jpg" alt=""/>
</div>
</div>
<!--第二部分-->
<div class="j2-2">
<!--纸尿裤-->
<div class="j2-2-1">
<p> 纸尿裤</p>
<p>¥260.00</p>
<img src="oneShop/baby_4.jpg" alt=""/>
</div>
<!--儿童推车-->
<div class="j2-2-2">
<p>儿童推车</p>
<p>¥86.00</p>
<img src="oneShop/baby_5.jpg" alt=""/>
</div>
<!--奶粉-->
<div class="j2-2-3">
<p>奶粉</p>
<p>¥660.00</p>
<img src="oneShop/baby_6.jpg" alt=""/>
</div>
<!--母婴玩具-->
<div class="j2-2-4">
<img src="oneShop/baby_b2.jpg" alt=""/>
</div>
</div>
</div>
</div>
<!--图标页面-->
<div class="k">
<!---->
<div class="k1">
<img src="oneShop/b1.png" alt=""/>
<p>正品包邮</p>
<p>正品行货 放心购买</p>
</div>
<!--满38包邮-->
<div class="k2">
<img src="oneShop/b2.png" alt=""/>
<p>满38包邮</p>
<p>满38包邮 免运费</p>
</div>
<!--天天低价-->
<div class="k3">
<img src="oneShop/b3.png" alt=""/>
<p>天天低价</p>
<p>天天低价 畅选无忧</p>
</div>
<!--准时送达-->
<div class="k4">
<img src="oneShop/b4.png" alt=""/>
<p>准时送达</p>
<p>收货时间由你做主</p>
</div>
</div>
<!--网址导航部分-->
<div class="m">
<!--新手上路-->
<div class="m1">
<p>新手上路</p>
<p>售后服务</p>
<p>购物流程</p>
<p>订购方式</p>
<p>隐私声明</p>
<p>推荐分享说明</p>
</div>
<!--配送与支付-->
<div class="m2">
<p>配送与支付</p>
<p>货到付款区域</p>
<p>配送支付查询</p>
<p>支付方式查询</p>
</div>
<!--会员中心-->
<div class="m3">
<p>会员中心</p>
<p>资金管理</p>
<p>我的收藏</p>
<p>我的订单</p>
</div>
<!--服务保证-->
<div class="m4">
<p>服务保证</p>
<p>退换货保证</p>
<p>售后服务保证</p>
<p>产品质量保证</p>
</div>
<!--联系我们-->
<div class="m5">
<p>联系我们</p>
<p>网站故障报告</p>
<p>购物咨询</p>
<p>投诉与建议</p>
</div>
<!--二维码-->
<div class="m6">
<div class="m6-1">
<img src="oneShop/er.gif" alt=""/>
<p>扫一扫关注我们</p>
</div>
<div class="m6-2">
<ul>
<li><img src="oneShop/b_sh_1.png" alt=""/> 新浪微博</li>
<li><img src="oneShop/b_sh_2.png" alt=""/> 腾讯微博</li>
</ul><br/>
<p>服务热线：</p>
<p>400-123-4567</p>
</div>
</div>
</div>
<div class="footer">
<br/>
<p>备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyringh© 1号店网上超市 2007-2016， All Ringts Reserved.复制必究，Technical Support:Dgg Group</p>
<img src="oneShop/b_1.gif" alt=""/>
<img src="oneShop/b_2.gif" alt=""/>
<img src="oneShop/b_3.gif" alt=""/>
<img src="oneShop/b_4.gif" alt=""/>
<img src="oneShop/b_5.gif" alt=""/>
<img src="oneShop/b_6.gif" alt=""/>
</div>
</div>
</body>
</html>
