• 复制淘宝手机端页面案例

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>淘宝</title>
        <meta name="viewport" content="width=375,user-scalable=no" />
        <link rel="stylesheet" type="text/css" href="css/index.css"/>
    </head>
    <body>
        <div class="nav">
            <div class="logo"></div>
                <a href="" class="search"><span class="icon"> </span><span>寻找宝贝店铺</span></a>
                </div>    
                
                
                
                <div class="swiper">    </div>
                    
                
            <div class="iconList">
                <a href="" class="iconItem"><img src="img/huasuan.png" alt="" class="icon" /><span class="text">天猫</span></a>
                <a href="" class="iconItem"><img src="img/tianmao.webp" alt="" class="icon" /><span class="text">天猫</span></a>
                <a href="" class="iconItem"><img src="img/huasuan.png" alt="" class="icon" /><span class="text">天猫</span></a>
                <a href="" class="iconItem"><img src="img/huasuan.png" alt="" class="icon" /><span class="text">天猫</span></a>
                <a href="" class="iconItem"><img src="img/huasuan.png" alt="" class="icon" /><span class="text">天猫</span></a>
                <a href="" class="iconItem"><img src="img/huasuan.png" alt="" class="icon" /><span class="text">天猫</span></a>
                <a href="" class="iconItem"><img src="img/huasuan.png" alt="" class="icon" /><span class="text">天猫</span></a>
                <a href="" class="iconItem"><img src="img/huasuan.png" alt="" class="icon" /><span class="text">天猫</span></a>
                <a href="" class="iconItem"><img src="img/huasuan.png" alt="" class="icon" /><span class="text">天猫</span></a>
                <a href="" class="iconItem"><img src="img/huasuan.png" alt="" class="icon" /><span class="text">天猫</span></a>
                
                
            </div>
            
            <div class="toutiao">
                <div class="ttLeft"></div>
                    <div class="ttMain">
                <div class="jhItem"><span class="tag">热文</span><span class="text">5月份即将发布的三款高配置手机,5月份即将发布的三款高配置手机</span></div>
                <div class="jhItem"><span class="tag">精华</span><span class="text">红米官宣骁龙855新机，比小米9便宜</span></div>
            
                    </div>
                
            
            <div class="ttRight">
                
            </div>
            
    </div>
    
    
    
    
    
    <div class="qg">
        
        <div class="qgItem">
            <div class="left">
                    <div class="h1">淘抢购</div>
                    <div class="brif"></div>
                    <div class="prod"></div>
            </div>
            <div class="right">
                    <div class="h1"></div>
                    <div class="brif"></div>
                    <div class="prod"></div>
            </div>
        </div>
        
        
        
            <div class="qgItem">
                <div class="left">
                    <div class="h2">有好货</div>
                    <div class="brif">高颜值美物</div>
                    <div class="prod"></div>
            </div>
            <div class="right">
                    <div class="h1"></div>
                    <div class="brif"></div>
                    <div class="prod"></div>
            </div>
        </div>
        
        
        
        <div class="qgItem">
                <div class="left">
                    <div class="h3">哇哦小视频</div>
                    <div class="brif">有料小视频</div>
                    <div class="prod"></div>
            </div>
            <div class="right">
                    <div class="h1"></div>
                    <div class="brif"></div>
                    <div class="prod"></div>
            </div>
        </div>
        
        
        
        <div class="qgItem">
                <div class="left">
                    <div class="h4">必买清单</div>
                    <div class="brif">一站式攻略</div>
                    <div class="prod"></div>
            </div>
            <div class="right">
                    <div class="h1"></div>
                    <div class="brif"></div>
                    <div class="prod"></div>
            </div>
        </div>
        
        
        
        
    </div>
    
    
    
    <!--淘宝直播
    结构代码：.zhibo>(.zbTop>((.zbTleft>(.title+.text))+(.zbTright>(.title+.text))))+(.zbCenter>((.liveItem>(img+h1{亲子乐园}+p{印花长袖T恤}))*3))+(.zbBottom>(.tag+.text+.qfl{抢福利}))
        -->
        
    
          <div class="zhibo">
              <div class="zbTop">
                  <div class="zbTleft">
                      <div class="title">“路转粉”每一秒都在发生</div>
                      <div class="text">败家主播天天有，边看直播边剁手！</div>
                  </div>
                  <div class="zbTright">
                      <div class="title">主播优选</div>
                      <div class="text">真皮链条包</div>
                  </div>
              </div>
          <div class="zbCenter">
                  <div class="liveItem">
                      <img src="img/jiezhi.webp" alt="" />
                      <h1>亲子乐园</h1>
                      <p>印花长袖T恤</p>
                  </div>
                  <div class="liveItem">
                      <img src="img/mianmo.webp" alt="" />
                      <h1>亲子乐园</h1>
                      <p>印花长袖T恤</p>
                  </div>
                  <div class="liveItem">
                      <img src="img/dayi.webp" alt="" />
                      <h1>亲子乐园</h1>
                      <p>印花长袖T恤</p>
                  </div>
        </div>
              <div class="zbBottom">
                  <div class="tag">主播推荐</div>
                  <div class="text">品质好货，不能错过的亲民价</div>
                  <div class="qfl">抢福利</div>
              </div>
          </div>
    
    
    
    <div class="tabList">
        <div class="tabItem">
            <div class="icon"></div>
            <div class="text">首页</div>
        </div>
        <div class="tabItem">
            <div class="icon"></div>
            <div class="text">购物车</div>
        </div>
        <div class="tabItem">
            <div class="icon"></div>
            <div class="text">订单列表</div>
        </div>
        <div class="tabItem">
            <div class="icon"></div>
            <div class="text">我的淘宝</div>
        </div>
        <div class="tabItem">
            <div class="icon"></div>
            <div class="text">更多</div>
        </div>
    </div>
    
    

        
    </body>
</html>
    /*初始化样式*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.nav{
    display: flex;
    width: 375px;
    height: 37px;
    background: #FF852A;
    align-items: center;
    justify-content: center;
}
.nav .logo{
    width: 37px;
    height: 37px;
    background-image: url(../img/logo.png);
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
}
.nav .search{
    width: 324px;
    height: 25px;
    background: #FF4E22;
    border-radius: 4px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
align-items: center;

    color: #fff;
    font-size: 12px;
    text-decoration: none;
}
.nav .search .icon{
    width: 25px;
    height: 25px;
    background-image: url(../img/search.png);
    background-size: 60%;
    background-position:center 65%;
    background-repeat: no-repeat;
    
    display: block;
    
    
}

.swiper{
    width: 375px;
    height: 120px;
    background-image: url(../img/huxian.webp),url(../img/swiper.jpg);
    background-size: 100% 100%;
    background-position: 0px 115px,0px 0px;
}
.iconList{
    width: 375px;
    height: 160px;
    /*设置弹性布局，平均分布*/
    display: flex;
    /*主轴分布*/
    justify-content: space-around;
    /*换行*/
    flex-wrap: wrap;
    /*多行侧轴分布*/
    align-items: space-around;
    

}
.iconList .iconItem{
    width: 20%;
    height: 67px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    font-size: 11px;
    color: rgb(102, 102, 102);
    
    text-decoration: none;
}
.iconList .iconItem img{
    width: 80%;
    height: auto;
}
.iconList .iconItem .text{
    padding-top: 3px;
}




.toutiao{
    background-color: #fff;
    width: 375px;
    height: 60px;
    display: flex;
}
.toutiao .ttLeft{
    width: 60px;
    height: 60px;
    background-image: url(../img/toutiao.webp);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
}
.toutiao .ttMain{
    width: 232px;
    height: 60px;
    display: flex;
    /*设置弹性布局，方向是竖直*/
    flex-direction: column;
    font-size: 12px;
    justify-content: center;
}
.ttMain .jhItem{
    width: 232px;
    height: 19px;
    display: flex;
    
}
.ttMain .jhItem .tag{
        display: flex;
    width: 28px;
    height: 13px;
    font-size: 10.5px;
    align-items: center;
    justify-content: center;
    color: rgb(230, 10, 31);
    border: 1px solid rgb(230, 10, 31);
    border-radius: 3px;
    margin-right: 4px;
    
}
.ttMain .jhItem .text{
    width: 200px;
    height: 19px;
    
    
    /*溢出隐藏*/
    overflow: hidden;
    /*不换行*/
    white-space: nowrap;
    /*文字超出之后显示的样式*/
    text-overflow: ellipsis;
}

.toutiao .ttRight{
    width: 85px;
    height: 60px;
    background-image: url(../img/jianbian.png),url(../img/kafei.png);
    background-size: 100% 100%;
}






.qg{
    background-color: #fff;
    margin-top: 10px;
    width: 375px;
    height: 224px;
    display: flex;
    flex-wrap: wrap;
    
}
.qg .qgItem{
    width: 187.5px;
    height: 112px;
    display: flex;
    border-bottom: 1px solid #efefef;
}
.qgItem .left{
    width: 94px;
    display: flex;
    /*垂直显示*/
    flex-direction: column;
}
.qgItem .left .h1{
    font-size: 18px;
    color: rgb(230, 10, 31);
    padding-left: 5px;
    padding-top: 5px;
}
.qgItem .left .h2{
    font-size: 18px;
    color: deepskyblue;
    padding-left: 5px;
    padding-top: 5px;
}
.qgItem .left .h3{
    width: 100px;
    font-size: 18px;
    color: darkorange;
    padding-left: 5px;
    padding-top: 5px;
}
.qgItem .left .h4{
    font-size: 18px;
    color: rgb(230, 10, 31);
    padding-left: 5px;
    padding-top: 5px;
}
.qg .qgItem .brif{
    font-size: 12px;
    color: rgb(153, 153, 153);
    padding-left: 10px;
    padding-top: 2px;
}
.qg .qgItem .prod{
    flex: 1;
        
    background-image: url(../img/yifu.webp);
    background-size: 75px auto;
    background-position: 50% 80%;
    background-repeat: no-repeat;
}
.qg .qgItem .right{
    flex: 1;
    background-image: url(../img/maozi_.webp);
    background-size: 75px auto;
    background-position: 50% 80%;
    background-repeat: no-repeat;
}



.zhibo{
    width: 375px;
    height: 352.5px;
    margin-top: 20px;
    /*相对定位*/
    position: relative;
    background-color: #fff;
    margin-bottom: 43px;
}

/*使用伪元素必须初始化*/
.zhibo:before{
    /*是空也不能省略*/
    content: "";
    display: block;
    width: 375px;
    height: 29px;
    position: absolute;
    left: 0px;
    top: -13px;
    background-image: url(../img/zhibo.png);
    background-size: 100% 100%;
    z-index: 1;
    
    }
.zhibo .zbTop{
    width: 375px;
    height: 125px;
    display: flex;
    
}

.zhibo .zbTop .zbTleft{
    width: 249.5px;
    height: 125px;
    background-image: url(../img/zhezhao.webp),url(../img/girl1.jpg);
    background-size: 100% 100%;
    padding-left: 10px;
    position: relative;
    
}


.zhibo .zbTop .zbTleft:before{
    content: "";
    width: 20px;
    height: 20px;
    background-image: url(../img/shoucang.webp);
    background-size: 100% 100%;
    position: absolute;
    right: 15px;
    bottom: 20px;
}

.zhibo .zbTop .title{
    margin-top: 78px ;
    font-size: 12px;
    color: #fff;
    
}
.zhibo .zbTop  .text{
    font-size: 12px;
    color: #fff;
    /*透明度*/
    opacity:0.8 ;
}
.zhibo .zbTop .zbTright{
    flex: 1;
    height: 125px;
    background-image: url(../img/zhezhao.webp),url(../img/baobao.webp);
    background-size: 100% 100%;
    padding-left: 10px;
}

.zhibo .zbCenter{
    width: 375px;
    height: 180px;
    display: flex;
}
.zhibo .zbCenter .liveItem{
    flex: 1;
    display: flex;
    flex-direction: column;
}

.zhibo .zbCenter .liveItem img{
width: 100%;
    height: auto;    
}
.zhibo .zbCenter .liveItem h1{
    font-size: 14px;
    color:rgb(51, 51, 51) ;
    padding: 5px 10px 0px;
}
.zhibo .zbCenter .liveItem p{
    font-size: 12px;
    color: rgb(153, 153, 153);
    padding: 0px 10px;
}

.zhibo .zbBottom{
    width: 375px;
    height: 36px;
    display: flex;
    align-items: center;
    position: relative;
    
}
.zhibo .zbBottom .tag{
    display: inline-block;
    font-size: 12px;
    height: 16px;
    margin-left: 10px;
    color:rgb(253, 30, 87) ;
    border-style: solid;
      border-width: 0.5px;
    border-color: rgb(253, 30, 87);
    background-color: rgba(255, 255, 255, 0);
     border-radius: 3px;
    line-height: 15px;
}
.zhibo .zbBottom .text{
    width: 169px;
    height: 16px;
    font-size: 12px;
    padding-left: 5px;
}
.zhibo .zbBottom .qfl{
    font-size:12px ;
    position: absolute;
    right: 20px;
    top: 10px;
}
.zhibo .zbBottom .qfl:after{
    content: ">";
    color: #ccc;
    padding-left: 5px;
}
.tabList{
    width: 375px;
    height: 43px;
    background-color: #fff;
    position: fixed;
        left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    border-top: 1px solid #efefef;
    z-index: 10;
}
.tabItem{
    flex: 1;
    height: 39px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.tabItem .icon{
    width: 22px;
    height: 22px;
    background-image: url(../img/home.png);
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    
}
.tabItem .text{
    font-size: 10px;
    color: #5d656b;
    transform: scale(0.9);
}

    结果网址：https://00009ec4-000068ee-00006797.github.io/taobao/
  • 相关阅读:
    SqlServer2008 / SqlServer2012 禁用windows登录，sa忘记密码或密码过期如何登陆
    windows下批处理保留指定日期下的文件
    centos7上使用git clone出现问题
    VS2015编译Teamtalk的Windows客户端（转）
    Mac Book触摸板失灵的解决办法（触摸板按下失灵）
    系统设计原则
    命令“regsvr32 /s /n /i:user "XXXXXX"”已退出，代码为 3
    Android实现开机自动运行程序
    Java并发之CyclicBarrier、CountDownLatch、Phaser
    Java多线程之ThreadLocal
  • 原文地址：https://www.cnblogs.com/406070989senlin/p/10933240.html
Copyright © 2020-2023  润新知