1号店详情页(共5页)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>详情</title>
  <!--引入公共css样式文件-->
  <link href="css/common.css" rel="stylesheet" type="text/css">
  <!--favicon图片引入-->
  <link rel="shortcut icon" href=" favicon/favicon.ico"/>
  <!--引入详情css样式文件-->
  <link href="css/detail.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--上合模块start-->
<div class="top_all">
  <!--快捷导航模块start-->
  <div class="nav">
    <span>送货至&nbsp;四川</span>
    <ul class="right">
      <li>
        <f>您好!<a href="loginpage.html">请登录</a> </f>
        <a href="registerpage.html" class="style_ff">&nbsp;免费注册</a>|
      </li>
      <li><a href="#">我的订单</a>|</li>
      <li><a href="#" class="fonts_icon">收藏夹</a></li>
      <li><a href="#" class="fonts_icon">客户服务</a></li>
      <li><a href="#" class="fonts_icon">网站导航</a>|</li>
      <li><a href="#" class="pic_icon">关注我们</a><img src="img/sh1.png" class="pic"/> <img class="pic" src="img/sh2.png"/>|
      </li>
      <li><a href="#" class="pic2_icon">手机版</a></li>
    </ul>
  </div>
  <!--快捷导航模块end-->
  <!--header模块start-->
  <header class="header ">
    <!--logo模块start-->
    <div class="in_logo">
      <img src="img/loginlogo.jpg">
    </div>
    <!--logo模块end-->
    <!--搜索模块start-->
    <div class="search">
      <input type="text" class="search1">
      <button class="search2">搜索</button>
    </div>
    <!--搜索模块end-->
    <!--热词模块start-->
    <div class="hot_words">
      <ul>
        <li><a href="#">咖啡</a></li>
        <li><a href="#">iphone 6s</a></li>
        <li><a href="#">新鲜美食</a></li>
        <li><a href="#">蛋糕</a></li>
        <li><a href="#">日用品</a></li>
        <li><a href="#">连衣裙</a></li>
      </ul>
    </div>
    <!--热词模块end-->
    <!--购物车模块start-->
    <div class="shop_car">
      <span>购物车</span>
    </div>
    <!--购物车模块end-->
  </header>
  <!--header模块over-->
  <!--导航模块start-->
  <div class="self_nav w">
    <!--商品分类模块start-->
    <div class="classify">
      <l>全部商品分类</l>
    </div>
    <!--商品分类模块end-->
    <!--自助导航模块start-->
    <div class="s_nav">
      <ul>
        <li><a href="#" class="style_cc">首页</a></li>
        <li><a href="#" class="style_cc">自营超市</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>
    </div>
    <!--自助导航模块end-->
    <!--手机下单模块start-->
    <div class="tip">
      <img src="img/phone.png">
    </div>
    <!--手机下单模块end-->
  </div>
</div>
<!--上合模块end-->
<section class="section w">
  <!--珍珠详情模块start-->
  <div class="shou_ye w">
    <ul>
      <li><a href="#" class="e902">所有团购</a></li>
      <li><a href="#" class="e902">包饰</a></li>
      <li><a href="#" class="e902">珠韵首饰</a></li>
      <li><a href="#" class="yellow">冰韵 天然白色正圆S925银扣珍珠项链</a></li>
    </ul>
  </div>
  <div class="xiangqing w">
    <div class="pic_zhubao">
      <img src="img/ps1.jpg">
    </div>
    <div class="xaingxi_canshu">
      <h5>珠韵首饰 冰韵 天然白色正圆S925银扣珍珠项链</h5>
      <p>全国包邮 送岳父 送前任 不二之选 天然白色正圆S925银扣珍珠项链</p>
      <span>本店价格:<a>¥8888</a></span>
      <span class="can_kao">参考价格:<h>¥1199</h></span>
      <ul class="zheng_shu">
        <li class="none_border">尺码:</li>
        <li class="shu_tu">43cm</li>
        <li>45cm</li>
        <li>50cm</li>
      </ul>
      <ul class="zheng_shu shangzuo">
        <li class="none_border">颜色选择:</li>
        <li>粉色</li>
        <li class="shu_tu">白色</li>
      </ul>
      <f><a><img src="img/sh.png">分享</a></f>
      <f><a><img src="img/heart_h.png">关注商品</a></f>
      <div class="top_more">
        <div class="all_de">
          <div class="jia">+</div>
          <div class="jian">-</div>
          <a>1</a>
        </div>
      </div>
      <div class="shopcar">
        <a>加入购物车</a>
      </div>
    </div>
    <div class="pic_big">
      <div class="pic_small">
        <img src="img/sbrand.jpg">
      </div>
      <div class="pic_font">
        <a>进入品牌专区</a>
      </div>
    </div>
    <div class="more_1">
      <ul>
        <li><img src="img/r_left.png" alt=""></li>
        <li><img src="img/ps2.jpg" class="gray"></li>
        <li><img src="img/ps3.jpg" class="gray"></li>
        <li><img src="img/ps4.jpg" class="gray"></li>
        <li><img src="img/ps2.jpg" class="gray"></li>
        <li><img src="img/r_right.png" alt=""></li>
      </ul>

    </div>
  </div>
  <!--珍珠详情模块end-->
  <!--用户喜欢模块start-->
  <div class="like_all">
    <div class="looked">
      <a href="#" class="dea">用户还喜欢</a>
    </div>
    <div class="pic_all">
      <div class="pic_01">
        <div class="pic_01_1">
          <img src="img/his_1.jpg">
          <p>科爱儿童KEAL书包</p>
          <a>¥&nbsp;768</a>
        </div>
      </div>
      <div class="pic_01">
        <div class="pic_01_1">
          <img src="img/his_2.jpg">
          <p>Dior/迪奥香水2件套</p>
          <a>¥&nbsp;368</a>
        </div>
      </div>
      <div class="pic_01">
        <div class="pic_01_1">
          <img src="img/his_3.jpg">
          <p>Dior/迪奥香水2件套</p>
          <a>¥&nbsp;888</a>
        </div>
      </div>
      <div class="pic_01">
        <div class="pic_01_1">
          <img src="img/his_4.jpg">
          <p>Dior/迪奥香水2件套</p>
          <a>¥&nbsp;768</a>
        </div>
      </div>
      <div class="pic_01">
        <div class="pic_01_1">
          <img src="img/his_5.jpg">
          <p>Dior/迪奥香水2件套</p>
          <a>¥&nbsp;868</a>
        </div>
      </div>
    </div>
  </div>
  <!--用户喜欢模块end-->
  <!--商品属性模块start-->
  <div class="da_p">
    <div class="dapei_a">
      <div class="sigedazi">
        <a>推荐搭配</a>
      </div>
    </div>
    <div class="pic_all_6">
      <div class="mohe_1">
        <div class="mohe_1_1">
          <img src="img/mat_1.jpg">

        </div>
        <p>粤通国际珠宝 999足金</p>
        <input type="checkbox" checked>
        <a>¥76</a>

      </div>
      <div class="mohe_1">
        <div class="mohe_1_1_1">
          <img src="img/jia_b.gif">

        </div>
        <div class="mohe_1_1">
          <img src="img/mat_2.jpg">

        </div>
        <p>珠韵9.5-10.5珍珠项链</p>
        <input type="checkbox">
        <a>¥8462</a>

      </div>
      <div class="mohe_1">
        <div class="mohe_1_1_1">
          <img src="img/jia_b.gif">

        </div>
        <div class="mohe_1_1">
          <img src="img/mat_3.jpg">

        </div>
        <p>粤通国际珠宝 清新耳环</p>
        <input type="checkbox" checked>
        <a>¥223</a>

      </div>
      <div class="mohe_money">
        <img src="img/equl.gif">
        <span>套餐价:<a>¥9651</a></span>
        <input type="text" placeholder="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1">
        <div class="zuhe"><a>组合购买</a></div>

      </div>

    </div>
  </div>
  <!--商品属性模块end-->
  <!--商品详情模块start-->
  <div class="shuxing">
    <div class="shu_1">
      <div class="shu_2">
        <a>商品属性</a>
      </div>
      <a href="#more">商品详情</a><a href="#tall">商品评论</a>

    </div>
    <div class="shu_3">
      <ul class="adds">
        <li><a href="">产品名称:天然淡水珍珠</a></li>
        <li><a href="">产品编号:1596423</a></li>
        <li><a href="">品牌:珠韵首饰</a></li>
        <li><a href="">上架时间:2020-5-23 22:02:36</a></li>
      </ul>
      <ul class="weight">
        <li><a href="">产品毛重:160.00kg</a></li>
        <li><a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;产品产地:法国</a></li>
        <li><a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;产品形状:正圆</a></li>
      </ul>
      <ul class="long">
        <li><a href="">镶嵌材质:纯银</a></li>
        <li><a href="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;款式:项链</a>
        </li>
      </ul>

    </div>

  </div>
  <!--商品详情模块end-->
  <!--商品详细模块start-->
  <div class="xaingxi_1">
    <div class="xin_1">
      <a name="more">商品详情</a>
    </div>
    <img src="img/de2.jpg">
    <img src="img/de3.jpg">
    <img src="img/de4.jpg">
    <img src="img/de5.jpg">
    <img src="img/de6.jpg">
    <img src="img/de7.jpg">
    <img src="img/de8.jpg">
  </div>
  <!--商品详细模块end-->
  <!--商品评论模块start-->
  <div class="tall_1">
    <div class="tall_2">
      <a name="tall">商品评论</a>
    </div>
    <div class="tall_3">
      <div class="tall_4">
        <h>80.0%</h>
        <n>好评度</n>
      </div>
      <div class="tall_5">
        <a>好评(70%)</a>
        <div class="tall_5_1">
          <div class="tall_5_1_1 teshuren"></div>
        </div>
      </div>
      <div class="tall_5 annima">
        <a>中评(20%)</a>
        <div class="tall_5_1">
          <div class="tall_5_1_1"></div>
        </div>
      </div>
      <div class="tall_5">
        <a>差评(10%)</a>
        <div class="tall_5_1">
          <div class="tall_5_1_1"></div>
        </div>
      </div>
      <div class="tall_6">
        <a>购买过珠韵首饰 天然银扣珍珠项链的顾客,在收到商品才可以对该商品发表评论</a>
      </div>
      <div class="tall_7">
        <a>我要评论</a>
      </div>
      <span>您可对已购买商品进行评价</span>
    </div>
    <ul>
      <li><a href="detail.html"><img src="img/peo1.jpg">那曲终人散</a></li>
      <li><a href="#">颜色分类:金色</a></li>
      <li><a href="#">已买,妻离子散的感觉</a></li>
    </ul>
    <ul>
      <li><a href="detail.html"><img src="img/peo2.jpg">自始而终的</a></li>
      <li><a href="#">颜色分类:金色</a></li>
      <li><a href="#">已买,妻离子散的感觉</a></li>
    </ul>
    <ul>
      <li><a href="detail.html"><img src="img/peo3.jpg">常山赵子龙</a></li>
      <li><a href="#">颜色分类:金色</a></li>
      <li><a href="#">已买,妻离子散的感觉</a></li>
    </ul>
    <ul>
      <li><a href="detail.html"><img src="img/peo4.jpg">那*******年</a></li>
      <li><a href="#">颜色分类:金色</a></li>
      <li><a href="#">已买,妻离子散的感觉</a></li>
    </ul>

    <div class="double">
      <ul>
        <li><a href="detail.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
        </li>
        <li><a href="#">型号:45cm</a></li>
        <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2020-10-12</a></li>
      </ul>
      <ul>
        <li><a href="detail.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
        </li>
        <li><a href="#">型号:45cm</a></li>
        <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2020-10-12</a></li>
      </ul>
      <ul>
        <li><a href="detail.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
        </li>
        <li><a href="#">型号:45cm</a></li>
        <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2020-10-12</a></li>
      </ul>
      <ul>
        <li><a href="detail.html">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(匿名用户)&nbsp;</a></li>
        <li><a href="#">型号:45cm</a></li>
        <li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2020-10-12</a></li>
      </ul>
    </div>
    <div class="xian">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  <div class="switch">
    <ul>
      <li class="gaozi"><a href="searchList.html">上一页</a></li>
      <li class="kuan style_mm"><a href="searchList.html">1</a></li>
      <li class="kuan "><a href="searchList.html">2</a></li>
      <li class="kuan"><a href="searchList.html">3</a></li>
      <li class="none"><a href="searchList.html">...</a></li>
      <li class="kuan"><a href="searchList.html">20</a></li>
      <li class="gaozi"><a href="searchList.html">下一页</a></li>
    </ul>
  </div>
  <!--商品评论模块end-->
  <!--底部法律信息模块start-->
  <div class="footer w">
    <div>
      <il>
        <li class="z_pin">
          <img src="img/b1.png">
          <p>正品保障</p>
          <a>正品行货 放心购买</a>
        </li>
      </il>
    </div>
    <div>
      <il>
        <li class="z_pin">
          <img src="img/b2.png">
          <p>满38包邮</p>
          <a>满38包邮 免运费</a>
        </li>
      </il>
    </div>
    <div>
      <il>
        <li class="z_pin">
          <img src="img/b3.png">
          <p>天天低价</p>
          <a>天天低价 畅选无忧</a>
        </li>
      </il>
    </div>
    <div>
      <il>
        <li class="z_pin">
          <img src="img/b4.png">
          <p>正准时送达</p>
          <a>收货时间 由你做主</a>
        </li>
      </il>
    </div>
    <div class="all_he">
      <div class="mation">
        <ul>
          <li>
            <ul>
              <li><a href="#" class="bid_font">新手上路</a></li>
              <li><a href="#">售后流程</a></li>
              <li><a href="#">购物流程</a></li>
              <li><a href="#">订购方式</a></li>
              <li><a href="#">隐私声明</a></li>
              <li><a href="#">推荐分享说明</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="mation">
        <ul>
          <li>
            <ul>
              <li><a href="#" class="bid_font">配送与支付</a></li>
              <li><a href="#">货到付款区域</a></li>
              <li><a href="#">配送支付查询</a></li>
              <li><a href="#">支付方式说明</a></li>

            </ul>
          </li>
        </ul>
      </div>
      <div class="mation">
        <ul>
          <li>
            <ul>
              <li><a href="#" class="bid_font">会员中心</a></li>
              <li><a href="#">资金管理</a></li>
              <li><a href="#">我的收藏</a></li>
              <li><a href="#">我的订单</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="mation">
        <ul>
          <li>
            <ul>
              <li><a href="#" class="bid_font">服务保证</a></li>
              <li><a href="#">退换货原则</a></li>
              <li><a href="#">售后服务保证</a></li>
              <li><a href="#">产品质量保证</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="mation">
        <ul>
          <li>
            <ul>
              <li><a href="#" class="bid_font">联系我们</a></li>
              <li><a href="#">网站故障报告</a></li>
              <li><a href="#">购物资讯</a></li>
              <li><a href="#">投诉与建议</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="code">
        <div class="Qr_code">
          <img src="img/er.gif">
        </div>
        <div class="sina">
          <img src="img/b_sh_1.png"><a>新浪微博</a>
        </div>
        <div class="tencent">
          <img src="img/b_sh_2.png"><a>腾讯微博</a>
        </div>
        <div class="we_are">
          <img src="img/ss.png">
        </div>
      </div>
      <span>
        <p>服务热线:</p>
        <a>400-123-4567</a>
      </span>

    </div>

  </div>
  <div class="public">
    <p>备案/许可证编号:蜀ICP备12009302号-1-www.dingguagua.com Copyright© 1号店网上超市 2007-2016,All Rights Reserved,复制必究,Technical
      Support:Dgg Group</p>
  </div>
  <div class="police">
    <img src="img/b_1.gif">
    <img src="img/b_2.gif">
    <img src="img/b_3.gif">
    <img src="img/b_4.gif">
    <img class="small" src="img/b_5.gif">
    <img class="small" src="img/b_6.gif">
  </div>
  <!--底部法律信息模块end-->
</section>
</body>
</html>
  • 13
    点赞
  • 44
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
1号店购物的HTML和CSS主要用于构建并美化网的外观和布局。HTML(超文本标记语言)负责定义面的结构和内容,CSS(层叠样式表)则负责为面添加样式和风格。 HTML部分主要负责创建面的整体结构。我们可以使用HTML标记来创建导航栏、商品列表、购物车等不同的面部分。使用HTML标签,我们还可以添加图片、链接和按钮等元素以增强面的交互性。 CSS部分用来为面添加样式和布局。我们可以使用CSS来设置文本的字体、颜色和大小,调整元素之间的间距和边框样式,添加背景色或图片,并设置面的响应式布局以适应不同的屏幕尺寸。 在1号店购物中,可能会使用一些常见的HTML和CSS特性。比如,使用HTML的表格标签来呈现商品列表,使用CSS设置表格的边框样式和单元格的对齐方式;使用HTML的div标签来创建面的不同模块,使用CSS设置各模块的背景色和边距;使用HTML的a标签来添加商品链接,使用CSS设置链接的样式和悬停效果。 此外,1号店购物还可能使用一些JavaScript来实现与用户的交互,比如添加商品到购物车、实现搜索功能等。HTML和CSS与JavaScript可以结合使用,为用户提供更好的购物体验。 总而言之,1号店购物的HTML和CSS用于构建面的结构、内容和样式,以实现面的美观和易用性。HTML定义面的结构,CSS负责样式和布局。通过合理运用HTML、CSS以及JS等技术,可以创建出功能丰富且用户友好的购物面。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

七号男技师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值