项目实战-1号店首页+购物页面
2024-06-17 20:53:20
一.功能截图
1.1 首页
1.2 购物页面
二.代码实现
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><link type="text/css" rel="stylesheet" href="css/style.css"/><link rel="stylesheet" type="text/css" href="css/ShopShow.css"/><title>珠韵首饰 冰韵 天然白色正圆S925银扣珍珠项链团购_1号团_1号店官网</title>
</head>
<body>
<!--网页头部-->
<header><div class="soubg"><div class="sou fl"><div class="s_city_b"><span>送货至：四川</span></div></div><div class="fr top_right"><div class="fl">你好!请<a href="#">登录</a><a href="#" style="color:#ff4e00;">免费注册</a> | <a href="#">我的订单</a> |</div><ul class="ss"><li class="ss_list"><a href="#">收藏夹</a></li><li class="ss_list"><a href="#">客户服务</a><div class="ss_list_bg"><div class="ss_list_c"><ul><li><a href="#">客户服务</a></li><li><a href="#">客户服务</a></li><li><a href="#">客户服务</a></li></ul></div></div></li><li class="ss_list"><a href="#">网站导航</a></li></ul><span class="fl">| 关注我们：</span><span class="s_sh"><a href="#" class="sh1">新浪</a><a href="#" class="sh2">微信</a></span><span class="fr">| <a href="#">手机版 <img src="data:images/s_tel.png" align="absmiddle"/></a></span></div></div><div class="top"><div class="logo"><a href="#"><img src="data:images/logo.png"/></a></div><div class="search"><form><input type="search" value="" placeholder="请输入关键字" class="s_ipt"/><input type="submit" value="搜索" class="s_btn"/></form><div class="fl"><a href="#">咖啡</a><a href="#">iphone 6S</a><a href="#">新鲜美食</a><a href="#">蛋糕</a><a href="#">日用品</a><a href="#">连衣裙</a></div></div><div class="i_car"><div class="car_t">购物车</div></div></div>
</header><!--主体部分-->
<section class="center"><!--Begin Menu Begin--><div class="menu_bg"><div class="menu"><!--Begin 商品分类详情 Begin--><nav class="nav"><div class="nav_t">全部商品分类</div></nav><!--End 商品分类详情 End--><nav><ul class="menu_r"><li class="active"><a href="">首页</a></li><li class="active"><a href="">自营超市</a></li><li><a href="">1号团</a></li><li><a href="">1号超市</a></li><li><a href="">女装</a></li><li><a href="">美妆</a></li><li><a href="">1号海购</a></li><li><a href="">团购</a></li></ul></nav><a href="#" class="m_ad"><img src="data:images/phone.png" alt=""/></a></div></div><!--End Menu End--><div class="i_bg"><div class="postion"><span class="fl">所有团购 > 包饰 > 珠韵首饰 <i>冰韵 天然白色正圆S925银扣珍珠项链</i></span></div><div class="clear" ><div id="tsShopContainer"><div id="tsImgS"><a href="images/p_big.jpg" class="MagicZoom"><img src="data:images/p_big.jpg" width="390" height="390"/></a></div><div id="tsPicContainer"><div id="tsImgSArrL"></div><div id="tsImgSCon"><ul><li><img src="data:images/ps1.jpg" /></li><li><img src="data:images/ps2.jpg" width="79"/><li><img src="data:images/ps3.jpg" width="79"/></li><li><img src="data:images/ps4.jpg" width="79"/></li></ul></div><div id="tsImgSArrR"></div></div></div><div class="pro_des"><div class="des_name"><p>珠韵首饰 冰韵 天然白色正圆S925银扣珍珠项链</p>全国包邮 送妈妈，正圆级淡水珍珠，白色S925银链扣，使用方便，尊贵礼物。</div><div class="des_price">本店价格：<b>¥1786</b><br/>参考价：<span>¥3886</span></div><div class="des_choice"><span class="fl">尺码：</span><ul><li class="checked">43cm<div class="ch_img"></div></li><li>45cm<div class="ch_img"></div></li><li>50cm<div class="ch_img"></div></li></ul></div><div class="des_choice"><span class="fl">颜色选择：</span><ul><li>粉色<div class="ch_img"></div></li><li class="checked">白色<div class="ch_img"></div></li></ul></div><div class="des_share"><div class="d_sh">分享<div class="d_sh_bg"><a href="#"><img src="data:images/sh_1.gif"/></a><a href="#"><img src="data:images/sh_2.gif"/></a><a href="#"><img src="data:images/sh_3.gif"/></a><a href="#"><img src="data:images/sh_4.gif"/></a><a href="#"><img src="data:images/sh_5.gif"/></a></div></div><div class="d_care"><a >关注商品</a></div></div><div class="des_join"><div class="j_nums"><input type="text" value="1" name="" class="n_ipt"/><input type="button" value="" class="n_btn_1"/><input type="button" value="" class="n_btn_2"/></div><span class="fl"><a><img src="data:images/j_car.png"/></a></span></div></div><div class="s_brand"><div class="s_brand_img"><img src="data:images/sbrand.jpg" width="188" height="132"/></div><div class="s_brand_c"><a href="#">进入品牌专区</a></div></div></div><div class="content"><!--用户还喜欢--><div class="l_history"><div class="fav_t">用户还喜欢</div><ul><li><div class="img"><a href="#"><img src="data:images/his_1.jpg" /></a></div><div class="name"><a href="#">科爱KEAL儿童日本书包减负护脊</a></div><div class="price"><span>¥599</span></div></li><li><div class="img"><a href="#"><img src="data:images/his_2.jpg" /></a></div><div class="name"><a href="#">科爱KEAL小学生减负护脊书包超轻</a></div><div class="price"><span>¥79</span></div></li><li><div class="img"><a href="#"><img src="data:images/his_3.jpg"/></a></div><div class="name"><a href="#">珠韵首饰 天然白色珍珠项链</a></div><div class="price"><span>¥339</span></div></li><li><div class="img"><a href="#"><img src="data:images/his_4.jpg" /></a></div><div class="name"><a href="#">珠韵首饰 新品18K黄金珍珠耳钉</a></div><div class="price"><span>¥1860</span></div></li><li><div class="img"><a href="#"><img src="data:images/his_5.jpg" /></a></div><div class="name"><a href="#">珠韵首饰 姝丽大珍珠项链</a></div><div class="price"><span>¥758</span></div></li></ul></div><div class="l_list"><!--推荐搭配--><div class="des_border"><div class="des_tit"><ul><li class="current">推荐搭配</li></ul></div><div class="team_list"><div class="img"><a href="#"><img src="data:images/mat_1.jpg" /></a></div><div class="name"><a href="#">粤通国际珠宝 999足金</a></div><div class="price"><div class="checkbox"><input type="checkbox" name="zuhe" checked="checked"/></div><span>￥76</span></div></div><div class="team_icon"><img src="data:images/jia_b.gif"/></div><div class="team_list"><div class="img"><a href="#"><img src="data:images/mat_2.jpg"/></a></div><div class="name"><a href="#">珠韵 9.5-10.5mm珍珠项链</a></div><div class="price"><div class="checkbox"><input type="checkbox" name="zuhe"/></div><span>￥1890</span></div></div><div class="team_icon"><img src="data:images/jia_b.gif"/></div><div class="team_list"><div class="img"><a href="#"><img src="data:images/mat_3.jpg"/></a></div><div class="name"><a href="#">清新耳环</a></div><div class="price"><div class="checkbox"><input type="checkbox" name="zuhe" checked/></div><span>￥232</span></div></div><div class="team_icon"><img src="data:images/equl.gif"/></div><div class="team_sum">套餐价：￥<span>2000</span><br/><input type="text" value="1" class="sum_ipt"/><br/><a href="#"><img src="data:images/z_buy.gif"/></a></div></div><!--商品属性--><div class="des_border"><div class="des_tit"><ul><li class="current"><a href="#p_attribute">商品属性</a></li><li><a href="#p_details">商品详情</a></li><li><a href="#p_comment">商品评论</a></li></ul></div><div class="des_con" id="p_attribute"><table border="0" align="center" style="width:100%; margin:10px auto;"cellspacing="0" cellpadding="0"><tr><td>商品名称：天然淡水珍珠</td><td>商品编号：1546211</td><td>品牌： 珠韵首饰</td><td>上架时间：2015-09-06 09:19:09</td></tr><tr><td>商品毛重：160.00g</td><td>商品产地：法国</td><td>珍珠形状：正圆</td><td> </td></tr><tr><td>镶嵌材质：纯银</td><td>款式：项链</td><td> </td><td> </td></tr></table></div></div><!--商品详情--><div class="des_border" id="p_details"><div class="des_t">商品详情</div><div class="des_con"><p align="center"><img src="data:images/de2.jpg"/><br/><br/><img src="data:images/de3.jpg"/><br/><br/><img src="data:images/de4.jpg"/><br/><br/><img src="data:images/de5.jpg"/><br/><br/><img src="data:images/de6.jpg"/><br/><br/><img src="data:images/de7.jpg"/><br/><br/><img src="data:images/de8.jpg"/><br/><br/></p></div></div><!--商品评论--><div class="des_border" id="p_comment"><div class="des_t">商品评论</div><table border="0" class="jud_tab" cellspacing="0" cellpadding="0"><tr><td width="175" class="jud_per"><p>80.0%</p>好评度</td><td width="300"><table border="0" style="width:100%;" cellspacing="0" cellpadding="0"><tr><td width="90">好评<span color="#999999">（80%）</span></td><td><img src="data:images/pl.gif" align="absmiddle"/></td></tr><tr><td>中评<span color="#999999">（20%）</span></td><td><img src="data:images/pl.gif" align="absmiddle"/></td></tr><tr><td>差评<span color="#999999">（0%）</span></td><td><img src="data:images/pl.gif" align="absmiddle"/></td></tr></table></td><td width="185" class="jud_bg">购买过珠韵首饰 天然银扣珍珠项链的顾客，在收到商品才可以对该商品发表评论</td><td class="jud_bg">您可对已购买商品进行评价<br/><a href="#"><img src="data:images/btn_jud.gif"/></a></td></tr></table><table border="0" class="jud_list" style="width:100%; margin-top:30px;" cellspacing="0" cellpadding="0"><tr valign="top"><td width="160"><img src="data:images/peo1.jpg" width="20" height="20" align="absmiddle"/> 向死而生</td><td width="180">颜色分类：<font color="#999999">粉色</font> <br/>型号：<font color="#999999">43cm</font></td><td>产品很好，香味很喜欢，必须给赞。 <br/><font color="#999999">2015-09-24</font></td></tr><tr valign="top"><td width="160"><img src="data:images/peo2.jpg" width="20" height="20" align="absmiddle"/> 就是这么想的</td><td width="180">颜色分类：<font color="#999999">粉色</font> <br/>型号：<font color="#999999">43cm</font></td><td>送朋友，她很喜欢，大爱。 <br/><font color="#999999">2015-09-24</font></td></tr><tr valign="top"><td width="160"><img src="data:images/peo3.jpg" width="20" height="20" align="absmiddle"/> 墨镜墨镜</td><td width="180">颜色分类：<font color="#999999">白色</font> <br/>型号：<font color="#999999">43cm</font></td><td>大家都说不错<br/><font color="#999999">2015-09-24</font></td></tr><tr valign="top"><td width="160"><img src="data:images/peo4.jpg" width="20" height="20" align="absmiddle"/> 那*****洋<br/><font color="#999999">（匿名用户）</font></td><td width="180">颜色分类：<font color="#999999">白色</font> <br/>型号：<font color="#999999">43cm</font></td><td>下次还会来买，推荐。<br/><font color="#999999">2015-09-24</font></td></tr></table><div class="pages"><a href="#" class="p_pre">上一页</a><a href="#" class="cur">1</a><a href="#">2</a><ahref="#">3</a>...<a href="#">20</a><a href="#" class="p_pre">下一页</a></div></div></div></div></div>
</section><!--网页底部-->
<footer class="center"><!-- Footer --><div class="b_btm_bg b_btm_c"><ul class="b_btm"><li><a><img src="data:images/b1.png" width="62" height="62"/></a><div><h2>正品保障</h2>正品行货 放心购买</div></li><li ><a><img src="data:images/b2.png" width="62" height="62"/></a><div><h2>满38包邮</h2>满38包邮 免运费</div></li><li><a><img src="data:images/b3.png" width="62" height="62"/></a><div><h2>天天低价</h2>天天低价 畅选无忧</div></li><li><a><img src="data:images/b4.png" width="62" height="62"/></a><div><h2>准时送达</h2>收货时间由你做主</div></li></ul></div><div class="b_nav"><dl><dt><a href="#">新手上路</a></dt><dd><a href="#">售后流程</a></dd><dd><a href="#">购物流程</a></dd><dd><a href="#">订购方式</a></dd><dd><a href="#">隐私声明</a></dd><dd><a href="#">推荐分享说明</a></dd></dl><dl><dt><a href="#">配送与支付</a></dt><dd><a href="#">货到付款区域</a></dd><dd><a href="#">配送支付查询</a></dd><dd><a href="#">支付方式说明</a></dd></dl><dl><dt><a href="#">会员中心</a></dt><dd><a href="#">资金管理</a></dd><dd><a href="#">我的收藏</a></dd><dd><a href="#">我的订单</a></dd></dl><dl><dt><a href="#">服务保证</a></dt><dd><a href="#">退换货原则</a></dd><dd><a href="#">售后服务保证</a></dd><dd><a href="#">产品质量保证</a></dd></dl><dl><dt><a href="#">联系我们</a></dt><dd><a href="#">网站故障报告</a></dd><dd><a href="#">购物咨询</a></dd><dd><a href="#">投诉与建议</a></dd></dl><div class="b_tel_bg"><a href="#" class="b_sh1">新浪微博</a><a href="#" class="b_sh2">腾讯微博</a><p>服务热线：<br/><span>400-123-4567</span></p></div><div class="b_er"><div class="b_er_c"><img src="data:images/er.gif" /></div><img src="data:images/ss.png"/></div></div><div class="btmbg"><div class="btm">备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright© 1号店网上超市 2007-2016，All Rights Reserved. 复制必究 ,Technical Support: Dgg Group <br/><img src="data:images/b_1.gif"/><img src="data:images/b_2.gif"/><img src="data:images/b_3.gif"/><img src="data:images/b_4.gif"/><img src="data:images/b_5.gif"/><img src="data:images/b_6.gif"/></div></div><!--Footer -->
</footer>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><link type="text/css" rel="stylesheet" href="css/style.css"/><title>一号店</title>
</head>
<body>
<!--网页头部-->
<header><div class="soubg"><div class="sou fl"><div class="s_city_b"><span>送货至：四川</span></div></div><div class="fr top_right"><div class="fl">你好! 请<a href="#">登录</a><a href="#" style="color:#ff4e00;">免费注册</a> | <a href="#">我的订单</a> |</div><ul class="ss"><li class="ss_list"><a href="#">收藏夹</a></li><li class="ss_list"><a href="#">客户服务</a><div class="ss_list_bg"><div class="ss_list_c"><ul><li><a href="#">客户服务</a></li><li><a href="#">客户服务</a></li><li><a href="#">客户服务</a></li></ul></div></div></li><li class="ss_list"><a href="#">网站导航</a></li></ul><span class="fl"> | 关注我们：</span><span class="s_sh"><a href="#" class="sh1">新浪</a><a href="#" class="sh2">微信</a></span><span class="fr"> | <a href="#">手机版 <img src="data:images/s_tel.png" align="absmiddle"/></a></span></div></div><div class="top"><div class="logo"><a href="#"><img src="data:images/logo.png"/></a></div><div class="search"><form><input type="search" value="" placeholder="请输入关键字" class="s_ipt"/><input type="submit" value="搜索" class="s_btn"/></form><div class="fl"><a href="#">咖啡</a><a href="#">iphone 6S</a><a href="#">新鲜美食</a><a href="#">蛋糕</a><a href="#">日用品</a><a href="#">连衣裙</a></div></div><div class="i_car"><div class="car_t">购物车</div></div></div>
</header>
<!--网页主题部分-->
<section class="center clear"><!--商品列表、焦点图--><div class="clear"><div class="menu_bg"><div class="menu"><!--Begin 商品分类详情 Begin--><nav class="nav"><div class="nav_t">全部商品分类</div><div class="leftNav"><!--左边购物列表导航--><ul><li><div class="fj"><span class="n_img"><span></span><img src="data:images/nav1.png"/></span><span class="fl">进口食品、生鲜</span></div><!--目前不显示，鼠标移入显示--><div class="zj"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div></div><div class="zj_r"><a href="#"><img src="data:images/n_img1.jpg" width="236" height="200"/></a><a href="#"><img src="data:images/n_img2.jpg" width="236" height="200"/></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="data:images/nav2.png"/></span><span class="fl">食品、饮料、酒</span></div><div class="zj" style="top:-40px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力2</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div></div><div class="zj_r"><a href="#"><img src="data:images/n_img1.jpg" width="236" height="200"/></a><a href="#"><img src="data:images/n_img2.jpg" width="236" height="200"/></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="data:images/nav3.png"/></span><span class="fl">母婴、玩具、童装</span></div><div class="zj" style="top:-80px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力3</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div></div><div class="zj_r"><a href="#"><img src="data:images/n_img1.jpg" width="236" height="200"/></a><a href="#"><img src="data:images/n_img2.jpg" width="236" height="200"/></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="data:images/nav4.png"/></span><span class="fl">家居、家庭清洁、纸品</span></div><div class="zj" style="top:-120px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力4</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div></div><div class="zj_r"><a href="#"><img src="data:images/n_img1.jpg" width="236" height="200"/></a><a href="#"><img src="data:images/n_img2.jpg" width="236" height="200"/></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="data:images/nav5.png"/></span><span class="fl">美妆、个人护理、洗护</span></div><div class="zj" style="top:-160px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力5</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div></div><div class="zj_r"><a href="#"><img src="data:images/n_img1.jpg" width="236" height="200"/></a><a href="#"><img src="data:images/n_img2.jpg" width="236" height="200"/></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="data:images/nav6.png"/></span><span class="fl">女装、内衣、中老年</span></div><div class="zj" style="top:-200px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力6</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div></div><div class="zj_r"><a href="#"><img src="data:images/n_img1.jpg" width="236" height="200"/></a><a href="#"><img src="data:images/n_img2.jpg" width="236" height="200"/></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="data:images/nav7.png"/></span><span class="fl">鞋靴、箱包、腕表配饰</span></div><div class="zj" style="top:-240px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力7</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div></div><div class="zj_r"><a href="#"><img src="data:images/n_img1.jpg" width="236" height="200"/></a><a href="#"><img src="data:images/n_img2.jpg" width="236" height="200"/></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="data:images/nav8.png"/></span><span class="fl">男装、运动</span></div><div class="zj" style="top:-280px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力8</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div></div><div class="zj_r"><a href="#"><img src="data:images/n_img1.jpg" width="236" height="200"/></a><a href="#"><img src="data:images/n_img2.jpg" width="236" height="200"/></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="data:images/nav9.png"/></span><span class="fl">手机、小家电、电脑</span></div><div class="zj" style="top:-320px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力9</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div></div><div class="zj_r"><a href="#"><img src="data:images/n_img1.jpg" width="236" height="200"/></a><a href="#"><img src="data:images/n_img2.jpg" width="236" height="200"/></a></div></div></li><li><div class="fj"><span class="n_img"><span></span><img src="data:images/nav10.png"/></span><span class="fl">礼品、充值</span></div><div class="zj" style="top:-360px;"><div class="zj_l"><div class="zj_l_c"><h2>零食 / 糖果 / 巧克力10</h2><a href="#">坚果</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<ahref="#">巧克力</a>|<a href="#">口香糖</a>|<a href="#">海苔</a>|<a href="#">鱼干</a>|<a href="#">蜜饯</a>|<ahref="#">红枣</a>|<a href="#">蜜饯</a>|<a href="#">红枣</a>|<a href="#">牛肉干</a>|<a href="#">蜜饯</a>|</div></div><div class="zj_r"><a href="#"><img src="data:images/n_img1.jpg" width="236" height="200"/></a><a href="#"><img src="data:images/n_img2.jpg" width="236" height="200"/></a></div></div></li></ul></div></nav><!--End 商品分类详情 End--><nav><ul class="menu_r"><li class="active"><a href="">首页</a></li><li class="active"><a href="">自营超市</a></li><li><a href="">1号团</a></li><li><a href="">1号超市</a></li><li><a href="">女装</a></li><li><a href="">美妆</a></li><li><a href="">1号海购</a></li><li><a href="">团购</a></li></ul></nav><a href="#" class="m_ad"><img src="data:images/phone.png" alt=""/></a></div></div><!--焦点图--><div class="banner"><div class="top_slide_wrap"><ul class="slide_box "><li><img src="data:images/ban1.jpg" width="700" height="401"/></li></ul><ul class="num"><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li></ul><div class="op_btns"><a href="#" class="op_btn op_prev"></a><a href="#" class="op_btn op_next"></a></div></div></div><!--新闻列表--><div class="inews"><div class="news_t"><h3 class="fl">快讯</h3><span class="fr"><a href="#">更多 ></a></span></div><ul><li><span>【特惠】</span><a href="#">掬一轮明月 表无尽惦念</a></li><li><span>【公告】</span><a href="#">好奇金装成长裤新品上市</a></li><li><span>【特惠】</span><a href="#">大牌闪购 · 抢！</a></li><li><span>【公告】</span><a href="#">发福利 买车就抢千元油卡</a></li><li><span>【公告】</span><a href="#">家电低至五折</a></li></ul><div class="charge_t"><h3>1号钱包</h3><p>收益日结，收益赚High！</p><img src="data:images/oneAD.jpg" alt=""/></div></div></div><!--Begin 热门商品 Begin--><div class="content clear "><div class="hot"><div class="img"><img src="data:images/l_img.jpg" width="188" height="188"/></div><div class="pri_bg"><span class="price fl">￥53.00</span><span class="fr">16R</span></div></div><div class="hot_pro"><div id="feature"><ul class="featureUL"><li class="featureBox"><div class="h_icon"><img src="data:images/hot.png" width="50" height="50"/></div><div class="imgbg"><a href="#"><img src="data:images/hot1.jpg" width="160" height="136"/></a></div><div class="name"><a href="#"><h2>德国进口</h2>德亚全脂纯牛奶200ml*48盒</a></div><div class="price"><strong>￥<span>189</span></strong> 26R</div></li><li class="featureBox"><div class="h_icon"><img src="data:images/hot.png" width="50" height="50"/></div><div class="imgbg"><a href="#"><img src="data:images/hot2.jpg" width="160" height="136"/></a></div><div class="name"><a href="#"><h2>iphone 6S</h2>Apple/苹果 iPhone 6s Plus公开版</a></div><div class="price"><strong>￥<span>5288</span></strong> 25R</div></li><li class="featureBox"><div class="h_icon"><img src="data:images/hot.png" width="50" height="50"/></div><div class="imgbg"><a href="#"><img src="data:images/hot3.jpg" width="160" height="136"/></a></div><div class="name"><a href="#"><h2>倩碧特惠组合套装</h2>倩碧补水组合套装8折促销</a></div><div class="price"><strong>￥<span>368</span></strong> 18R</div></li><li class="featureBox"><div class="h_icon"><img src="data:images/hot.png" width="50" height="50"/></div><div class="imgbg"><a href="#"><img src="data:images/hot4.jpg" width="160" height="136"/></a></div><div class="name"><a href="#"><h2>品利特级橄榄油</h2>750ml*4瓶装组合 西班牙原装进口</a></div><div class="price"><strong>￥<span>280</span></strong> 30R</div></li></ul><a class="h_prev" href="#">Previous</a><a class="h_next" href="#">Next</a></div></div></div><!--广告--><div class="content"><img src="data:images/mban_2.jpg"/></div><!--Begin 进口 生鲜 Begin--><section class="content clear"><div class="floorTitle "><span class="floor_num">1F</span><span class="fl">进口 <b>·</b> 生鲜</span><div class="i_mores fr"><a href="#">进口咖啡</a><a href="#">进口酒</a><a href="#">进口母婴</a><a href="#">新鲜蔬菜</a><a href="#">新鲜水果</a></div></div><div class="main"><div class="fresh_left"><div class="fre_ban"><div id="imgPlay1"><ul class="imgs" id="actor1"><li><a href="#"><img src="data:images/fre_r.jpg" width="211" height="286"/></a></li></ul><div class="prevf">上一张</div><div class="nextf">下一张</div></div></div><div class="fresh_txt"><div class="fresh_txt_c"><a href="#">进口水果</a><a href="#">奇异果</a><a href="#">西柚</a><a href="#">海鲜水产</a><a href="#">品质牛肉</a><ahref="#">奶粉</a><a href="#">鲜活禽蛋</a><a href="#">进口酒</a><a href="#">进口奶粉</a><a href="#">鲜活禽蛋</a></div></div></div><div class="fresh_mid"><ul><li><div class="name"><a href="#">贝思客 草莓先生&蓝莓小姐</a></div><div class="price"><span>￥98.00</span></div><div class="img"><a href="#"><img src="data:images/fre_1.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">微笑果园SMILE 智利进口绿奇异果</a></div><div class="price"><span>￥84.00</span></div><div class="img"><a href="#"><img src="data:images/fre_2.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">新鲜美味 进口美食</a></div><div class="price"><span>￥98.00</span></div><div class="img"><a href="#"><img src="data:images/fre_3.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">新鲜美味 进口美食</a></div><div class="price"><span>￥24.00</span></div><div class="img"><a href="#"><img src="data:images/fre_4.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">新鲜美味 纯牛奶</a></div><div class="price"><span>￥142.00</span></div><div class="img"><a href="#"><img src="data:images/fre_5.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">莫斯利安</a></div><div class="price"><span>￥62.00</span></div><div class="img"><a href="#"><img src="data:images/fre_6.jpg" width="185" height="155"/></a></div></li></ul></div><div class="fresh_right"><ul><li><a href="#"><img src="data:images/fre_b1.jpg" width="260" height="220"/></a></li><li><a href="#"><img src="data:images/fre_b2.jpg" width="260" height="220"/></a></li></ul></div></div></section><!--End 进口 生鲜 End--><!--Begin 个人美妆 Begin--><section class="content clear"><div class="floorTitle "><span class="floor_num">2F</span><span class="fl">个人美妆</span><div class="i_mores fr"><a href="#">洗发护发</a><a href="#">面膜</a><a href="#">洗面奶</a><a href="#">香水</a><a href="#">沐浴露</a></div></div><div class="main"><div class="make_left"><div class="make_ban"><div id="imgPlay3"><ul class="imgs" id="actor3"><li><a href="#"><img src="data:images/make_r.jpg" width="211" height="286"/></a></li></ul><div class="prev_m">上一张</div><div class="next_m">下一张</div></div></div><div class="fresh_txt"><div class="fresh_txt_c"><a href="#">洗发护发</a><a href="#">牙刷牙膏</a><a href="#">面膜</a><a href="#">补水面膜</a><a href="#">香水</a><ahref="#">面霜</a><a href="#">洗面奶</a><a href="#">脱毛膏</a><a href="#">沐浴露</a></div></div></div><div class="fresh_mid"><ul><li><div class="name"><a href="#">美宝莲粉饼</a></div><div class="price"><span>￥260.00</span></div><div class="img"><a href="#"><img src="data:images/make_1.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">洗衣液</a></div><div class="price"><span>￥60.00</span></div><div class="img"><a href="#"><img src="data:images/make_2.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">洗发水</a></div><div class="price"><span>￥160.00</span></div><div class="img"><a href="#"><img src="data:images/make_3.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">男士洗发水</a></div><div class="price"><span>￥120.00</span></div><div class="img"><a href="#"><img src="data:images/make_4.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">美宝莲粉饼</a></div><div class="price"><span>￥260.00</span></div><div class="img"><a href="#"><img src="data:images/make_5.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">男士设计 洗面奶</a></div><div class="price"><span>￥90.00</span></div><div class="img"><a href="#"><img src="data:images/make_6.jpg" width="185" height="155"/></a></div></li></ul></div><div class="fresh_right"><ul><li><a href="#"><img src="data:images/make_b1.jpg" width="260" height="220"/></a></li><li><a href="#"><img src="data:images/make_b2.jpg" width="260" height="220"/></a></li></ul></div></div></section><!--End 个人美妆 End--><div class="content"><img src="data:images/mban_2.jpg" width="1200" height="110"/></div><!--Begin 母婴玩具 Begin--><section class="content"><div class="floorTitle"><span class="floor_num">3F</span><span class="fl">母婴玩具</span><div class="i_mores fr"><a href="#">营养品</a><a href="#">孕妈背带裤</a><a href="#">儿童玩具</a><a href="#">婴儿床</a><a href="#">喂奶器</a></div></div><div class="main"><div class="baby_left"><div class="baby_ban"><div id="imgPlay4"><ul class="imgs" id="actor4"><li><a href="#"><img src="data:images/baby_r.jpg" width="211" height="286"/></a></li><li><a href="#"><img src="data:images/baby_r.jpg" width="211" height="286"/></a></li><li><a href="#"><img src="data:images/baby_r.jpg" width="211" height="286"/></a></li></ul><div class="prev_b">上一张</div><div class="next_b">下一张</div></div></div><div class="fresh_txt"><div class="fresh_txt_c"><a href="#">孕妈必备</a><a href="#">儿童玩具</a><a href="#">重装童鞋</a><a href="#">辅助食品</a><a href="#">奶粉</a><ahref="#">鲜活禽蛋</a><a href="#">维生素</a><a href="#">重装童鞋</a><a href="#">辅助食品</a></div></div></div><div class="fresh_mid"><ul><li><div class="name"><a href="#">儿童推车</a></div><div class="price"><span>￥560.00</span></div><div class="img"><a href="#"><img src="data:images/baby_1.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">妈咪纸尿裤</a></div><div class="price"><span>￥260.00</span></div><div class="img"><a href="#"><img src="data:images/baby_2.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">儿童玩具 挖掘机</a></div><div class="price"><span>￥160.00</span></div><div class="img"><a href="#"><img src="data:images/baby_3.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">纸尿裤</a></div><div class="price"><span>￥260.00</span></div><div class="img"><a href="#"><img src="data:images/baby_4.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">儿童推车</a></div><div class="price"><span>￥86.00</span></div><div class="img"><a href="#"><img src="data:images/baby_5.jpg" width="185" height="155"/></a></div></li><li><div class="name"><a href="#">奶粉</a></div><div class="price"><span>￥660.00</span></div><div class="img"><a href="#"><img src="data:images/baby_6.jpg" width="185" height="155"/></a></div></li></ul></div><div class="fresh_right"><ul><li><a href="#"><img src="data:images/baby_b1.jpg" width="260" height="220"/></a></li><li><a href="#"><img src="data:images/baby_b2.jpg" width="260" height="220"/></a></li></ul></div></div></section><!--End 母婴玩具 End--></section>
<!--网页底部-->
<footer class="center"><!-- Footer --><div class="b_btm_bg b_btm_c"><ul class="b_btm"><li><a><img src="data:images/b1.png" width="62" height="62"/></a><div><h2>正品保障</h2>正品行货 放心购买</div></li><li ><a><img src="data:images/b2.png" width="62" height="62"/></a><div><h2>满38包邮</h2>满38包邮 免运费</div></li><li><a><img src="data:images/b3.png" width="62" height="62"/></a><div><h2>天天低价</h2>天天低价 畅选无忧</div></li><li><a><img src="data:images/b4.png" width="62" height="62"/></a><div><h2>准时送达</h2>收货时间由你做主</div></li></ul></div><div class="b_nav"><dl><dt><a href="#">新手上路</a></dt><dd><a href="#">售后流程</a></dd><dd><a href="#">购物流程</a></dd><dd><a href="#">订购方式</a></dd><dd><a href="#">隐私声明</a></dd><dd><a href="#">推荐分享说明</a></dd></dl><dl><dt><a href="#">配送与支付</a></dt><dd><a href="#">货到付款区域</a></dd><dd><a href="#">配送支付查询</a></dd><dd><a href="#">支付方式说明</a></dd></dl><dl><dt><a href="#">会员中心</a></dt><dd><a href="#">资金管理</a></dd><dd><a href="#">我的收藏</a></dd><dd><a href="#">我的订单</a></dd></dl><dl><dt><a href="#">服务保证</a></dt><dd><a href="#">退换货原则</a></dd><dd><a href="#">售后服务保证</a></dd><dd><a href="#">产品质量保证</a></dd></dl><dl><dt><a href="#">联系我们</a></dt><dd><a href="#">网站故障报告</a></dd><dd><a href="#">购物咨询</a></dd><dd><a href="#">投诉与建议</a></dd></dl><div class="b_tel_bg"><a href="#" class="b_sh1">新浪微博</a><a href="#" class="b_sh2">腾讯微博</a><p>服务热线：<br/><span>400-123-4567</span></p></div><div class="b_er"><div class="b_er_c"><img src="data:images/er.gif" /></div><img src="data:images/ss.png"/></div></div><div class="btmbg"><div class="btm">备案/许可证编号：蜀ICP备12009302号-1-www.dingguagua.com Copyright© 1号店网上超市 2007-2016，All Rights Reserved. 复制必究 ,Technical Support: Dgg Group <br/><img src="data:images/b_1.gif"/><img src="data:images/b_2.gif"/><img src="data:images/b_3.gif"/><img src="data:images/b_4.gif"/><img src="data:images/b_5.gif"/><img src="data:images/b_6.gif"/></div></div><!--Footer -->
</footer>
</body>
</html>
项目实战-1号店首页+购物页面相关推荐
- VUE全家桶项目实战-- 4.后台首页布局
VUE全家桶项目实战-- 4.后台首页布局 一.页面布局 二.创建Home组件 三.路由index.js 文件配置主页路径 四.添加welcome组件 一.页面布局 <el-container& ...
- 【PBL项目实战】户外智慧农场项目实战系列——3.云端可视化页面开发及设备数据源的配置与调试
[PBL项目实战]户外智慧农场项目实战系列--3.云端可视化页面开发及设备数据源的配置与调试 原文链接 https://mp.weixin.qq.com/s/5OT57-_QlN7lwRMWvey4 ...
- [项目实战] 使用Idea构建单页面Vue3项目（不使用node、npm）
前言 某天张三对小花说,我需要在一台新电脑上实现一个前端的漂亮页面:比如京东手机首页(m.jd.com). 小花这时吭哧吭哧的去新电脑上安装nodejs.npm,然后在本地使用npm构建vue3项目, ...
- Django项目实战: Django + PyPDF2实现PDF页面提取和PDF文件输出
在日常工作中我们经常需要从一个大的PDF文档中提取我们所需要的页面,所以今天我们将教你用Django + PyPDF2开发个小Web应用: 用户上传一个PDF文档,输入需要提取的页面号码,点击确定后浏 ...
- 项目实战——创建菜单与游戏页面（上）
目录 PS:整篇文章全是实现前端的工作,如果大家不了解vue3,建议补一下前置知识~~ 一.整体框架 二.实现导航栏 三.导航栏中实现页面跳转 四.实现地图 五.实现墙体 六.生成障碍物 PS:整篇文 ...
- Android 实训 Day2——项目实战（简单的登录页面）
1.首先,我们准备好需要用的图片,这里我只用了四张照片,分别是用户头像,用户名图标,密码图标,容器背景. 将照片粘贴到res/mipmap 目录,或者res/drawble目录下: 新建一个Empty ...
- 项目实战——创建菜单与游戏页面（下）
目录 一.整体框架 二.修改地图为中心对称 三. 画蛇 四.实现蛇的移动 五.读取键盘的操作 六.美化蛇和检测非法逻辑 一.整体框架 二.修改地图为中心对称 如果两条蛇,同时走到相同的格子,会造成平局 ...
- 【PBL项目实战】户外智慧农场项目实战系列——5.天气预报API接口对接
[PBL项目实战]户外智慧农场项目实战系列--5.天气预报API接口对接 原文链接 https://mp.weixin.qq.com/s/jditkIEd-UK6cSQyCC_-Eg 本系列以户外智 ...
- 基于html+css+js+jquery的购物页面设计
1.jQuery介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码(框架)于2006年1月由John Resig发布.jQue ...
最新文章
- Web API路由和动作选择
- 物联网数据库需求——写入快，分析能力强
- PHPCMS调用相关
- mybatis 2 -常用数据操作
- “通信大数据”征文通知
- 有效数据包含外部数据_DuckDB FDW(外部数据包装器)来了
- 《Linux内核分析》期末总结及学习心得
- java编码转换报错_Java中BeanUtils的日期转换 代码报错 怎么解决
- UVALive 4725 Airport（二分）
- chrome分辨率测试工具
- [神经网络]计算量GFLOPS和参数量#Params以及感受野计算
- Delphi 生成二维码【PaintBox】并保存为本地文件添加至【Image】控件中
- 【性能提升神器】STRAIGHT_JOIN
- 手机连不上电脑WIFI并且一直提示正在获取IP地址
- .py文件应该怎样打开？
- 以企查查为例详解如何用爬虫采集企业信息及电话邮箱数据
- Vue + D3 动态可视化图实现之一：折线图
- java判断字符串长度_java判断中文字符串长度的简单实例
- OpenCV——人脸识别模型训练（2）
- 什么是欧式期权？什么是美式期权？