woniu_family
/
item.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/item.css">
</head>
<body>
    <!-- 网页头部 -->
    <header>
        <div class="head">
          <div class="logo">
            <a href="./index.html" class="link_a">
              <img src="./images/logo.png" alt="" />
            </a>
          </div>
          <!--个人信息 -->
          <div class="user_info">
            <div class="link">
              <span><a class="link_a" href="./login.html">登录</a></span>
              <span>|</span>
              <span><a class="link_a" href="./regesiter.html">注册</a></span>
            </div>
            <div class="search">
              <input type="text" placeholder="热门搜索：干花花瓶" />
              <a class="link_a" href=""><button></button></a>
            </div>
            <div class="icon">
              <a href="./usercenter.html" class="link_a">
                <img src="./images/grzx.png" alt="" />
              </a>
              <a href="" class="link_a">
                <img src="./images/ewm.png" alt="" />
              </a>
              <a href="./cart.html" class="link_a">
                <img src="./images/gwc.png" alt="" />
              </a>
            </div>
          </div>
        </div>
        <!-- 导航 -->
      <!-- 导航 -->
      <nav>
        <!-- <div class="navigation">

          </div> -->
        <div class="navigation">
          <a href="" class="link_a">首页</a>
          <a href="" class="link_a" name="all">
            所有商品
            <!-- 根据nav定位 -->
            <div class="all_product">
              <!-- 全部商品 漂浮 -->
              <div class="center">

                <div class="product_item">
                  <div>
                    <img src="./images/nav1.jpg" alt="">
                  </div>
                  <div>浓情欧式</div>
                </div>
                <div class="product_item">
                  <div>
                    <img src="./images/nav5.jpg" alt="">
                  </div>
                  <div>浪漫美式</div>
                </div>
                <div class="product_item">
                  <div>
                    <img src="./images/nav6.jpg" alt="">
                  </div>
                  <div>浓情欧式</div>
                </div>
                <div class="product_item">
                  <div>
                    <img src="./images/nav7.jpg" alt="">
                  </div>
                  <div>浓情欧式</div>
                </div>
                <div class="product_item">
                  <div>
                    <img src="./images/nav8.jpg" alt="">
                  </div>
                  <div>浓情欧式</div>
                </div>
              </div>
              <!-- 全部商品 漂浮 -->
            </div>
          </a>
          <a href="" class="link_a" name="accessories">
            装饰配件
             <!-- 样式  -->
            <div class="css">
              <div class="center">
                <span>干花花艺</span>
                <span>花瓶花艺</span>
              </div>
            </div>
          </a>
             <!-- 样式  -->

          <a href="" class="link_a" name="decorations">
            布艺软饰
            <div class="decorations">
              <div class="content">
                <span>桌布罩件</span>
                <span>抱枕靠枕</span>
              </div>
            </div>
          </a>
          <a href="./paint.html" class="link_a">墙饰壁挂</a>
          <a href="" class="link_a">蜡艺香薰</a>
          <a href="" class="link_a">创意家居</a>
        </div>
      </nav>
      <!-- 导航 -->
    </header>
    <!-- 网页头部 -->

    <!-- 导航 -->
    <div class="position">
      <div class="link">
        <span>
          <a href="" class="link_a"> 首页 </a>
        </span>
        <span> / </span>
        <span>
          <a href="" class="link_a"> 装饰摆件 </a>
        </span>
        <span> / </span>
        <span>
          <a href="" class="link_a"> 干花花艺 </a>
        </span>
        <span> / </span>
        <span>
          <a href="" class="link_a"> 【最家】非洲菊仿真花干花 </a>
        </span>
      </div>
    </div>
    <!-- 导航 -->

    <!-- 电梯导航 -->
    <div class="goTop">
        <div><a href="" class="link_a"><img src="./images/gt1.png" alt=""></a></div>
        <div><a href="" class="link_a"><img src="./images/gt2.png" alt=""></a></div>
        <div><a href="" class="link_a"><img src="./images/gt3.png" alt=""></a></div>
        <div><a href="" class="link_a"><img src="./images/gt4.png" alt=""></a></div>
    </div>
    <!-- 电梯导航 -->

    <!-- 商品的详情 -->
    <div class="content">
        <!-- 左边可以选择商品 -->
        <div class="order">
            <img src="./images/temp/cart01.jpg" alt="">
            <div class="icon">
                <div>
                    <a href="" class="link_a"><img src="./images/temp/det02.jpg" alt=""></a>
                </div>
                <div>
                    <a href="" class="link_a"><img src="./images/temp/det03.jpg" alt=""></a>
                </div>
                <div>
                    <a href="" class="link_a"><img src="./images/temp/det04.jpg" alt=""></a>
                </div>
                <div>
                    <a href="" class="link_a"><img src="./images/temp/det01.jpg" alt=""></a>
                </div>
            </div>
        </div>
        <!-- 左边可以选择商品 -->
        <div class="details">
            <div class="absolute">
                <div class="title">
                    【最家】非洲菊仿真花干花
                </div>
                <div class="class">
                    <div>
                        【破损补寄】【适合放室内、卧室、书房、餐桌、办公室、客厅、电视柜等地方】【无理由退换货】【包邮】【白色现代简约花瓶】
                    </div>
                    <div class="pric">
                        <span>￥</span><span>59.90</span>
                    </div>
                    <div class="select">
                        <div class="color">颜色分类</div>
                        <div class="select_pic">
                                <a href="" class="link_a"><img src="./images/temp/probig01.jpg" alt=""></a>
                                <a href="" class="link_a"><img src="./images/temp/probig02.jpg" alt=""></a>
                                <a href="" class="link_a"><img src="./images/temp/proBig03.jpg" alt=""></a>
                                <a href="" class="link_a"><img src="./images/temp/probig04.jpg" alt=""></a>
                        </div>
                    </div>
                </div>
                <div class="num">数量&nbsp;库存<span>2096</span>件</div>
                <div class="button">
                    <button type="submit">+</button>
                    1
                    <button type="submit">-</button>
                </div>
                <div class="last">
                    <!-- 两个按钮 -->
                    <button type="submit">立即购买</button>
                    <button type="submit">加入购物车</button>
                </div>
            </div>

        </div>
    </div>
    <!-- 商品的详情 -->

    <!-- 主体部分 -->
    <!-- 商品的介绍 -->
    <main>
      <div class="product_info">
        <div class="product_nav">
          <div>
            <a href="" class="link_a">商品详情</a>
            </div>
          <div>
            <a href="" class="link_a">所有评价</a>
            </div>
        </div>
        <div class="product_content">
          <!-- 图片展示 -->
          <div>
            <img src="./images/temp/det01.jpg" alt="">
          </div>
          <div>
            <img src="./images/temp/det02.jpg" alt="">
          </div>
          <div>
            <img src="./images/temp/det03.jpg" alt="">
          </div>
          <div>
            <img src="./images/temp/det04.jpg" alt="">
          </div>
          <div>
            <img src="./images/temp/det05.jpg" alt="">
          </div>
          <div>
            <img src="./images/temp/det06.jpg" alt="">
          </div>
          <div>
            <img src="./images/temp/det07.jpg" alt="">
          </div>
        </div>
      </div>
      <div class="product_cell">
        <div class="product_title">为你推荐</div>
        <div class="product_cell_content">
          <div class="item">
            <div>
              <a href="" class="link_a">
                <img src="./images/n2.jpg" alt="">
              </a>
              <div >【最家】复古文艺风玻璃花瓶</div>
              <div>￥193.20</div>
            </div>
          </div>
          <div class="item">
            <div>
              <a href="" class="link_a">
                <img src="./images/n3.jpg" alt="">
              </a>
              <div >【最家】复古文艺风玻璃花瓶</div>
              <div>￥193.20</div>
            </div>
          </div>
          <div class="item">
            <div>
              <a href="" class="link_a">
                <img src="./images/n4.jpg" alt="">
              </a>
              <div >【最家】复古文艺风玻璃花瓶</div>
              <div>￥193.20</div>
            </div>
          </div>
          <div class="item">
            <div>
              <a href="" class="link_a">
                <img src="./images/n5.jpg" alt="">
              </a>
              <div >【最家】复古文艺风玻璃花瓶</div>
              <div>￥193.20</div>
            </div>
          </div>

        </div>
      </div>
    </main>
    <!-- 商品的介绍 -->
    <!-- 主体部分 -->

    <!-- 轮播图 -->
    <div class="banner">
      <div class="prev"> <img class="next" style="flex:1" src="./images/temp/prev.png" alt=""></div>
      <div class="goods">
        <a href="" class="link_a">
          <img src="./images/temp/like01.jpg" alt="">
        </a>
        <div>【最家】复古文艺风玻璃花瓶</div>
        <div><span>￥</span><span>688.0</span></div>
      </div>
      <div class="goods">
        <a href="" class="link_a">
          <img src="./images/temp/like02.jpg" alt="">
        </a>
        <div>【最家】复古文艺风玻璃花瓶</div>
        <div><span>￥</span><span>688.0</span></div>
      </div>
      <div class="goods">
        <a href="" class="link_a">
          <img src="./images/temp/like03.jpg" alt="">
        </a>
        <div>【最家】复古文艺风玻璃花瓶</div>
        <div><span>￥</span><span>688.0</span></div>
      </div>
      <div class="goods">
        <a href="" class="link_a">
          <img src="./images/temp/like04.jpg" alt="">
        </a>
        <div>【最家】复古文艺风玻璃花瓶</div>
        <div><span>￥</span><span>688.0</span></div>
      </div>
      <div class="prev"><img class="next" src="./images/temp/next.png" alt=""></div>
      </div>
    </div>
    <!-- 轮播图 -->
        <!-- 页脚 -->
        <footer>
          <div class="promise">
            <div class="promiser">
              <a href="" class="link_a">
                <img class="margin" src="./images/foot1.png" alt="" />
              </a>
              <div>7天无理由退货</div>
            </div>
            <div class="promiser">
              <a href="" class="link_a">
                <img class="margin" src="./images/foot2.png" alt="" />
              </a>
              <div>15天免费换货</div>
            </div>
            <div class="promiser">
              <a href="" class="link_a">
                <img class="margin" src="./images/foot3.png" alt="" />
              </a>
              <div>满599包邮</div>
            </div>
            <div class="promiser">
              <a href="" class="link_a">
                <img class="margin" src="./images/foot4.png" alt="" />
              </a>
              <div>手机特色服务</div>
            </div>
          </div>
          <div class="copyright">
            蜗牛家居©2019-2021公司版权所有 京ICP备080100-xx号<br />
            违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
          </div>
        </footer>
        <div class="returnTop">
          <div style="margin-top: 10px">返回</div>
          <div>顶部</div>
        </div>
        <!-- 页脚 -->
</body>
</html>