HTML+CSS简单实现拼多多部分网页

最新推荐文章于 2022-08-20 16:15:30 发布

该编程了

最新推荐文章于 2022-08-20 16:15:30 发布

阅读量2.1k

点赞数 6

文章标签：前端 html5

本文链接：https://blog.csdn.net/weixin_54138158/article/details/123719935

版权

太菜了，写了一下午。

<!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="icon" type="image/x-icon" href="images/标题图片.ico">
    <link rel="stylesheet" href="./css/style1.css">
</head>
<body>
    <div class="left">
        <div class="img">
        <img src="./images/二维码.png" alt="">
        <span>微信扫码下载</span>
        <span>App专享优惠</span>
        </div>
    </div>

    <nav class="head">
        <div class="head">
        <a href="javascript:;"><img src="./images/nav.png" alt=""></a>
        
        <ul class="menu">
            <li class="first"><a href="javascript:;"><span class="first">首页</span></a></li>
            <li><a href="javascript:;"><span class="inner">商家入驻</span></a></li>
            <li><a href="javascript:;"><span class="inner">热点资讯</span></a></li>
            <li><a href="javascript:;"><span class="inner">社会招聘</span></a></li>
            <li><a href="javascript:;"><span class="inner">校园招聘</span></a></li>
            <li><a href="javascript:;"><span class="inner">招采平台</span></a></li>
            <li><a href="javascript:;"><span class="inner">帮助中心</span></a></li>
            <li><a href="javascript:;"><span class="inner">举报平台</span></a></li>
            <li><a href="javascript:;"><span class="inner">分享赚钱</span></a></li>
            <li class="last"><a href="javascript:;"><span class="last">查快递</span></a></li>
        </ul>
        </div>
    </nav>

    <header>
        <a href="javascript:;"><img src="./images/header.jpg" alt=""></a>
    </header>

    <div class="title">
        <a href="javascript:;"><span class="left">精彩活动</span></a>
        <a href="javascript:;"><span class="right">更多 ></span></a>
    </div>

    <main>
        <a href="javascript:;"><img src="./images/main.jpg" alt=""></a>
    </main>

    <footer>
        <nav>
        <a href="javascript:;"><img src="./images/nav.jpg" alt=""></a>
        </nav>

        <article>
        <a href="javascript:;"><img src="./images/acticle.jpg" alt=""></a>
        </article>

        <aside>
        <a href="javascript:;"><img src="./images/aside.jpg" alt=""></a>
        </aside>

    </footer>

    <div class="title1">
        <a href="javascript:;"><span class="left">精选专题</span></a>
        <a href="javascript:;"><span class="right">更多 ></span></a>
    </div>
</body>
</html>

/* 清除样式 */
*{
    margin: 0px;
    padding: 0px;
}
a{
    text-decoration: none;

}
/* .clearfix::before{
    content: '';
    display: block;
    clear: both;
} */
body{
    background-color: rgb(250, 250, 250);
}
.clearfix::before{
    content: '';
    display: block;
    clear: both;
}

body div.left{
    width: 149px;
    height: 199px;
    padding: 4px;
    background-color: white;
    position: fixed;
    left: 0px;
    top: 350px;
}
body div div.img{
    border: 2px solid #ffedf1;
    width: 146px;
    height: 194px;
}
body div.left img{
    width: 112px;
    height: 112px;
    margin-left: 15px;
    margin-top: 20px;
    margin-bottom: 8px;
}
body div.left span{
    display: block;
    margin-left: 30px;
    color: #666;
    font-size: 14px;
}

/* 设置导航的外面盒子 */
body nav.head{
    width: 100%;
    height: 107px;
    background-color:#ffffff;
    border-bottom: solid 4px rgb(237, 67, 91);
    position: sticky;
    top: 0px;
    left: 0px;

}
/* 装图片和无序列表的盒子 */
body nav div{
    width: 1230px;
    height: 107px;
    background-color: ;
    margin: 0px auto;
}
body nav div  a{
    margin: 21px auto;
    float: left;
}
body nav div img{
    width: 180px;
    height: 63px;
}
body nav ul {
    list-style: none;
    padding-top: 20px;
}
body nav ul span.first{
    width: 21px;
    height: 20px;
    margin: 54px 15px 0px 57px;
    font-size: 18px;
    font-family: '微软雅黑';
    color: #fc475d;
    padding-right: 16px;
    border-right: #6c6c6c 1px solid;
}
body nav ul span.inner{
    height: 20px;
    margin: 54px 10px 0px 4px;
    font-size: 18px;
    font-family: '微软雅黑';
    color: #6c6c6c;
    padding-right: 14px;
    border-right: #6c6c6c 1px solid;
}
body nav ul span.last{
    width: 39px;
    height: 20px;
    margin: 54px 0px 0px 4px;
    font-size: 18px;
    font-family: '微软雅黑';
    color: #6c6c6c;
}
/* 导航结束 */

/* 头部图片开始 */

header a img{
    display: block;
    width: 1519px;
    height: 350px;
}

/* title部分开始 */
body div.title{
    width: 1200px;
    height: 44.4px;
    margin: 69px auto 41px;
    padding: 0px 0px 17px;
    background-color: 250,250,250;
    border-bottom: 1px rgb(193,193,193) solid;
}
body div.title .left{
    margin-top: 16px;
    float: left;
    width: 80px;
    height: 26.4px;
    font-size: 20px;
    color: #363636;
    font-family: '微软雅黑';

}
body div.title .right{
    float: right;
    width: 54.69px;
    height: 22px;
    margin: 16px 5px 0px 0px;
    font-size: 18px;
    color: #868686;
    font-family: '微软雅黑';
}

/* main开始 */
body main{
    width: 1170px;
    height: 250px;
    background-color: rgb(253,253,253);
    padding: 14px;
    margin: 0px auto 18px;
}
body footer nav{
    width: 310px;
    height: 210px;
    background-color: rgb(253,253,253);
    padding: 14px;
    margin: 0px 18px 17px 160px;
    float: left;
}
body footer article{
    width: 457px;
    height: 210px;
    background-color: rgb(253,253,253);
    padding: 14px;
    float: left;
    margin: 0px 19px 17px 0px;
}
body footer aside{
    width: 310px;
    height: 210px;
    background-color: rgb(253,253,253);
    padding: 14px;
    float: left;
    margin: 0px 18px 0px 0px;
}

body div.title1{
    width: 1200px;
    height: 44.4px;
    margin: 335px auto 41px;
    padding: 0px 0px 17px;
    background-color:rgb(250,250,250);
    border-bottom: 1px rgb(193,193,193) solid;
}
body div.title1 .left{
    margin-top: 16px;
    float: left;
    width: 80px;
    height: 26.4px;
    font-size: 20px;
    color: #363636;
    font-family: '微软雅黑';

}
body div.title1 .right{
    float: right;
    width: 54.69px;
    height: 22px;
    margin: 16px 5px 0px 0px;
    font-size: 18px;
    color: #868686;
    font-family: '微软雅黑';
}

该编程了

关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
9
评论
HTML+CSS简单实现拼多多部分网页

太菜了，写了一下午。<!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"&...
复制链接

扫一扫