Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 拼多多手机版
Blogger Information
Blog 18
fans 0
comment 0
visits 10942
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
拼多多手机版
手机用户1631860753
Original
640 people have browsed it

拼多多仿站

1.源代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>仿站</title>
  8.     <link rel="stylesheet" href="css/reset.css" />
  9.     <link rel="stylesheet" href="css/home.css" />
  10.     <link rel="stylesheet" href="css/header.css" />
  11.     <link rel="stylesheet" href="css/navs.css" />
  12.     <link rel="stylesheet" href="css/footer.css" />
  13.     <link rel="stylesheet" href="css/slider.css" />
  14.     <link rel="stylesheet" href="font_icon/iconfont.css" />
  15.     <link rel="stylesheet" href="css/list.css" />
  16.     <style></style>
  17.   </head>
  18.   <body>
  19.     <div class="home">
  20.       <div class="header">
  21.         <span class="iconfont icon-liebiao2"></span>
  22.         <div class="search">
  23.           <span class="iconfont icon-pinduoduo"></span>
  24.           <span class="iconfont icon-search"></span>
  25.           <form action="">
  26.             <input type="search" name="search" value="搜索店铺" />
  27.           </form>
  28.         </div>
  29.         <a href="">登录</a>
  30.       </div>
  31.       <div class="main">
  32.         <div class="slider">
  33.           <div class="imgs">
  34.             <a href="" class="active"><img src="static/images/items/lbt.jpg" alt="" /></a>
  35.             <a href=""><img src="static/images/items/lbt.jpg" alt="" /></a>
  36.             <a href=""><img src="static/images/items/lbt.jpg" alt="" /></a>
  37.           </div>
  38.           <div class="btns">
  39.             <span class="item active"></span>
  40.             <span class="item"></span>
  41.             <span class="item"></span>
  42.           </div>
  43.         </div>
  44.         <div class="navs">
  45.           <ul class="nav-group">
  46.             <li>
  47.               <a href=""><img src="static/images/nav/1.png" alt="" /></a>
  48.               <a href="">限时秒杀</a>
  49.             </li>
  50.             <li>
  51.               <a href=""><img src="static/images/nav/2.png" alt="" /></a>
  52.               <a href="">断码清仓</a>
  53.             </li>
  54.             <li>
  55.               <a href=""><img src="static/images/nav/3.png" alt="" /></a>
  56.               <a href="">发现好货</a>
  57.             </li>
  58.             <li>
  59.               <a href=""><img src="static/images/nav/4.png" alt="" /></a>
  60.               <a href="">多多果园</a>
  61.             </li>
  62.             <li>
  63.               <a href=""><img src="static/images/nav/5.png" alt="" /></a>
  64.               <a href="">9块9特卖</a>
  65.             </li>
  66.             <li>
  67.               <a href=""><img src="static/images/nav/6.png" alt="" /></a>
  68.               <a href="">充值中心</a>
  69.             </li>
  70.             <li>
  71.               <a href=""><img src="static/images/nav/7.png" alt="" /></a>
  72.               <a href="">国庆大促</a>
  73.             </li>
  74.             <li>
  75.               <a href=""><img src="static/images/nav/8.png" alt="" /></a>
  76.               <a href="">签到</a>
  77.             </li>
  78.             <li>
  79.               <a href=""><img src="static/images/nav/9.png" alt="" /></a>
  80.               <a href="">多多赚大钱</a>
  81.             </li>
  82.             <li>
  83.               <a href=""><img src="static/images/nav/10.png" alt="" /></a>
  84.               <a href="">行家帮你选</a>
  85.             </li>
  86.           </ul>
  87.           <ul class="nav-group"></ul>
  88.           <div class="btns">
  89.             <span class="item active"></span>
  90.             <span class="item"></span>
  91.           </div>
  92.         </div>
  93.         <ul class="list">
  94.           <li class="item">
  95.             <a href=""><img src="pdd/1.jpeg" alt="" /></a>
  96.             <div class="intro">
  97.               <span>国庆大促</span>
  98.               <span>2021新款电竞专用游戏蓝牙耳机无线5.2高音质OPPO华为苹果通用</span>
  99.             </div>
  100.             <div class="price">
  101.               <span class="iconfont icon-renminbi">29.9</span>
  102.               <span class="sign">满减</span>
  103.               <span class="other">看相似</span>
  104.             </div>
  105.           </li>
  106.           <li class="item">
  107.             <a href=""><img src="pdd/2.jpeg" alt="" /></a>
  108.             <div class="intro">
  109.               <span>国庆大促</span>
  110.               <span>新款夏季t恤短袖男韩版ins潮流百搭学生宽松五分袖青少年印花上衣</span>
  111.             </div>
  112.             <div class="price">
  113.               <span class="iconfont icon-renminbi">99.9</span>
  114.               <span class="sign">满减</span>
  115.               <span class="other">看相似</span>
  116.             </div>
  117.           </li>
  118.           <li class="item">
  119.             <a href=""><img src="pdd/3.jpeg" alt="" /></a>
  120.             <div class="intro">
  121.               <span>国庆大促</span>
  122.               <span>蓝宝石 RX6900XT 16G超白金极光/毒药 游戏电竞电脑显卡</span>
  123.             </div>
  124.             <div class="price">
  125.               <span class="iconfont icon-renminbi">999.9</span>
  126.               <span class="sign">满减</span>
  127.               <span class="other">看相似</span>
  128.             </div>
  129.           </li>
  130.           <li class="item">
  131.             <a href=""><img src="pdd/1.jpeg" alt="" /></a>
  132.             <div class="intro">
  133.               <span>国庆大促</span>
  134.               <span>2021新款电竞专用游戏蓝牙耳机无线5.2高音质OPPO华为苹果通用</span>
  135.             </div>
  136.             <div class="price">
  137.               <span class="iconfont icon-renminbi">99</span>
  138.               <span class="sign">满减</span>
  139.               <span class="other">看相似</span>
  140.             </div>
  141.           </li>
  142.           <li class="item">
  143.             <a href=""><img src="pdd/2.jpeg" alt="" /></a>
  144.             <div class="intro">
  145.               <span>国庆大促</span>
  146.               <span>新款夏季t恤短袖男韩版ins潮流百搭学生宽松五分袖青少年印花上衣</span>
  147.             </div>
  148.             <div class="price">
  149.               <span class="iconfont icon-renminbi">999</span>
  150.               <span class="sign">满减</span>
  151.               <span class="other">看相似</span>
  152.             </div>
  153.           </li>
  154.           <li class="item">
  155.             <a href=""><img src="pdd/3.jpeg" alt="" /></a>
  156.             <div class="intro">
  157.               <span>国庆大促</span>
  158.               <span>蓝宝石 RX6900XT 16G超白金极光/毒药 游戏电竞电脑显卡</span>
  159.             </div>
  160.             <div class="price">
  161.               <span class="iconfont icon-renminbi">999.9</span>
  162.               <span class="sign">满减</span>
  163.               <span class="other">看相似</span>
  164.             </div>
  165.           </li>
  166.         </ul>
  167.       </div>
  168.       <div class="footer">
  169.         <div>
  170.           <span class="iconfont icon-shouye"></span>
  171.           <span>首页</span>
  172.         </div>
  173.         <div>
  174.           <span class="iconfont icon-15"></span>
  175.           <span>直播</span>
  176.         </div>
  177.         <div>
  178.           <span class="iconfont icon-fenlei"></span>
  179.           <span>分类</span>
  180.         </div>
  181.         <div>
  182.           <span class="iconfont icon-IMliaotian"></span>
  183.           <span>聊天</span>
  184.         </div>
  185.         <div>
  186.           <span class="iconfont icon-gerenzhongxin"></span>
  187.           <span>个人中心</span>
  188.         </div>
  189.       </div>
  190.     </div>
  191.   </body>
  192. </html>

2.页面样式重置

  1. /* 样式重置 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  7. :root {
  8.   font-size: 10px;
  9. }
  10. a {
  11.   text-decoration: none;
  12.   color: #666;
  13. }
  14. li {
  15.   list-style: none;
  16. }
  17. body {
  18.   font-size: 1.6rem;
  19.   background-color: #f6f6f6;
  20. }
  21. @media screen and (min-width: 480px) {
  22.   :root {
  23.     font-size: 12px;
  24.   }
  25. }
  26. @media screen and (min-width: 640px) {
  27.   :root {
  28.     font-size: 14px;
  29.   }
  30. }
  31. @media screen and (min-width: 720px) {
  32.   :root {
  33.     font-size: 16px;
  34.   }
  35. }

3.头部css

  1. /* 头部布局 */
  2. .home .header {
  3.   background-color: #e43130;
  4.   display: grid;
  5.   grid-template-columns: 5rem 1fr 5rem;
  6.   place-items: center;
  7.   color: #fff;
  8. }
  9. .home .header .icon-liebiao2 {
  10.   font-size: 2.5rem;
  11.   font-weight: bolder;
  12. }
  13. .home .header a {
  14.   color: white;
  15.   font-size: 1.4rem;
  16. }
  17. .home .header .search {
  18.   width: 100%;
  19.   background-color: #fff;
  20.   padding: 0.2rem;
  21.   border-radius: 1.5rem;
  22.   display: grid;
  23.   grid-template-columns: auto auto 1fr;
  24. }
  25. .home .header .search form input {
  26.   min-width: 100%;
  27.   outline: none;
  28.   border: none;
  29.   color: #888;
  30. }
  31. .home .header .search .icon-pinduoduo {
  32.   color: #e43130;
  33.   font-size: 2rem;
  34.   padding: 0 0.5rem;
  35.   place-self: center;
  36. }
  37. .home .header .search .icon-search {
  38.   color: #888;
  39.   font-size: 2rem;
  40.   padding: 0 0.5rem;
  41.   place-self: center;
  42. }

4.主体布局css

  1. /* 主体布局 */
  2. .home {
  3.   min-height: 100vh;
  4.   display: grid;
  5.   grid-template-rows: 4rem 1fr 6rem;
  6. }
  7. .home .main {
  8.   height: calc(100vh - 4rem - 6rem);
  9.   overflow-y: scroll;
  10. }

5.轮播图

  1. /* 轮播图 */
  2. .home .main .slider {
  3.   width: 90%;
  4.   margin: 1rem auto 2rem;
  5. }
  6. .home .main .slider img {
  7.   width: 100%;
  8.   border-radius: 1rem;
  9.   margin-top: 1rem;
  10. }
  11. .home .main .slider .imgs a {
  12.   display: none;
  13. }
  14. .home .main .slider .imgs a.active {
  15.   display: block;
  16. }
  17. .home .main .slider .btns {
  18.   display: flex;
  19.   justify-content: center;
  20.   margin-top: -2rem;
  21. }
  22. .home .main .slider .btns .item {
  23.   height: 0.8rem;
  24.   width: 0.8rem;
  25.   border-radius: 50%;
  26.   background-color: #888;
  27.   margin: 0.2rem;
  28. }
  29. .home .main .slider .btns .item:hover {
  30.   cursor: pointer;
  31. }
  32. .home .main .slider .btns .item.active {
  33.   background-color: #e43130;
  34. }

6.导航css样式

  1. /* 导航 */
  2. .home .main .navs .nav-group {
  3.   display: grid;
  4.   grid-template-columns: repeat(5, 1fr);
  5. }
  6. .home .main .navs .nav-group li a {
  7.   font-size: 1.2rem;
  8. }
  9. .home .main .navs .nav-group li img {
  10.   width: 4rem;
  11. }
  12. .home .main .navs .nav-group li {
  13.   display: grid;
  14.   place-items: center;
  15. }
  16. .home .main .navs .btns {
  17.   display: flex;
  18.   justify-content: center;
  19.   margin-top: -2rem;
  20. }
  21. .home .main .navs .btns .item {
  22.   height: 0.8rem;
  23.   width: 0.8rem;
  24.   margin: 0.2rem;
  25.   border-radius: 50%;
  26.   background-color: #888;
  27. }
  28. .home .main .navs .btns .item:hover {
  29.   cursor: pointer;
  30. }
  31. .home .main .navs .btns .item.active {
  32.   background-color: #e43130;
  33. }

7.商品布局

  1. .home .main .list {
  2.   display: grid;
  3.   grid-template-columns: repeat(2, 1fr);
  4.   gap: 1.5rem;
  5.   padding: 1.5rem;
  6. }
  7. .home .main .list img {
  8.   width: 100%;
  9.   border-radius: 0.5rem;
  10. }
  11. .home .main .list .item {
  12.   background-color: #fff;
  13.   padding-bottom: 3rem;
  14.   border-radius: 1rem;
  15.   font-size: 1.3rem;
  16. }
  17. .home .main .list .item .intro span:first-of-type {
  18.   background-color: red;
  19.   color: #fafad2;
  20.   padding: 2px 2px;
  21.   border-radius: 0.5rem;
  22. }
  23. .home .main .list .item .price {
  24.   font-size: 1.4rem;
  25.   display: flex;
  26. }
  27. .home .main .list .item .price .icon-renminbi {
  28.   color: red;
  30.   font-size: 2rem;
  31. }
  32. .home .main .list .item .price .sign {
  33.   border: 1px solid red;
  34.   color: red;
  35.   border-radius: 0.5rem;
  36.   margin-left: 0.5rem;
  37. }
  38. .home .main .list .item .price .other {
  39.   background-color: #eee;
  40.   color: #666;
  41.   border-radius: 0.5rem;
  42.   margin-left: auto;
  43. }

8.页脚样式设置

  1. /* 页脚 */
  2. .home .footer {
  3.   background-color: #ddd;
  4.   border-top: 1px solid #ddd;
  6.   display: flex;
  7.   place-content: space-around;
  8. }
  9. .home .footer div {
  10.   color: #888;
  11.   display: flex;
  12.   flex-flow: column nowrap;
  13.   place-items: center;
  14. }
  15. .home .footer div:first-of-type {
  16.   color: red;
  17. }
  18. .home .footer div span:first-of-type {
  19.   font-size: 2.5rem;
  20. }
  21. .home .footer div span:last-of-type {
  22.   font-size: 0.9rem;
  23. }

css样式导入还可以更简洁一点,可以全部都导入一个css中,再由这一个css导出

9.输出效果图

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post