master

分支 (1)

管理

管理

master

jd-app-imitation
/
third.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./font/iconfont.js"></script>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link
      rel="stylesheet"
      href="./swiper/swiper-bundle.min.css"
    />
    <style>

      /* 底标 */
.icon {
    width: -1em;
    height: -1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

ul,
p.body {
    /* 移动端要加body */
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: #000;
}

#bnav {
    position: fixed;
    /* 固定  内容多有滚动条 它位置不变*/
    left: 0;
    bottom: 0;
    width: 100%;
    /* 脱离正常文档流 要给宽度 */
    background-color: #fff;
    z-index: 9;
    /* z轴的序号 垂直于屏幕 哪些设有作用 多个盒子重叠一起时 大的覆盖小的 */
    display: flex;
    /* 横过来 */

}

.y>li {
    width: 30%;
    /* 5个平均分 */
    text-align: center;
    /* 文字居中 */
}

.y svg {
    font-size: 60px;
    line-height: 10px;

}

.y p {
    font-size: 30px;
    line-height: 5px;

}

.y a {
    color: #333;
}

body {
    margin-bottom: 80px;
    /* 50+30  避免导航挡住最后的内容 ，高度大于或等于导航的高度*/
}
.y{
    display: flex;
    width: 40%;
}
.u{
    width: 60%;
    display: flex;
    line-height: 15px;
}
.u1{
  width: 50%;
    font-size: 35px;
    color: #fff;
    text-align: center;
    background-color: rgb(226, 50, 50);
    border-radius: 25px;
   margin: 0 10px;

}
.u2{
    width: 50%;
    font-size: 35px;
    color: #fff;
    text-align: center;
    background-color: rgb(226, 135, 50);
    border-radius: 25px;
}
.xt{
    width: 100%;

}
.xt img{
   width: 100%;
   height: 200px;
}


    </style>
</head>
<body>
    <link rel="stylesheet" href="./css/third/jt.css">
    <link rel="stylesheet" href="./css/third/sptp.css">
    <link rel="stylesheet" href="./css/third/jg.css">
    <link rel="stylesheet" href="./css/third/pl.css">
    <link rel="stylesheet" href="./css/wl">
    <div class="st">
        <li id="zjt">

          <a href="./second.html">
              <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-zuojiantou"></use>
              </svg></a>

        </li>

      <li id="sd">
          <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-sandian"></use>
          </svg>

      </li>

  </div>
    <!-- Swiper -->
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><video src="./img/v.mp4" controls width="100%" height="100%" autoplay="autoplay"></video></div>
          <div class="swiper-slide"><img src="./img/s34.jpg"></div>
          <div class="swiper-slide"><img src="./img/s36.jpg"></div>
          <div class="swiper-slide"><img src="./img/s35.jpg"></div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
      <!-- Swiper JS -->
      <script src="./swiper/swiper-bundle.min.js"></script>
      <!-- Initialize Swiper -->
      <script>
        var swiper = new Swiper(".mySwiper", {
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        });
      </script>
<script>
    //dom代码写在body最后，或者onload函数里
    var tab=document.querySelector(".tab");/* 找到第一个.tab */
    var tt=tab.getElementsByClassName("tt")[0];
    var span=tt.querySelectorAll("span");
    var tc=tab.querySelectorAll(".tc");
    console.log(tab,tt,span,tc);
    for(var i=0;i<span.length;i++){
        span[i].index=i;

        span[i].onmouseover=function(){
            //不能使用i,使用this
            //鼠标上 所有的span都去除cur类，所有的tc都yinc
            for(var j=0;j<span.length;j++){
                span[j].classList.remove("cur");/* 删除所有span里的cur */
                tc[j].style.display="none";/* 所有tc都隐藏*/
            }
            this.classList.add("cur");
            tc[this.index].style.display="block";
        }
    }
</script>
<!-- 价格 -->
<div class="h1">
<div class="ss">
    <div class="zt">
        <span>￥149.00</span>
    </div>
    <div class="yt">
        <li id="t1">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jiangjiatongzhi"></use>

            </svg>
            <p>降价通知</p>
        </li>
        <li id="t2">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shoucang"></use>
            </svg>
            <p>收藏</p>
        </li>
    </div>
</div>
    <div class="wz">
        <p>3期免息 ></p>
        <span>王明月 GUUKA古由卡潮牌笑脸手绘涂鸦短袖T恤男2021夏季新品日系嘻哈恶搞印花圆领运动潮流五分袖宽松上衣 白色 XS</span>
    </div>
</div>
<div class="logistics">
    <div class="x">
        <span class="y1">已选</span>
        <span class="z1">10片装，1件</span>

    </div>
    <div class="x1">
        <span class="y2">物流</span>
        <span class="z2">包邮</span>
        <span class="w">无货</span>

    </div>
    <div class="x">
        <span class="ps">配送至</span>
        <span class="add">北京朝阳区三环至四环之间</span>
    </div>
    <div class="x1">
        <span class="y1">服务</span>
        <span class="z1">商家发货&售后</span>

    </div>
</div>
<div class="pl">
    <div class="q">
        <p>评价 200+</p>
        <span>好评度 90%></span>
    </div>
    <div class="w">
         <p>柔软舒适</p>
         <p>设计感强</p>
         <p>质感上乘</p>
    </div>
    <div class="e">
        <div class="e1">
            <img src="./img/p11.jpg">
            <p>小李</p>
        </div>
        <h2>设计感十足哇，这个哭笑不得的小表情很有趣。已经回购好多次啦，都没有让我失望过，衣服从包装到质量再到服务，都棒棒的。</h2>
        <div class="r">
            <img src="./img/p1.jpg">
            <img src="./img/p2.jpg">
            <img src="./img/p3.jpg">
        </div>
        <div class="t">
            <p>查看全部评论</p>
        </div>
    </div>
</div>

<ul id="bnav">
    <div class="y">
    <li>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-dianpu1"></use>
        </svg>
        <p><a href="#">店铺</a></p>
    </li>
    <li>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-kefurexian"></use>
        </svg>
        <p><a href="#">客服</a></p>
    </li>
    <li>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-gouwuche2  "></use>
        </svg>
        <p><a href="#">购物车</a></p>
    </li>
</div>
   <div class="u">
       <div class="u1">
           <p>加入购物车</p>
       </div>
       <div class="u2">
        <p>立即购买</p>
    </div>
   </div>

</ul>
<!-- <div class="xt">
    <img src="./img/l1.jpg" >
    <img src="./img/l2.jpg" >
    <img src="./img/l3.jpg" >
    <img src="./img/l4.jpg" >
</div> -->

</body>
</html>