复制淘宝手机端页面案例

其他 2019-05-27 21:21:27 阅读次数: 0 
<!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/

猜你喜欢

转载自www.cnblogs.com/406070989senlin/p/10933240.html
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022