效果图

简易拼多多网页展示

代码图

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面试题方面的内容。

html：对于拼多多网页的简单制作相关推荐

拼多多首页html制作,拼多多商家视频怎么制作？有什么要求？
前不久拼多多推出了直播功能,从此也逐渐向内容营销靠近了.现在拼多多又推出了[商家视频]功能,是可以帮助商家增强消费者信任感.提升商品转化率及增强粉丝粘性的.拼多多商家视频是什么?怎么发布?下面给大家讲 ...
一度智信 | 教你拼多多主图的制作
最近有小伙伴问小编,拼多多的主图只能用白底的图片吗?对的,拼多多主图是有要求要用白底的.对于主图的问题,今天小编就给大家分享一下关于主图的问题.要知道主图做好了对店铺的出单也是很有帮助的. 一.制图要 ...
拼多多店铺的标题制作事项
如果商家选择在拼多多开店,商家需要优化标题,帮助店铺更好的引流,提高店铺的曝光度.标题组合需要商家如何操作?标题制作过程中需要注意哪些词语? 品多多标题需要注意哪些相关事项? 一.标题组合原则. 首尾 ...
html+css静态页面还原拼多多网页
html+css静态页面还原代码 <!DOCTYPE html> <html lang="zh"> <head> &l ...
网页前端简单制作（超级课程表）
*{ margin: 0; padding: 0; } .w{ width: 1200px; margin: auto; } body{ background-color: #f3f5f7; } li ...
怎么制作拼多多主图？如何制作爆款主图？
主图是就是我们的门面,是顾客看到我们商品的第一印象.拼多多的主图好不好,直接影响你商品的点击率同时主图间接影响着商品的销量.所以怎么怎么制作拼多多主图?如何制作爆款主图?就非常重要了,下面一起来了解一 ...
网站流量变现 , 淘宝/京东/拼多多精准商品推广赚钱....
2019年响应式商品单页,淘宝/京东/拼多多/网页流量推广单页网站流量变现 , 淘宝/京东/拼多多精准商品推广赚钱- 精彩教程,流量王"零投资网赚" 网站\公众号\自媒体有粉丝. ...
拓嘉辰丰：拼多多详情图制作方法
在网上购物就不能看到实物,往往就是根据商家上传的图片来判断,商品的图片可以很直观的把产品的特性外观展示在我们的面前.不管是点击还是转化都跟图片脱离不了关系,下面小编将会给大家讲讲拼多多详情图的制作方法 ...
拓嘉辰丰：拼多多制作主图怎么弄
拼多多主图是给消费者留下的第一印象,所以想要吸引更多的顾客就需要优质的主图,那么拼多多主图制作从哪几方面思考? 拼多多主图制作从哪几方面思考? 1.确定主图对象: 在进行主图设计的时候,可以参考热门产 ...

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

效果图

代码图

html结构部分

css部分

html：对于拼多多网页的简单制作相关推荐

最新文章

热门文章