淘宝移动端首页的商品列表 - 第十九期_php

Home > List of blog posts > 淘宝移动端首页的商品列表

Blogger Information

Blog 38

fans 0

comment 0

visits 18586

Special Recommendation

More>

Related recommendations

Related Tutorials

Popular Recommendations

Latest courses

The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

1402898 times of learning
Collection
PHP introductory tutorial one: Learn PHP in one week

4230468 times of learning
Collection
JAVA Beginner's Video Tutorial

2417617 times of learning
Collection

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template

淘宝移动端首页的商品列表

Blackeye

Original

394 people have browsed it

show

    <main>
        <div class="topMain">
            <div class="topMain-left">
              <div class="item1">
                <div class="title">聚划算</div>
                <div class="items" style="background-color:bisque;">
                  <a href="">
                    <span style="color: tomato;">品牌折扣</span>
                    <img src="static/images/items/item1.png" alt="">
                  </a>
                </div>
              </div>
              <div class="item2">
                <div class="title"></div>
                <div class="items" style="background-color:bisque;">
                  <a href="">
                    <span style="color: tomato;">划算好货</span>
                    <img src="static/images/items/item2.png" alt="">
                  </a>
                </div>
              </div>
              <div class="item3">
                <div class="title">淘抢购</div>
                <div class="items">
                  <a href="">
                    <span>限时半价</span>
                    <img src="static/images/items/item3.png" alt="">
                  </a>
                </div>
              </div>
              <div class="item4">
                <div class="title">天天特卖</div>
                <div class="items">
                  <a href="">
                    <span>9.9包邮</span>
                    <img src="static/images/items/item4.png" alt="">
                  </a>
                </div>
              </div>
              <div class="item5">
                <div class="title">每日好店</div>
                <div class="items">
                  <a href="">
                    <span>挖深藏的店</span>
                    <img src="static/images/items/item5.png" alt="">
                  </a>
                </div>
              </div>
              <div class="item6">
                <div class="title"><span style="color: white; background-color: orange;">精选</span></div>
                <div class="items" style="background-color: white;">
                  <a href="">
                    <span></span>
                    <img src="static/images/items/item7.jpg" alt="" style="width: 0.7rem; height: 0.75rem;">
                  </a>
                </div>
              </div>
            </div>
            <div class="topMain-right">
              <div class="item1">
                <div class="title">淘宝直播</div>
                <div class="items">
                  <a href="">
                    <span>好物传送门</span>
                    <img src="static/images/items/item1.png" alt="">
                  </a>
                </div>
              </div>
              <div class="item2">
                <div class="title"><span style="color:white; background-color: red;">LIVE&gt;</span></div>
                <div class="items" style="background-color: white;">
                  <a href="">
                    <span></span>
                    <img src="static/images/items/item9.png" alt="" style="width: 0.7rem; height: 0.75rem;">
                  </a>
                </div>
              </div>
              <div class="item3">
                <div class="title">有好货</div>
                <div class="items">
                  <a href="">
                    <span>全民口碑推荐</span>
                    <img src="static/images/items/item10.png" alt="">
                  </a>
                </div>
              </div>
              <div class="item4">
                <div class="title"><span style="color: white; background-color: darkturquoise; margin-left: -0.35rem;">品质好物</span></div>
                <div class="items" style="background-color: white;">
                  <a href="">
                    <span></span>
                    <img src="static/images/items/item11.png" alt="" style="width: 0.7rem; height: 0.75rem;">
                  </a>
                </div>
              </div>
              <div class="item5">
                <div class="title">哇哦视频</div>
                <div class="items">
                  <a href="">
                    <span>粉丝都爱看</span>
                    <img src="static/images/items/item12.png" alt="">
                  </a>
                </div>
              </div>
              <div class="item6">
                <div class="title"><span style="color: white; background-color: coral;">亲测</span></div>
                <div class="items" style="background-color: white;">
                  <a href="">
                    <span></span>
                    <img src="static/images/items/item13.webp" alt="" style="width: 0.7rem; height: 0.75rem;">
                  </a>
                </div>
              </div>
            </div>
            <div class="topMain-buttom">
              <img src="static/images/taobao/tt.png" alt="">
              <a href="">
                <span>评测</span>
                <span>实测：五款最强防霾滤芯安利给你</span>
              </a>
            </div>
        </div>
        <div class="displayMain">
            <div class="advance">
              <img src="static/images/taobao/cnxh.png" alt="">
            </div>
            <div class="displayWindow">
              <div class="item">
                <a href="">
                  <img src="static/images/items/item14.webp" alt="">
                  <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
                  <div class="priceInfo">
                    <span style="font-size: 0.11rem;">￥</span>
                    <span style="font-size: 0.14rem;">361</span>
                    <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
                  </div>
                </a>
              </div>
              <div class="item">
                <a href="">
                  <img src="static/images/items/item14.webp" alt="">
                  <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
                  <div class="priceInfo">
                    <span style="font-size: 0.11rem;">￥</span>
                    <span style="font-size: 0.14rem;">361</span>
                    <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
                  </div>
                </a>
              </div>
              <div class="item">
                <a href="">
                  <img src="static/images/items/item14.webp" alt="">
                  <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
                  <div class="priceInfo">
                    <span style="font-size: 0.11rem;">￥</span>
                    <span style="font-size: 0.14rem;">361</span>
                    <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
                  </div>
                </a>
              </div>
              <div class="item">
                <a href="">
                  <img src="static/images/items/item14.webp" alt="">
                  <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
                  <div class="priceInfo">
                    <span style="font-size: 0.11rem;">￥</span>
                    <span style="font-size: 0.14rem;">361</span>
                    <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
                  </div>
                </a>
              </div>
              <div class="item">
                <a href="">
                  <img src="static/images/items/item14.webp" alt="">
                  <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
                  <div class="priceInfo">
                    <span style="font-size: 0.11rem;">￥</span>
                    <span style="font-size: 0.14rem;">361</span>
                    <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
                  </div>
                </a>
              </div>
              <div class="item">
                <a href="">
                  <img src="static/images/items/item14.webp" alt="">
                  <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
                  <div class="priceInfo">
                    <span style="font-size: 0.11rem;">￥</span>
                    <span style="font-size: 0.14rem;">361</span>
                    <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
                  </div>
                </a>
              </div>
              <div class="item">
                <a href="">
                  <img src="static/images/items/item14.webp" alt="">
                  <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
                  <div class="priceInfo">
                    <span style="font-size: 0.11rem;">￥</span>
                    <span style="font-size: 0.14rem;">361</span>
                    <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
                  </div>
                </a>
              </div>
              <div class="item">
                <a href="">
                  <img src="static/images/items/item14.webp" alt="">
                  <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
                  <div class="priceInfo">
                    <span style="font-size: 0.11rem;">￥</span>
                    <span style="font-size: 0.14rem;">361</span>
                    <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
                  </div>
                </a>
              </div>
              <div class="item">
                <a href="">
                  <img src="static/images/items/item14.webp" alt="">
                  <div class="itemName">NANAROOM韩国进口米色雪纺纱蕾丝荷叶公主婚庆床品配蛋糕床裙</div>
                  <div class="priceInfo">
                    <span style="font-size: 0.11rem;">￥</span>
                    <span style="font-size: 0.14rem;">361</span>
                    <span style="font-size: 0.11rem; color: #999; margin-top: 0.02rem;">12人已购买</span>
                  </div>
                </a>
              </div>
            </div>
        </div>
    </main>

main{
    position: relative;
    padding: 0.1rem;
    top: 3.36rem;
}
main .topMain{
    background-color: #fff;
    height: 4.03rem;
    border-radius: 0.06rem;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: 1fr 1fr 1fr .4rem;
    gap: .1rem;
}
main .topMain-left{
    grid-area: 1 / 1 / 4 / 2;
}
main .topMain-right{
    grid-area: 1 / 2 / 4 / 3;
}
main .topMain-buttom{
    grid-area: 4 / 1 / 5 / 3;
    height: .4rem;
    font-size: 0.13rem;
    display: grid;
    grid-template-columns: .75rem 1fr;
    place-content: center;
}
main .topMain-buttom img{
    width: 100%;
    height: 100%;
}
main .topMain-buttom img{
    width: .64rem;
    height: .2rem;
    margin-left: .1rem;
}
main .topMain-buttom a{
    place-self: center start;
}
main .topMain-buttom a span:first-of-type{
    padding: 0.02rem 0.05rem;
    background-color: #feefec;
    color: #e86217;
    border-radius: .04rem;
    margin-left: 0.1rem;
}
main .topMain .topMain-left{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(3,1fr);
}
main .topMain .topMain-right{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(3,1fr);
    border-left: .01rem solid #eee;
}
main .topMain .topMain-left img,
main .topMain .topMain-right img
{
    width: 100%;
    height: 100%;
    width: .5rem;
    height: .5rem;
}
main .topMain .topMain-left div,
main .topMain .topMain-right div
{
    text-align: center;
}
main .topMain .title{
    text-align: start !important;
    height: .2rem;
    font-size: 0.15rem;
    font-weight: bold;
}
main .topMain .title>span{
    font-size: 0.1rem;
    font-weight: normal;
    padding: 0.02rem 0.03rem;
    border-radius: .03rem;
    margin-left: -0.2rem;
}
main .topMain .topMain-left .items{
    margin: .1rem;
    background-color: bisque;
    border-radius: .05rem;
}
main .topMain .topMain-left .items a span{
    font-size: 0.12rem;
    font-weight: bold;
    color: #e86217;
}
main .topMain .topMain-right .items{
    margin: .1rem;
    background-color: bisque;
    border-radius: .05rem;
}
main .topMain .topMain-right .items a span{
    font-size: 0.1rem;
    font-weight: bold;
    color: #e86217;
}
main .displayMain{
    top:7.39rem;
    width: 100vw;
}
main .displayMain .advance{
    width: 100vw;
    height: .47rem;
    display: grid;
    place-content: center;
}
main .displayMain .advance img{
    width: 1.61rem;
    height: .20rem;
}
main .displayMain .displayWindow{
    top: 7.85rem;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(2,1fr);
}
main .displayMain .displayWindow .item{
    width: 1.71rem;
    height: 2.6rem;
    border-radius: .06rem;
    background-color: white;
    margin-top: .1rem;
}
main .displayMain .displayWindow .item .itemName{
    height: .57rem;
    font-size: 0.13rem;
    color:#333;
    margin: .05rem;
    overflow: hidden;
    line-height: .185rem;
    text-overflow: ellipsis;
}
main .displayMain .displayWindow .item img{
    width: 1.71rem;
    height: 1.71rem;
    border-radius: .06rem .06rem 0 0;
}
main .displayMain .displayWindow .item .priceInfo span:nth-last-of-type(n+2){
    color: #ff5500;
    margin: .05rem;
}

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

搭建高效的开发环境、markdown语法、与常用HTML术语

2022-03-24 12:50:45

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial