WEB前端：rem布局仿淘宝首页

最新推荐文章于 2024-07-15 16:47:34 发布

八点博客（钏）

最新推荐文章于 2024-07-15 16:47:34 发布

阅读量3.2k

点赞数 1

分类专栏：前端文章标签： web前端淘宝网 rem

本文链接：https://blog.csdn.net/sinat_37390744/article/details/73928630

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        img{
            max-width: 100%;/*img auto adjust*/
        }
        .row::after{
            content: '';
            display: block;
            clear: both;

        }
        .items{
            width: 5rem;
            float: left;
            font-size: 1rem;
            text-align: center;
            margin-top: 1rem;
        }
        .fav{
            text-align:center;
            font-size: 0.8rem;
            padding: 0.8rem;
            background: #eee;
            margin-top: 0.8rem;
        }

        nav{
            background: #fe5400 url(img/tao.png) no-repeat;
            height: 2.5rem;
            background-size: 2.5rem 2.5rem;
            padding: 0.5rem 0 0.05rem 2.5rem;
        }
        nav input{
            width: 95%;
            height: 80%;
            margin:0 auto;
            display: block;
            border-radius: 0.3rem;
            border-style: none;
            background-color: #b52600;
            color: #fff;
            text-align: center;
        }
    </style>
</head>
<body>
    <nav>
        <input type="text" placeholder="搜索您喜欢的宝贝">
    </nav>
    <div class="main">
        <div class="banner">
            <img style="width:100%;height:100%;" class="" src="img/b1.jpg">
        </div>
        <div class="row">
            <div class="items">
                <img src="img/1.png" alt="">
                <p>天猫</p>
            </div>
            <div class="items">
                <img src="img/2.png" alt="">
                <p>聚划算</p>
            </div>
            <div class="items">
                <img src="img/3.png" alt="">
                <p>天猫国际</p>
            </div>
            <div class="items">
                <img src="img/4.png" alt="">
                <p>外卖</p>
            </div>
            <div class="items">
                <img src="img/5.png" alt="">
                <p>超市</p>
            </div>
            <div class="items">
                <img src="img/6.png" alt="">
                <p>充值</p>
            </div>
            <div class="items">
                <img src="img/7.png" alt="">
                <p>飞猪</p>
            </div>
            <div class="items">
                <img src="img/8.png" alt="">
                <p>淘金币</p>
            </div>
            <div class="items">
                <img src="img/9.png" alt="">
                <p>拍卖</p>
            </div>
            <div class="items">
                <img src="img/10.png" alt="">
                <p>分类</p>
            </div>
        </div>

        <div class="row fav">
            <h3>猜你喜欢</h3>
            <h4>帮你推荐喜欢的商品</h3>
        </div>

        <div class="row list">
            <div class="goods">
                <img src="img/g1.jpg" alt="">
            </div>
        </div>




    </div>
    <footer></footer>
</body>
</html>