<!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>
拼多多首页源码
最新推荐文章于 2023-08-22 11:04:32 发布