片头废话：拼多多整体不难（自我觉得），感觉难的部分也就在上侧导航栏的固定以及左侧二维码的放大隐藏。
目录
效果图
代码图
html结构部分
css部分
效果图
简易拼多多网页展示
代码图
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：对于拼多多网页的简单制作
发布评论