拼多多首页源码

最新推荐文章于 2023-05-30 12:25:54 发布

原创最新推荐文章于 2023-05-30 12:25:54 发布

· 3k 阅读

13 ·

版权

文章标签：

#html5

CSS 专栏收录该内容

2 篇文章

订阅专栏

这是一个关于拼多多网页的HTML代码示例，展示了包含头部导航、页面主体和底部元素的完整布局。头部包括了拼多多的Logo、菜单栏以及分享二维码；页面主体包含了一个下载Banner和商品分类内容。整体设计使用了CSS进行样式控制，实现了响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小钟的拼夕夕</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            top: 0px;
            height: 103px;
            /*border: 4px solid red;*/
            border-bottom: 4px solid red;
            position: fixed;
            background: white;
        }
        .div1{
            height:150px ;
            background: hotpink;
            margin-top: 107px;
        }
        .div2{
            height:150px ;
            background: bisque;
        }
        .div3{
            height:150px ;
            background: #69b9ff;
        }
        .box .head{
            width: 1200px;
            height: 105px;
            /*background: rgba(0, 0, 0, 0.29);*/
            margin: 0 auto;
            position: relative;
        }
        .box .head img{
            width: 180px;
            margin: 21px 0;
        }
        .box .head .menu{
            color: #6c6c6c;
            /*text-align: center;*/
            /*left: 220px;*/
            right: 20px;
            height: 20px;
            font-size: 18px;
            /*居中显示*/
            line-height: 20px;
            top: 50%;
            margin-top: -10px;
            position: absolute;
            list-style: none;

        }

        .box .head .menu li{
            float: left;
            /*cursor: pointer;*/
            /*display: inline-block;*/
            /*height: 20px;*/
            /*line-height: 20px;*/
            border-right: 1px solid #6c6c6c
        }
        .box .head .menu li:last-child{
            float: left;
            border:none;
        }
        .box .head .menu li span{
            color: #6c6c6c;
            /*加左右边距*/
            margin: 0 15px;
        }
        .box .head .menu li:last-child span{
            margin-right: 0;

        }
        .box .head .menu li:first-child span{
            margin-left: 0;
            color: #FC475D;
            font-weight: 600;

        }
        .box .head .menu li a{
            text-decoration: none;
        }

        body {
            font-size: 16px;
        }
        html {
            font-size: 170.66667px;
        }
        html, body {
            margin: 0;
            padding: 0;
            background-color: #fafafa;
            font: initial;
        }
        .code{
            width: 162px;
            height: 210px;
            background-color: white;
            position: fixed;
            bottom: 150px;
            left: -81px;
        }
        .code:hover{
            left: 0;
        }
        .code .box1{
            margin: 8px;
            border: 2px solid #FFEDF1;
            padding:20px 15px 8px ;
        }
        .code .box1 img{
            width: 100%;
            height: 100%;
            /*当图片和文字同时布局的时候需要注意 他会图片和文字自动多一个间距*/
            display: block;
        }
        .code .box1 .box2{
            color: #666666;
            margin-top: 10px;
            font-size: 14px;
            text-align: center;
        }
        .index{
            margin-top: 107px;
            text-align: center;
        }
        .index img{
            display: block;
            border: none;
            height: 100%;
            width: 100%;
        }
        .index .banner {
            margin: 107px auto 0 auto;
        }
        .index .body{
            width: 1200px;
            margin: 77px auto 30px auto;
        }
        .index .body .title-group{
            overflow: hidden;
            border-bottom: 1px solid #c1c1c1;
            padding-bottom: 17px;
            margin-top: 55px;
            margin-bottom: 45px;
        }
        .index .body .title-group .more{
            float: right;
            color: #868686;
            font-size: 18px;
            line-height: 22px;
            margin-right: 5px;
            cursor: pointer;
            text-decoration: none;
        }
        .index .body .title-group .title {
            float: left;
            color: #363636;
            font-size: 20px;
        }
        .index .body .content-group {
            overflow: hidden;
        }
        .index .body .content-group .cat-wrap  {
            float: left;
            background-color: #fff;
            padding: 14px;
            margin-right: 17px;
            margin-bottom: 17px;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="head">
        <a href="#" class="logo">
         <img src="imgs/pdd_logo_v2.png">
        </a>
        <ul class="menu">
            <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>
                <a href="#">
                    <span>分享赚钱</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span>查快递</span>
                </a>
            </li>
        </ul>
    </div>
</div>
<div class="index">
<a href="#" >
    <img class="banner" src="imgs/pdd_download.jpg" alt="banner">
<!--    <img class="pdd-download-qrcode" src="imgs/pdd_code.png" alt="code">-->
</a>
    <div class="body">
        <div class="title-group">
            <div class="title">精彩活动</div>
            <a class="more" href="#">更多 ></a>
        </div>
        <div class="content-group">
            <a class="cat-wrap" href="#">
                <img src="imgs/衣服.jpg" alt="衣服">
            </a>
        </div>
    </div>

</div>
<div class="code">
<div class="box1">
    <img src="imgs/pdd_code.png">
    <div class="box2">
        <div>微信扫码下载</div>
        <div>APP专项优惠</div>
    </div>
</div>
</div>
<div class="div2"></div>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>