简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >拼多多手机版

拼多多手机版

手机用户1631860753
手机用户1631860753原创
2021年10月03日 15:16:13634浏览

拼多多仿站

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.输出效果图

上一条：第二课 站内布局、a标签、列表、表格与布局、内联框架标签的案例下一条：Js运行机制、事件添加方式及事件冒泡、事件委托，fetch的常用场景
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议