html+css静态页面还原 拼多多网页
html+css静态页面还原
代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="2.css" />
<title>拼多多</title>
</head>
<body>
<header>
<div class="toping"></div>
<div class="navbr">
<div class="log">
<img src="https://cdn.pinduoduo.com/upload/home/img/common/pdd_logo_v2.png">
</div>
<div class="headnav">
<ul>
<li><a href="#">首页</a><span>|</span></li>
<li><a href="#">商家入驻</a><span>|</span></li>
<li><a href="#">热点资讯</a><span>|</span></li>
<li><a href="#">社会招聘</a><span>|</span></li>
<li><a href="#">校园招聘</a><span>|</span></li>
<li><a href="#">招采平台</a><span>|</span></li>
<li><a href="#">帮助中心</a><span>|</span></li>
<li><a href="#">举报平台</a><span>|</span></li>
<li><a href="#">分享赚钱</a><span>|</span></li>
<li><a href="#">查快递</a><span>|</span></li>
</ul>
</div>
</div>
</header>
<div class="banner">
<div class="banner-top">
<img src="https://cdn.pinduoduo.com/upload/2020-12-14/7531b9a5-e242-4124-89df-254df0862ab5.jpg">
</div>
<div class="body">
<div class="title-top-1">
<div class="title">精彩活动</div>
<a href="#">更多</a>
</div>
<div class="list">
<div class="list-top">
<a href=""><img src="https://cdn.pinduoduo.com/upload/home/img/index/seckill_v2.jpg"></a>
</div>
<div class="list-mine">
<a href=""> <img src="https://cdn.pinduoduo.com/upload/home/img/index/sale_v2.jpg"></a>
</div>
<div class="list-mine">
<a href=""> <img src="https://cdn.pinduoduo.com/upload/home/img/index/supermarket_v2.jpg"></a>
</div>
<div class="list-mine">
<a href=""> <img src="https://cdn.pinduoduo.com/upload/home/img/index/download.jpg"></a>
</div>
</div>
<div class="title-top-1">
<div class="title">精选专题</div>
<a href="#">更多</a>
</div>
<div class="canner-grow">
<div class="canner-grow-left">
<img src="https://cdn.pinduoduo.com/upload/home/img/subject/girlclothes.jpg">
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2022-02-21/5c2a4fd0741206a86e506a9c2dace685.jpeg">
<div class="title-top">HELLO KOMA纯棉短袖T恤女学生韩版宽松夏季新款卡通印花上衣服潮
<p>￥18.9</p>
</div>
</div>
<div class="canner-grow-bottow">
<img
src="https://t00img-c.yangkeduo.com/goods/images/2021-03-02/5ed30af3a39847620c10234e2f80eca7.jpeg">
<div class="title-top">美特斯邦威高腰牛仔裤女宽松小脚新款春秋色彩潮流女士牛仔裤
<p>￥49.23</p>
</div>
</div>
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2022-03-05/067c9a46afd156ad78ee2d8c2feac1c4.jpeg">
<div class="title-top">美帛春秋款灰色阔腿裤女显瘦高腰垂感直筒宽松拖地裤休闲
<p>￥37.1</p>
</div>
</div>
</div>
<div class="canner-grow-right">
<img src="https://cdn.pinduoduo.com/upload/home/img/subject/boyshirt.jpg">
<div class="canner-grow-bottow">
<img
src="https://t00img-c.yangkeduo.com/goods/images/2021-06-29/caa370d54722cb68b3c86fa0d1fe1131.jpeg">
<div class="title-top">DEBRAND夏季薄款牛仔裤男士2022新款宽松休闲百搭直
<p>￥41.2</p>
</div>
</div>
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2022-01-12/6bba525880a2b0c17000499ebb0cbe7e.jpeg">
<div class="title-top">I'm Dabid2022夏季潮流T恤男宽松印花短袖新款圆领半
<p>￥39</p>
</div>
</div>
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2022-02-15/6b9984356d06c7711b21ce8aee5d2c36.jpeg">
<div class="title-top">红豆男装长袖衬衫男春季商务正装牛津纺扣领休闲修身男士
<p>￥129</p>
</div>
</div>
</div>
<div class="canner-grow-left">
<img src="https://cdn.pinduoduo.com/upload/c8d0ac24-4f91-4461-8486-3b962a4b479a.png.slim.png">
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2022-02-07/641a3df0d285ae7b5f21e9b5a419dd4f.jpeg">
<div class="title-top">上海9价HPV疫苗九价进口疫苗预防宫颈癌预约待订服务
<p>￥5849</p>
</div>
</div>
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2022-03-21/1a8e0edfd61a27511b36602354456ba5.jpeg">
<div class="title-top">金戈 枸橼酸西地那非片 25mg*14盒/片 金戈伟哥白云
<p>￥157.99</p>
</div>
</div>
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2022-03-09/05da8360f76a8b047dd5a327484b9121.jpeg">
<div class="title-top">Parlodel 甲磺酸溴隐亭片2.5mg*30片/盒 用于泌乳素
<p>￥90</p>
</div>
</div>
</div>
<div class="canner-grow-right">
<img src="https://cdn.pinduoduo.com/upload/home/img/subject/food.jpg">
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2021-12-15/41c261138e5625e76ade50f9a41ab54e.jpeg">
<div class="title-top">五粮液52度普五 浓香型 500ml 整箱6瓶装（七代、八代
<p>￥5669</p>
</div>
</div>
<div class="canner-grow-bottow">
<img
src="https://t00img-c.yangkeduo.com/goods/images/2021-06-01/9a54aca958c39e086d6d8a8111565dfe.jpeg">
<div class="title-top">金龙鱼纯正玉米油4L*4桶非转基因物理压榨家用烘培一级食
<p>￥194.5</p>
</div>
</div>
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2021-11-15/b9e8ad82c46159ec7f32da11ae31ec6b.jpeg">
<div class="title-top">{50克大蛋}白荡里农家散养土鸡蛋新鲜柴鸡蛋草鸡蛋（20-
<p>￥15.9</p>
</div>
</div>
</div>
<div class="canner-grow-left">
<img src="https://cdn.pinduoduo.com/upload/shoes.jpg">
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2022-02-13/e574a47b190fe120441c49798019c464.jpeg">
<div class="title-top">JANE HARLOW男鞋运动鞋网面防臭老爹鞋韩版潮流学生百
<p>￥138.9</p>
</div>
</div>
<div class="canner-grow-bottow">
<img
src="https://t00img-c.yangkeduo.com/goods/images/2021-05-21/33c23865e5b1041713ac1a7b203686e8.jpeg">
<div class="title-top">金利来钱包男短裤真皮正品男士2021新款名牌牛皮正品奢
<p>￥199</p>
</div>
</div>
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2022-03-08/1f16fcbfb470f0ab97cd8468beb21017.jpeg">
<div class="title-top">JANE HARLOW正品春夏新款透气防臭飞织运动子男士网面
<p>￥109.9</p>
</div>
</div>
</div>
<div class="canner-grow-right">
<img src="https://cdn.pinduoduo.com/upload/home/img/subject/home.jpg">
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2022-03-08/1f16fcbfb470f0ab97cd8468beb21017.jpeg">
<div class="title-top">{3-6岁}熊津数学图画书（全）50册当当
<p>￥249</p>
</div>
</div>
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2022-01-13/b8793749c4366fab62ac0f353ca3d2a1.jpeg">
<div class="title-top">正版甜妻（全二册）咬春饼著青春文学都市言情甜宠爱小
<p>￥18.03</p>
</div>
</div>
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2022-03-08/1f16fcbfb470f0ab97cd8468beb21017.jpeg">
<div class="title-top">{双标防伪}INSTINCT生鲜本能 百利猫粮无谷鸡肉幼猫成
<p>￥289</p>
</div>
</div>
</div>
<div class="canner-grow-left">
<img src="https://cdn.pinduoduo.com/upload/d53138e1-6b23-440c-9e69-69e7dbfa6794.png.slim.png">
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2021-12-21/0f3baa3292f0d4827446b2e6e02d1523.jpeg">
<div class="title-top">{保税直发}Femfresh芳芯私处清洗液洋甘菊女生私处护
<p>￥18.9</p>
</div>
</div>
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2022-03-16/8f2d8e9e79f11f54f72d33bb4aa53a44.jpeg">
<div class="title-top">{新品上市}大宝水感多效防晒霜50倍防水防汗防紫外线学
<p>￥39.9</p>
</div>
</div>
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2022-02-07/f6f09eb09ddd28e3e7abb75fed62bc4b.jpeg">
<div class="title-top">Colorkey珂拉琪空气唇釉显白不沾杯HelloKitty联名款学生
<p>￥30</p>
</div>
</div>
</div>
<div class="canner-grow-right">
<img src="https://cdn.pinduoduo.com/upload/home/img/subject/3c.jpg">
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2021-12-08/f96ee7ba5321ed0871503c74b2d37813.jpeg">
<div class="title-top">Apple iPhoe 13支持移动联通电信5G双卡双待手机
<p>￥6069</p>
</div>
</div>
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2022-01-07/02a83961d8fcaeec8949ee8ccf33487d.jpeg">
<div class="title-top">索尼 PSS主机 日版 PlayStation5次世代蓝光高清
<p>￥4699</p>
</div>
</div>
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2021-12-03/0082e065a4232788746784fee719a8c7.jpeg">
<div class="title-top">小米平板5Pro 2.5K屏120Hz 晓龙870杜比影音办公娱乐平
<p>￥2219</p>
</div>
</div>
</div>
<div class="canner-grow-left">
<img src="https://cdn.pinduoduo.com/upload/home/img/subject/sports.jpg">
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2021-09-21/5637cb2a9a68e6361a5b1233ecca4cf0.jpeg">
<div class="title-top">回力官方旗舰官网运动鞋老爹鞋男2022春夏爆款轻便休闲
<p>￥74</p>
</div>
</div>
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2021-09-10/d8dbd7762aa5abf085dded788feac57f.jpeg">
<div class="title-top">康佳筋膜枪健身器材家用肌肉筋膜全身放松电动按摩枪专业
<p>￥118</p>
</div>
</div>
<div class="canner-grow-bottow">
<img
src="https://t00img-c.yangkeduo.com/goods/images/2021-01-14/71bf8075eac469074d6233b808f19786.jpeg">
<div class="title-top">特步运动套装男新款速干宽松健步跑步服休闲装男士短裤短
<p>￥78</p>
</div>
</div>
</div>
<div class="canner-grow-right">
<img src="https://cdn.pinduoduo.com/upload/overseas.jpg">
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2021-12-15/41c261138e5625e76ade50f9a41ab54e.jpeg">
<div class="title-top">五粮液52度普五 浓香型 500ml 整箱6瓶装（七代、八代）
<p>￥5669</p>
</div>
</div>
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2021-12-21/0f3baa3292f0d4827446b2e6e02d1523.jpeg">
<div class="title-top">{保税直发}Femfresh芳芯私处清洗液洋甘菊女生私处护
<p>￥18.9</p>
</div>
</div>
<div class="canner-grow-bottow">
<img
src="https://img.pddpic.com/gaudit-image/2022-01-06/74d3a753714bf7b787c579895f611c2b.jpeg">
<div class="title-top">{百草味冰雪蛋糕540g*2}麻薯夹心整箱早餐面包网红零
<p>￥18.9</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="survey">
<ul class="policy">
<li>
<i></i>预约维修服务
</li>
<li>
<i></i>7天无理由退货
</li>
<li>
<i></i>15天免费换货
</li>
<li>
<i></i>满99包邮
</li>
<li>
<i></i>520余家售后网点
</li>
</ul>
<div class="link">
<dl class="item">
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购货指南</dd>
<dd>订单操作</dd>
</dl>
<dl class="item">
<dt>服务支持</dt>
<dd>售后政策</dd>
<dd>自助服务</dd>
<dd>相关下载</dd>
</dl>
<dl class="item">
<dt>线下门店</dt>
<dd>服务网点</dd>
<dd>授权体验店</dd>
</dl>
<dl class="item">
<dt>关于拼多多</dt>
<dd>了解拼多多</dd>
<dd>加入拼多多</dd>
<dd>投资者关系</dd>
<dd>企业社会责任</dd>
<dd>廉洁举报</dd>
</dl>
<dl class="item">
<dt>关于我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
<dd>公益基金会</dd>
</dl>
<dl class="item">
<dt>特色服务</dt>
<dd>F码通道</dd>
<dd>礼物码</dd>
<dd>防伪查询</dd>
</dl>
<div id="contact">
<p class="tel">400-100-5678</p>
<p>8:00~18:00 (仅收市话费)</p>
<span><i></i>人工客服</span><br>
<span>拼多多</span>
</div>
</div>
</div>
</body>
</html>
下面是css代码
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
ul li {
list-style: none;
}
header {
width: 100%;
height: 140px;
overflow: hidden;
}
.toping {
width: 100%;
cursor: pointer;
}
.navbr {
width: 100%;
height: 140px;
}
.log {
width: 40%;
height: 140px;
line-height: 180px;
float: left;
text-align: center;
}
.log img {
width: 180px;
height: 63px;
padding-left: 350px;
}
.headnav {
width: 60%;
height: 140px;
line-height: 140px;
float: right;
}
.headnav ul span {
color: #424242;
margin: 0 0.5em;
}
.headnav ul {
float: left;
}
.headnav ul li {
display: inline-block;
}
.headnav ul li a {
color: #6c6c6c;
font-size: 14px;
}
.headnav ul li a:hover {
color: #FF0000;
}
.banner {
width: 1207px;
height: 3800px;
margin: 0 auto;
}
.banner-top img {
width: 1207px;
height: 282px;
}
.body {
width: 1207px;
height: 3440px;
background-color: #fafafa;
}
.title-top-1 {
overflow: hidden;
border-bottom: 1px solid #c1c1c1;
padding-bottom: 17px;
margin-top: 55px;
margin-bottom: 45px;
}
.title {
font-size: 20px;
color: #363636;
float: left;
}
.title-top-1 a {
float: right;
color: #868686;
font-size: 18px;
line-height: 22px;
margin-right: 5px;
cursor: pointer;
}
.list {
width: 1207px;
height: 550px;
background-color: #FFFFFF;
}
.list-top {
width: 100%;
height: 280px;
}
.list-top img {
width: 1207px;
height: auto;
}
.list-mine img {
width: 310px;
height: 210px;
float: left;
padding-left: 80px;
}
.canner-grow {
width: 1207px;
height: 3000px;
}
.canner-grow-left {
width: 556px;
height: 520px;
background-color: #fff;
float: left;
}
.canner-grow-left img {
width: 555px;
height: 278px;
}
.canner-grow-bottow {
width: 162px;
height: 203px;
background-color: #ffffff;
float: left;
padding-left: 18px;
}
.canner-grow-bottow img {
width: 125px;
height: 125px;
}
.title-top {
width: 160px;
height: 50px;
margin-top: 5px;
font-size: 12px;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
}
.canner-grow-right {
width: 550px;
height: 520px;
background-color: #fff;
float: right;
margin-right: 25px;
}
.canner-grow-right img {
width: 550px;
height: 278px;
}
.canner-grow-bottow img {
width: 120px;
height: 125px;
}
.survey {
width: 1226px;
height: 290px;
margin: 30px auto;
}
.policy {
width: 1226px;
height: 25px;
}
.policy li {
float: left;
width: 19.8%;
height: 25px;
line-height: 25px;
text-align: center;
font-size: 18px;
border-left: 1px solid #e0e0e0;
cursor: pointer;
}
.policy li:hover {
color: #ff6700;
}
.policy li:nth-child(1) {
border-left: none;
}
.policy {
padding: 27px 0;
border-bottom: 1px solid #e0e0e0;
}
.link {
width: 1226px;
height: 250px;
margin: 30px auto;
}
.link .item {
width: 160px;
float: left;
}
.link .item dt {
margin: -1px 0 26px;
font-size: 15px;
line-height: 1.5;
}
.link .item dd {
margin: 10px 0 0;
font-size: 12px;
color: #757575;
cursor: pointer;
}
.link .item dd:hover {
color: #ff6700;
}
#contact {
width: 252px;
height: 111px;
float: right;
text-align: center;
border-left: 1px solid #e0e0e0;
}
#contact .tel {
font-size: 22px;
line-height: 1;
color: #ff6700;
margin-bottom: 5px;
}
#contact span {
width: 118px;
height: 28px;
display: inline-block;
border: 1px solid #ff6700;
background-color: #fff;
color: #ff6700;
font-size: 12px;
line-height: 28px;
margin-top: 5px;
cursor: pointer;
transition: all .4s;
}
#contact span:hover {
background-color: #ff6700;
color: #ffffff;
}
html+css静态页面还原 拼多多网页相关推荐
- html：对于拼多多网页的简单制作
片头废话:拼多多整体不难(自我觉得),感觉难的部分也就在上侧导航栏的固定以及左侧二维码的放大隐藏. 目录 效果图 代码图 html结构部分 css部分 效果图 简易拼多多网页展示 代码图 html结构 ...
- HTML+CSS静态页面网页设计作业——洪江市旅游网(7页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码）
HTML5期末大作业:洪江市旅游网站设计--洪江市旅游网(7页) HTML+CSS+JavaScript 使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有 个人. 美食. 公司. ...
- FF03HTML+CSS静态页面网页设计作业——餐饮美食-武昌鱼(8页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码）
HTML5期末大作业:餐饮美食网站设计--餐饮美食-武昌鱼(8页) HTML+CSS+JavaScript 使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有 个人. 美食. 公司 ...
- HTML+CSS静态页面网页设计作业——餐饮美食-武昌鱼(8页) HTML+CSS+JavaScript 使用html+css实现一个静态页面（含源码）
HTML5期末大作业:餐饮美食网站设计--餐饮美食-武昌鱼(8页) HTML+CSS+JavaScript 使用html+css实现一个静态页面(含源码) 常见网页设计作业题材有 个人. 美食. 公司 ...
- html5页面结构案例,前端学习笔记（五）HTML+CSS静态页面实战案例：幸福西饼首页和百度首页...
按照知乎上面汪小黑推荐的前端学习路径,在自学了HTML和CSS之后,开始尝试实战制作静态页面小项目. 幸福西饼首页制作 首先我在网上下载到了千锋教育提供的的幸福西饼官网静态页面的教学视频和图片素材.源 ...
- 从dreamweaver转入Chrome Dev Tools 开发html css静态页面
2021年啦,你还在用dreamweaver或者文本编辑器开发网页? You are out! 学习用Chrome Dev Tools 怎么开发,记录一下. 用webstorm打开你开发的html页面 ...
- Web前端_项目实践01_萌娃摄影网页（纯HTML+CSS静态页面）
众所周知,学前端只看不写等于"我没学过",但是我们初学者常常因为找不到合适的网页素材而苦恼.有的太复杂,很多知识没学过:有的太粗糙,没有做的兴趣.正巧,我这儿有份儿合适的,纯HTM ...
- HTML+CSS静态页面游戏网站设计——腾讯游戏(页)学生HTML个人网页作业作品下载 个人网页设计制作 大学生个人网站作业模板 简单个人网页制作
HTML5期末大作业:游戏网站设计--腾讯游戏(页)学生HTML个人网页作业作品下载 个人网页设计制作 大学生个人网站作业模板 简单个人网页制作 常见网页设计作业题材有 个人. 美食. 公司. 学校. ...
- HTML+CSS静态页面网页设计作业——我的家乡-四川成都(4页) HTML+CSS+JavaScript
HTML5期末大作业:我的家乡网站设计--我的家乡-四川成都(4页) HTML+CSS+JavaScript 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶 ...
最新文章
- 使用android ProgressBar和Toast生成一个界面
- 链表--只知道当前节点指针删除当前节点
- 码code | 巧用2种方法，打破20条云开发数据库限制
- php如何同设备连接不上,一个账号同时只能在同一个设备上登陆
- 59. 螺旋矩阵 II（模拟）
- python多线程调用携程,进程、线程和携程的通俗解释【刘新宇Python】
- MySQL高级-索引的使用及优化
- java下载ftp_Java FTP下载文件
- Spring Boot 接入 Dubbo 指导文档
- .Net Core 使用swagger UI
- HIVE性能调优总结
- uniapp猫眼电影小程序（附带猫眼电影api接口）
- android 左右声道,Android立体声pcm的数据结构，左右声道拆分、左右声道反转
- 学科语文方面的论文怎么选题?
- HDU 4262 Juggler 树状数组
- 第七节 设计电路与学书法学绘画并没有差别
- open-falcon开源监控使用
- MP3磁盘错误!解决方法总结
- 和小导师发生了一些争执
- 评测三款最流行的epub阅读器（Mac适用）
热门文章
- CSDN博客积分准则
- 附彩蛋|Spring Security 竟然故意延长登录时间？知道真相的我惊呆了！
- 【历史上的今天】6 月 14 日：理论计算机科学的奠基人出生；VisiCalc 电子表格的发明者出生；雅虎收购 Overture
- OS 苹果手机fiddler抓包时出现了tunnel to 443 解决方案，亲测有效
- python爬取微博恶评_python爬取微博评论的实例讲解
- JTW93501单键触摸调光芯片详细介绍
- unity 使用socket制作局域网项目--激流勇进
- echarts-gl 初体验
- 操作系统之进程状态及进程状态切换 (六) --- 创建态、就绪态、运行态、阻塞态、终止态。
- Matlab制作局部放大图——magnify源码