html：对于拼多多网页的简单制作

Astar stars

已于 2022-07-11 18:33:29 修改

阅读量4.9k

点赞数 10

分类专栏： html作品分享文章标签：大数据

于 2022-07-11 18:32:56 首次发布

本文链接：https://blog.csdn.net/astar2022/article/details/125725957

版权

html作品分享专栏收录该内容

14 篇文章

订阅专栏

片头废话：拼多多整体不难（自我觉得），感觉难的部分也就在上侧导航栏的固定以及左侧二维码的放大隐藏。

效果图

简易拼多多网页展示

代码图

html结构部分

<!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">
    <title>拼多多 新电商开创者</title>
    <link rel="stylesheet" href="./清除默认格式/reset.css">
    <link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/QRcode.css">
</head>

<body>
    <div class="all">
        <!-- 固定导航 -->
        <div class="header-top-wrap">
            <div class="header-top">
                <div class="header-top-left">
                    <a href=""><img src="./图片/pdd_logo_v2.png" alt=""></a>
                </div>
                <ul class="header-top-right">
                    <li class="li-first"><a href=""><span>首页</span></a></li>
                    <li><a href=""><span>商家入驻</span></a></li>
                    <li><a href=""><span>热点资讯</span></a></li>
                    <li><a href=""><span>社会招聘</span></a></li>
                    <li><a href=""><span>校园招聘</span></a></li>
                    <li><a href=""><span>招采平台</span></a></li>
                    <li><a href=""><span>帮助中心</span></a></li>
                    <li><a href=""><span>举报平台</span></a></li>
                    <li><a href=""><span>分享赚钱</span></a></li>
                    <li class="li-last"><a href=""><span>查快递</span></a></li>
                </ul>
            </div>
        </div>
        <header>
            <div class="header-bottom">
                <a href=""><img src="./图片/img.1.jpg" alt=""></a>
            </div>
        </header>
        <main>
            <div class="main-top">
                <div class="title-wrap">
                    <div class="title">精彩活动</div>
                    <a class="more" href="">更多<i class="fa fa-angle-right" aria-hidden="true"></i></a>
                </div>
                <div class="content">
                    <a class="img-wrap" href=""><img src="./图片/img2.jpg" alt=""></a>
                    <ul>
                        <li><a class="img-wrap i1" href=""><img src="./图片/sale_v2.jpg" alt=""></a></li>
                        <li><a class="img-wrap i1" href=""><img src="./图片/supermarket_v2.jpg" alt=""></a></li>
                        <li><a class="img-wrap" href=""><img src="./图片/download.jpg" alt=""></a></li>
                    </ul>
                </div>
            </div>
            <div class="main-bottom">
                <div class="title-wrap">
                    <div class="title">精选专题</div>
                    <a class="more" href="">更多<i class="fa fa-angle-right" aria-hidden="true"></i></a>
                </div>
                <div class="content-wrap">
                    <div class="content">
                        <a href="">
                            <div class="bigimg-wrap">
                                <img src="./图片/girlclothes.jpg" alt="" width="556px">
                            </div>
                            <ul class="threeimg">
                                <li><img src="./图片/girl1.jpeg" alt="" width="125px">
                                    <div class="characters">
                                        拉夏贝尔夏季薄款冰丝速干裤女休闲跑步裤高腰宽松显瘦束
                                    </div>
                                    <div class="piece">
                                        ￥<span>47.3</span><del>￥109</del>
                                    </div>
                                </li>
                                <li><img src="./图片/girl2.jpeg" alt="" width="125px">
                                    <div class="characters">
                                        拉夏贝尔夏季薄款冰丝速干裤女休闲跑步裤高腰宽松显瘦束
                                    </div>
                                    <div class="piece">
                                        ￥<span>47.3</span><del>￥109</del>
                                    </div>
                                </li>
                                <li><img src="./图片/girl3.jpeg" alt="" width="125px">
                                    <div class="characters">
                                        拉夏贝尔夏季薄款冰丝速干裤女休闲跑步裤高腰宽松显瘦束
                                    </div>
                                    <div class="piece">
                                        ￥<span>47.3</span><del>￥109</del>
                                    </div>
                                </li>
                            </ul>
                        </a>
                    </div>
                    <div class="content-right">
                        <a href="">
                            <div class="bigimg-wrap">
                                <img src="./图片/boyshirt.jpg" alt="" width="556px">
                            </div>
                            <ul class="threeimg">
                                <li><img src="./图片/boy1.jpeg" alt="" width="125px">
                                    <div class="characters">
                                        拉夏贝尔夏季薄款冰丝速干裤女休闲跑步裤高腰宽松显瘦束
                                    </div>
                                    <div class="piece">
                                        ￥<span>47.3</span><del>￥109</del>
                                    </div>
                                </li>
                                <li><img src="./图片/boy2.jpeg" alt="" width="125px">
                                    <div class="characters">
                                        拉夏贝尔夏季薄款冰丝速干裤女休闲跑步裤高腰宽松显瘦束
                                    </div>
                                    <div class="piece">
                                        ￥<span>47.3</span><del>￥109</del>
                                    </div>
                                </li>
                                <li><img src="./图片/boy3.jpeg" alt="" width="125px">
                                    <div class="characters">
                                        拉夏贝尔夏季薄款冰丝速干裤女休闲跑步裤高腰宽松显瘦束
                                    </div>
                                    <div class="piece">
                                        ￥<span>47.3</span><del>￥109</del>
                                    </div>
                                </li>
                            </ul>
                        </a>
                    </div>
                </div>
            </div>
        </main>
        <div class="QRcode">
                <div class="content">
                    <img src="./图片/e48dac21-db3b-4801-b047-6f14d0805614.png.slim.png" alt="" width="112px">
                    <div class="characters">
                        微信扫码下载app专享优惠
                    </div>
                </div>
        </div>
    </div>

</body>

</html>

css部分

header{
    width: 100%;
}
.header-top-wrap{
    width: 100%;
    height: 109px;
    background-color: white;
    border-bottom: 5px solid red;
    position: sticky;
    top: 0;
    z-index: 999;
}
.header-top{
    width: 1200px;
    height: 109px;
    /* background-color: aqua; */
    margin: 0 auto;
    position: relative;
    /* float: left; */
}
/* 左侧logo设置 */
.header-top-left{
    height: 64px;
}
.header-top-left img{
    height: 63px;
    margin: 23px 0;
    float: left;
}
/* 右侧导航栏设置 */
.header-top-right{
    position: absolute;
    top: 50%;
    left: 220px;
    height: 20px;
    line-height: 20px;
    margin-top: -15px;
}
.header-top-right>li,p{
    float: left;
    /* background-color: brown;  */
}
.header-top-right>li{
    font-size: 18px;
    border-right: 1px solid #6c6c6c;
}

.header-top-right>.li-last{
    border-right:none ;
}

.header-top-right>.li-first>a{
    color: red;
}

.header-top-right>li>a>span{
    margin:0  15px;
    display: inline-block;
}
/* 头部下方图片插入 */
.header-bottom img{
    
    display: block;
    width: 100%;
    height: 100%;
}
.header-bottom{
    margin: 0 auto;
}

main{
    background-color: rgb(250, 250, 250);
    /* background-color: red; */
    width: 100%;
}
.main-top{
    width: 1200px;

    margin: 0 auto;
    /* overflow: hidden; */
}
/* top title-group */

main .title-wrap{
    margin-top:77px;
    margin-bottom: 45px;
    /* background-color: aqua; */
    padding-bottom: 17px;
    overflow: hidden;
    border-bottom: 1px solid #c1c1c1;

}
main .title{
    font-size: 20px;
    float: left;
}
main .more{
    font-size: 18px;
    float: right;
    margin-right: 5px;
}
main .more i{
    margin-left: 5px;
}
/* content */
.main-top{
    overflow: hidden;
}
.main-top .img-wrap{
    padding: 14px;
    float: left;
    background-color: white;
    margin-bottom: 17px;
}
.main-top .i1{
    margin-right: 18.5px;
}
/* 鼠标移入图片变淡 */
.main-top a:hover{
    opacity: 0.7;
}
/*bottom title-group */
.main-bottom{
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}

.main-bottom .title-wrap{
    margin-top:55px;
}
/* 服装专区 */
.main-bottom .content{
    width: 556px;
    padding: 10px;
    margin-right: 45px;
    margin-bottom: 30px;
    background-color: white;
    overflow: hidden;
    float: left;
}

.main-bottom  .threeimg li{
    margin: 0 12px;
    width: 160px;
    float: left;
}
.main-bottom  .threeimg img{
    margin: 7px auto;
    display: block;
}
.main-bottom  .threeimg .characters{
    font-size: 12px;
}
.main-bottom  .threeimg .piece{
    font-size: 12px;
    text-align: center;
    color: black;
}
.main-bottom  .threeimg .piece span{
    font-size: 16px;
}
.main-bottom  .threeimg .piece del{
    color: #CBCBCB;
}
/* content-right */

.main-bottom .content-right{
    width: 556px;
    padding: 10px;
    background-color: white;
    overflow: hidden;
    float: left;
}
.main-bottom .content:hover,.main-bottom .content-right:hover{
    opacity: 0.7;
}

.QRcode{
    width: 162px;
    overflow: hidden;
    background-color: white;
    position: fixed;
    bottom: 150px;
    left: min((((100% - 1200px) / 2) - 162px), 0px);
}
.QRcode .content{
    padding: 20px 15px 8px 15px;
    margin: 8px;
    border: 2px solid pink;
}

.QRcode .content .characters{
    text-align: center;
}
.QRcode {
    left: min((((100% - 1200px) / 2) - 162px), 0px);
  }
.QRcode:hover{
    left: 0;
}

总体来说还是不难的，重要的是在于对于框架结构的搭建，我由于一开始的顶部导航栏搭建错误，将导航栏与图片放在同一个盒子里，导致使用固定定位失败。希望大家在写这个网页制作之前也能清晰的搭建自己的结构。

本期内容，到此就结束了，下期了我会再次更新关于css+html面试题方面的内容。