仿京东商城首页 - html标签，列表，表格

首页 > 博客列表 > 仿京东商城首页

博主信息

博文 19

粉丝 0

访问量 14812

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

仿京东商城首页

搬砖来学php

原创

562人浏览过

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="icon/iconfont.css" />
    <link rel="stylesheet" href="css/headerfooter.css" />
    <!-- <link rel="stylesheet" href="css/miaosha.css"> -->
    <title>Document</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }
    main div.box {
        background-color: #c82519;
        border: 1px solid #c82519;
        /* position: relative; */
        /* top: 0.001rem;
        left: 0.01px; */
        /* width: 400px; */
        height: 150px;
        display: flex;
        /* 设置弧形 */
        border-bottom-left-radius: 80px;
        border-bottom-right-radius: 80px;
    }
    main div.box {
        /*父级定位*/
        position: static;
        position: relative;
        /* width: 350px;
       left: 0; */
    }
    main div.tupian>img {
        width: calc(100vw / 3.75) border-radius: 0.1rem;
        margin-left: 1rem;
        margin-right: 1rem;
    }
    /* 轮播图 */
    main div.tupian>img {
        /*绝对定位*/
        position: absolute;
        height: 150px;
        top: 10px;
        margin-left: 0.1rem;
        margin-right: 0.1rem;
        padding-right: 0.2rem;
        /* right: 1px;
      left: 13px; */
    }
    /* 导航 */
    main ul.navs li.item a {
        /* margin-top: 0.08rem; */
        display: grid;
        color: #666;
        font-size: 0.07rem;
        place-items: center;
        ;
    }
    body main ul.navs {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 0 0.1rem;
        /* gap: 1vw; */
        place-items: center;
        padding: 0.11rem;
        border: 5px;
    }
    main ul.navs li.item>a img {
        width: 50px;
    }
    /* 3. 商品列表 */
    main .list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 0.1rem;
        place-items: center;
        margin-right: 0.1rem;
        border-left: 9rem;
        padding-left: 0.13rem;
        font-size: 0.11rem;
    }
    main .list .item img {
        /* border-radius: 上 右 下 左; 顺时针 */
        border-radius: 0.1rem 0.1rem 0 0;
    }
    /* 商品描述 */
    main .list .item .desc {
        padding: 0.1rem;
        font-size: smaller;
    }
    main .list .item .desc>a{
        color: black;
    }
    /* 价格 */
    main .list .item .price .iconfont {
        color: #f50;
        font-size: smaller;
    }
    main .list .item .price span:last-of-type {
        color: #bbb;
        font-size: smaller;
    }
</style>
<body>
    <header>
        <a href="" class="logo"> <img src="images/toubu.png" alt="" /></a>
        <a href="" class="sousuo">
            <span>京东物流一日达</span>
            <!-- <span>搜索</span> -->
        </a>
        <div class="login">
            <a href="">登录</a>
        </div>
    </header>
    <main>
        <div class="box"></div>
        <div class="tupian">
            <img src="images/ad-003.png" alt="这是图片" />
        </div>
        <ul class="navs">
            <li class="item">
                <a href=""> <img src="images/chaoshi.png" alt="" /></a>
                <a href="">京东超市</a>
            </li>
            <li class="item">
                <a href=""> <img src="images/shuma.png" alt="" /></a>
                <a href="">数码电器</a>
            </li>
            <li class="item">
                <a href=""> <img src="images/baihuo.png" alt="" /></a>
                <a href="">京东百货</a>
            </li>
            <li class="item">
                <a href=""> <img src="images/shengxian.png" alt="" /></a>
                <a href="">京东生鲜</a>
            </li>
            <li class="item">
                <a href=""> <img src="images/daojia.png" alt="" /></a>
                <a href="">京东到家</a>
            </li>
            <li class="item">
                <a href=""> <img src="images/jiaofei.png" alt="" /></a>
                <a href="">充值缴费</a>
            </li>
            <li class="item">
                <a href=""> <img src="images/haodian.png" alt="" /></a>
                <a href="">附近好店</a>
            </li>
            <li class="item">
                <a href=""> <img src="images/lingjuan.png" alt="" /></a>
                <a href="">领卷</a>
            </li>
            <li class="item">
                <a href=""> <img src="images/jintie.png" alt="" /></a>
                <a href="">领金贴</a>
            </li>
            <li class="item">
                <a href=""> <img src="images/huiyuan.png" alt="" /></a>
                <a href="">plus会员</a>
            </li>
        </ul>
        <ul class="list">
            <li class="item">
                <a href=""><img src="images/meinv.png" alt="" /></a>
                <div class="desc">
                    <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
                    <div class="price">
                        <span class="iconfont icon-renminbi_o">$169</span>
                        <span>123人已购买</span>
                    </div>
                </div>
            </li>
            <li class="item">
                <a href=""><img src="images/meinv.png" alt="" /></a>
                <div class="desc">
                    <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
                    <div class="price">
                        <span class="iconfont icon-renminbi_o">$169</span>
                        <span>123人已购买</span>
                    </div>
                </div>
            </li>
            <li class="item">
                <a href=""><img src="images/meinv.png" alt="" /></a>
                <div class="desc">
                    <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
                    <div class="price">
                        <span class="iconfont icon-renminbi_o">$169</span>
                        <span>123人已购买</span>
                    </div>
                </div>
            </li>
            <li class="item">
                <a href=""><img src="images/meinv1.png" alt="" /></a>
                <div class="desc">
                    <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
                    <div class="price">
                        <span class="iconfont icon-renminbi_o">$169</span>
                        <span>123人已购买</span>
                    </div>
                </div>
            </li>
            <li class="item">
                <a href=""><img src="images/meinv1.png" alt="" /></a>
                <div class="desc">
                    <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
                    <div class="price">
                        <span class="iconfont icon-renminbi_o">$169</span>
                        <span>123人已购买</span>
                    </div>
                </div>
            </li>
            <li class="item">
                <a href=""><img src="images/meinv1.png" alt="" /></a>
                <div class="desc">
                    <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
                    <div class="price">
                        <span class="iconfont icon-renminbi_o">$169</span>
                        <span>123人已购买</span>
                    </div>
                </div>
            </li>
            <li class="item">
                <a href=""><img src="images/meinv1.png" alt="" /></a>
                <div class="desc">
                    <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
                    <div class="price">
                        <span class="iconfont icon-renminbi_o">$169</span>
                        <span>123人已购买</span>
                    </div>
                </div>
            </li>
            <li class="item">
                <a href=""><img src="images/meinv1.png" alt="" /></a>
                <div class="desc">
                    <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
                    <div class="price">
                        <span class="iconfont icon-renminbi_o">$169</span>
                        <span>123人已购买</span>
                    </div>
                </div>
            </li>
            <li class="item">
                <a href=""><img src="images/meinv1.png" alt="" /></a>
                <div class="desc">
                    <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
                    <div class="price">
                        <span class="iconfont icon-renminbi_o">$169</span>
                        <span>123人已购买</span>
                    </div>
                </div>
            </li>
            <li class="item">
                <a href=""><img src="images/meinv1.png" alt="" /></a>
                <div class="desc">
                    <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
                    <div class="price">
                        <span class="iconfont icon-renminbi_o">$169</span>
                        <span>123人已购买</span>
                    </div>
                </div>
            </li>
            <li class="item">
                <a href=""><img src="images/meinv1.png" alt="" /></a>
                <div class="desc">
                    <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
                    <div class="price">
                        <span class="iconfont icon-renminbi_o">$169</span>
                        <span>123人已购买</span>
                    </div>
                </div>
            </li>
            <li class="item">
                <a href=""><img src="images/meinv1.png" alt="" /></a>
                <div class="desc">
                    <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
                    <div class="price">
                        <span class="iconfont icon-renminbi_o">$169</span>
                        <span>123人已购买</span>
                    </div>
                </div>
            </li>
            <li class="item">
                <a href=""><img src="images/meinv1.png" alt="" /></a>
                <div class="desc">
                    <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
                    <div class="price">
                        <span class="iconfont icon-renminbi_o">$169</span>
                        <span>123人已购买</span>
                    </div>
                </div>
            </li>
            <li class="item">
                <a href=""><img src="images/meinv1.png" alt="" /></a>
                <div class="desc">
                    <a href="">夏款薄款人造棉绸睡衣女款绵绸短袖短裤套装家居服</a>
                    <div class="price">
                        <span class="iconfont icon-renminbi_o">$169</span>
                        <span>123人已购买</span>
                    </div>
                </div>
            </li>
        </ul>
    </main>
    <footer>
        <a href="">
            <span class="iconfont icon-jingdong"></span>
            <span>首页</span>
        </a>
        <a href="">
            <span class="iconfont icon-fenlei"></span>
            <span>分类</span>
        </a>
        <a href="">
            <span class="iconfont icon-xiajiang"></span>
            <span>惊喜</span>
        </a>
        <a href="">
            <span class="iconfont icon-gouwucheman"></span>
            <span>购物车</span>
        </a>
        <a href="">
            <span class="iconfont icon-wode-wode"></span>
            <span>未登录</span>
        </a>
    </footer>
</body>
</html>

页眉和页脚部分css代码


*{
    margin: 0;
    padding: ;
    box-sizing: border-box;
}
header,footer{
    height: 50px;
    background-color: #c82519;
    position: fixed;
    z-index: 100;
}
header{
    top: 0;
    left: 0;
    right: 0;
}
footer{
    bottom: 0;
    left: 0;
    right: 0;
}
main{
    background-color: ;
    min-height: 2000px;
    overflow: hidden;
    position: relative;
    top: 50px;
}
header{
    display: grid;
    grid-template-columns: 0.28rem 1fr 0.38rem;
    grid-auto-rows: 0.3rem;
    place-items: center;
    gap: 0.1rem;
}
header a.logo{
    display: flex;
    padding-left: 0.1rem;
}
header a.sousuo{
    width: 100%;
    height: 30px;
    overflow: hidden;
    background-color: #fff;
    color: #f7f7f7;
    border-radius: 0.15rem;
    /* font-size: 12px; */
    display: flex;
    place-content: space-between;
    place-items: center;
    -webkit-box-align: center;
    line-height: 30px
    position: absolute;
    padding-right: 10px;
    box-sizing: border-box;
}
header a.sousuo span{
    color: lightslategray;
    display: flex;
    margin: 50px;
    font-size: 0.1rem;
}
footer{
    background-color: #fff;
    color: #8b8b8b;
    display: flex;
    flex-wrap: nowrap;
    place-content: center;
    place-content: space-between;
    place-content: space-evenly;
}
footer >a {
    color: #8b8b8b;
    display: grid;
    place-items: center;
} 
footer >a >span{
    font-size:0.08rem;
}
footer >a >span.iconfont{
    color:#8b8b8b;
    font-size: large;
}

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

0701markdown常用语法的使用和演示

2022-07-04 15:12:33