search

博客列表 >商城列表页和商品详情页

商城列表页和商品详情页

自带光芒
自带光芒原创
2021年12月11日 08:05:312389浏览

商城列表页

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>商城列表页</title>
  6.     <link rel="stylesheet" href="./css/base.css" />
  7.     <link rel="stylesheet" href="./css/eduwork.css" />
  8.     <link rel="stylesheet" href="./css/iconfont.css" />
  9.     <link rel="stylesheet" href="./css/layout.css" />
  10.     <link rel="stylesheet" href="./css/footer.css" />
  11.     <link rel="stylesheet" href="./css/list.css" />
  12.     <link rel="stylesheet" href="https://at.alicdn.com/t/font_2934967_enobaibly2.css">
  13. </head>
  14. <body>
  15.     <header class="container d-flex jusify-content-between align-items-center">
  16.         <div class="header-left">
  17.             <img src="./img/logo.png" >
  18.         </div>
  19.         <div class="header-right d-flex jusify-content-between align-items-center">
  20.             <div class="mt-2">
  21.                 <a href="">登录</a>
  22.                 <span>|</span>
  23.                 <a href="">注册</a>
  24.             </div>
  25.             <div class="header-search border-bottom border-black ml-2">
  26.                 <form action="" method="post">
  27.                     <input type="text" name="" id="" value="" placeholder="热门搜索：细说PHP" class="border-0" />
  28.                     <button type="button" class="icon-sousuo iconfont border-0 bg-transparent textColorRed120"></button>
  29.                 </form>
  30.             </div>
  31.             <div class="header-icon">
  32.                 <a href="" class="hover-a-none"><i class="icon-31wode iconfont textColorRed120"></i></a>
  33.                 <a href="" class="hover-a-none"><i class="icon-erweima iconfont textColorRed120"></i></a>
  34.                 <a href="" class="hover-a-none"><i class="icon-gouwuchekong iconfont textColorRed120"></i></a>
  35.             </div>
  36.         </div>
  37.     </header>
  38.     <div class="container-full navbox">
  39.         <ul class="d-flex jusify-content-center align-items-center">
  40.             <li class="px-3 py-2 mx-4">
  41.                 <a class="nav-item fontSize16" href="">首页</a>
  43.             </li>
  44.             <li class="px-3 py-2 mx-4">
  45.                 <a class="nav-item fontSize16" href="">编程图书</a>
  46.                 <div class="navbox-child position-absolute left-0 w-100">
  47.                     <div class="d-flex jusify-content-center align-items-center">
  48.                         <div class="py-2 px-2 mx-4">
  49.                             <a href="" class="text-white">细说PHP</a>
  50.                         </div>
  51.                         <div class="py-2 px-2 mx-4">
  52.                             <a href="" class="text-white">细说PHP</a>
  53.                         </div>
  54.                         <div class="py-2 px-2 mx-4">
  55.                             <a href="" class="text-white">细说PHP</a>
  56.                         </div>                   
  57.                     </div>
  58.                 </div>                
  59.             </li>
  60.             <li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">算法图书</a></li>
  61.             <li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">AI图书</a></li>
  62.             <li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">人工智能</a></li>
  63.         </ul>
  64.     </div>
  65. <!--    banner-->
  66.     <section class="banner container-full overflow-hidden border border-box">
  67.         <div class="d-flex w-300">
  68.             <img src="./img/001.jpeg" alt="" class="w-100">
  69.             <img src="./img/2.jpeg" class="w-100" alt="">
  70.             <img src="./img/3.jpeg" class="w-100" alt="">
  71.         </div>
  72.     </section>
  73. <!--    侧边栏-->
  74.     <aside class="posetion-fixed right-10 d-flex flex-column jusify-content-between">
  75.         <div class="iconfont border p-3 bg-db cursor textColorRed120 icon-31wode"></div>
  76.         <div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-31wode"></div>
  77.         <div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-31wode"></div>
  78.         <div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-31wode"></div>
  79.     </aside>   
  80.      <div class="container-full border-bottom">
  81.          <div class="container py-1">
  82.              <a href="">首页</a>
  83.              <span class="ml-2 mr-2">/</span>
  84.              <a href="">编程书籍</a>
  85.              <span class="ml-2 mr-2">/</span>
  86.              <a href="">细说系列</a>
  87.          </div>
  88.      </div>
  89.      <div class="container-full border-bottom">
  90.          <div class="container d-flex jusify-content-between align-items-center">
  91.              <div class="fontSize18 font-weight-bold">
  92.                  细说系列
  93.              </div>
  94.              <div class="order-box d-flex jusify-content-between align-items-center border position-relative">
  95.                  <span>排序方式</span>
  96.                  <i class="iconfont icon-xiajiantou"></i>
  97.                  <div class="order-list position-absolute border">
  98.                      <div><a href="">新品上市</a></div>
  99.                      <div><a href="">新品上市</a></div>
  100.                      <div><a href="">新品上市</a></div>
  101.                  </div>
  102.              </div>
  103.          </div>
  104.      </div>
  105.      <div class="container d-flex jusify-content-around pt-3 pb-3">
  106.          <div class="goods-item text-center">
  107.              <div class="">
  108.                  <a href=""><img src="./img/pro01.jpg"></a>
  109.              </div>
  110.              <div class="py-2 fontSize14">
  111.                  <a href="">细说PHP</a>
  112.              </div>
  113.              <div class="textColorRed120">
  114.                  ￥159.00
  115.              </div>
  116.          </div>
  117.          <div class="goods-item text-center">
  118.              <div class="">
  119.                  <a href=""><img src="./img/pro01.jpg"></a>
  120.              </div>
  121.              <div class="py-2 fontSize14">
  122.                  <a href="">细说PHP</a>
  123.              </div>
  124.              <div class="textColorRed120">
  125.                  ￥159.00
  126.              </div>
  127.          </div>
  128.          <div class="goods-item text-center">
  129.              <div class="">
  130.                  <a href=""><img src="./img/pro01.jpg"></a>
  131.              </div>
  132.              <div class="py-2 fontSize14">
  133.                  <a href="">细说PHP</a>
  134.              </div>
  135.              <div class="textColorRed120">
  136.                  ￥159.00
  137.              </div>
  138.          </div>
  139.          <div class="goods-item text-center">
  140.              <div class="">
  141.                  <a href=""><img src="./img/pro01.jpg"></a>
  142.              </div>
  143.              <div class="py-2 fontSize14">
  144.                  <a href="">细说PHP</a>
  145.              </div>
  146.              <div class="textColorRed120">
  147.                  ￥159.00
  148.              </div>
  149.          </div>
  150.      </div>
  151.     <footer class="container-full border-top mt-4 ">
  152.         <section class="container d-flex my-2 jusify-content-around align-items-center">
  153.             <div class="border-right py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
  154.                 <img src="./img/foot1.png" alt="">
  155.                 <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
  156.             </div>
  157.             <div class="border-right py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
  158.                 <img src="./img/foot1.png" alt="">
  159.                 <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
  160.             </div>
  161.             <div class="border-right py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
  162.                 <img src="./img/foot1.png" alt="">
  163.                 <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
  164.             </div>
  165.             <div class=" py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
  166.                 <img src="./img/foot1.png" alt="">
  167.                 <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
  168.             </div>
  172.         </section>
  173.         <section class="bg-black text-center py-3">
  174.             <p class="text-white">最家家居©2013-2017公司版权所有 京ICP备080100-44备0000111000号<br/>
  175.                 违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
  176.         </section>
  177.     </footer>
  178. </body>
  179. </html>

商城详情页

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>商城详情页</title>
  6.     <link rel="stylesheet" href="./css/base.css" />
  7.     <link rel="stylesheet" href="./css/eduwork.css" />
  8.     <link rel="stylesheet" href="./css/iconfont.css" />
  9.     <link rel="stylesheet" href="./css/layout.css" />
  10.     <link rel="stylesheet" href="./css/footer.css" />
  11.     <link rel="stylesheet" href="./css/info.css" />
  12.     <link rel="stylesheet" href="https://at.alicdn.com/t/font_2934967_j3h3059l5o.css">
  13. </head>
  14. <body>
  15.     <header class="container d-flex jusify-content-between align-items-center">
  16.         <div class="header-left">
  17.             <img src="./img/logo.png" >
  18.         </div>
  19.         <div class="header-right d-flex jusify-content-between align-items-center">
  20.             <div class="mt-2">
  21.                 <a href="">登录</a>
  22.                 <span>|</span>
  23.                 <a href="">注册</a>
  24.             </div>
  25.             <div class="header-search border-bottom border-black ml-2">
  26.                 <form action="" method="post">
  27.                     <input type="text" name="" id="" value="" placeholder="热门搜索：细说PHP" class="border-0" />
  28.                     <button type="button" class="icon-sousuo iconfont border-0 bg-transparent textColorRed120"></button>
  29.                 </form>
  30.             </div>
  31.             <div class="header-icon">
  32.                 <a href="" class="hover-a-none"><i class="icon-31wode iconfont textColorRed120"></i></a>
  33.                 <a href="" class="hover-a-none"><i class="icon-erweima iconfont textColorRed120"></i></a>
  34.                 <a href="" class="hover-a-none"><i class="icon-gouwuchekong iconfont textColorRed120"></i></a>
  35.             </div>
  36.         </div>
  37.     </header>
  38.     <div class="container-full navbox">
  39.         <ul class="d-flex jusify-content-center align-items-center">
  40.             <li class="px-3 py-2 mx-4">
  41.                 <a class="nav-item fontSize16" href="">首页</a>
  43.             </li>
  44.             <li class="px-3 py-2 mx-4">
  45.                 <a class="nav-item fontSize16" href="">编程图书</a>
  46.                 <div class="navbox-child position-absolute left-0 w-100">
  47.                     <div class="d-flex jusify-content-center align-items-center">
  48.                         <div class="py-2 px-2 mx-4">
  49.                             <a href="" class="text-white">细说PHP</a>
  50.                         </div>
  51.                         <div class="py-2 px-2 mx-4">
  52.                             <a href="" class="text-white">细说PHP</a>
  53.                         </div>
  54.                         <div class="py-2 px-2 mx-4">
  55.                             <a href="" class="text-white">细说PHP</a>
  56.                         </div>                   
  57.                     </div>
  58.                 </div>                
  59.             </li>
  60.             <li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">算法图书</a></li>
  61.             <li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">AI图书</a></li>
  62.             <li class="px-3 py-2 mx-4"><a class="nav-item fontSize16" href="">人工智能</a></li>
  63.         </ul>
  64.     </div>
  65. <!--    banner-->
  66.     <section class="banner container-full overflow-hidden border border-box">
  67.         <div class="d-flex w-300">
  68.             <img src="./img/001.jpeg" alt="" class="w-100">
  69.             <img src="./img/2.jpeg" class="w-100" alt="">
  70.             <img src="./img/3.jpeg" class="w-100" alt="">
  71.         </div>
  72.     </section>
  73. <!--    侧边栏-->
  74.     <aside class="posetion-fixed right-10 d-flex flex-column jusify-content-between">
  75.         <div class="iconfont border p-3 bg-db cursor textColorRed120 icon-31wode"></div>
  76.         <div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-31wode"></div>
  77.         <div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-31wode"></div>
  78.         <div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-31wode"></div>
  79.     </aside>   
  80.      <div class="container-full border-bottom">
  81.          <div class="container py-1">
  82.              <a href="">首页</a>
  83.              <span class="ml-2 mr-2">/</span>
  84.              <a href="">编程书籍</a>
  85.              <span class="ml-2 mr-2">/</span>
  86.              <a href="">细说系列</a>
  87.          </div>
  88.      </div>
  89.      <div class="container d-flex jusify-content-center">
  90.         <div class="goods-img-box w-40">
  91.             <div class="text-center">
  92.                 <img src="./img/proDet01_big.jpg" >
  93.             </div>
  94.             <div class="">
  95.                 <ul class="d-flex">
  96.                     <li><img src="./img/proDet01.jpg" ></li>
  97.                     <li><img src="./img/proDet01.jpg" ></li>
  98.                     <li><img src="./img/proDet01.jpg" ></li>
  99.                     <li><img src="./img/proDet01.jpg" ></li>
  100.                 </ul>
  101.             </div>
  102.         </div>
  103.         <div class="goods-info-box w-40">
  104.             <h1 class="fontSize18">[细说] 细说PHP</h1>
  105.             <div class="text-777 py-3">
  106.                 【破损补寄】【适合放室内、卧室、书房、餐桌、办公室、客厅、电视柜等地方】【无理由退换货】【包邮】【白色现代简约花瓶】
  107.             </div>
  108.             <div class="textColorRed120 font-weight-bold fontSize16 pb-4">
  109.                 ￥ 159.00
  110.             </div>
  111.             <div class="pt-4 border-top">
  112.                 <p>颜色分类</p>
  113.                 <div class="py-4">
  114.                     <img src="./img/proDet01.jpg" class="w-10" >
  115.                     <img src="./img/proDet01.jpg" class="w-10" >
  116.                     <img src="./img/proDet01.jpg" class="w-10" >
  117.                     <img src="./img/proDet01.jpg" class="w-10" >
  118.                 </div>
  119.             </div>
  120.             <div class="mb-4">
  121.                 <p>数量 库存<font class="textColorRed120">2000</font>件</p>
  122.                 <div class="d-flex align-items-center py-2">
  123.                     <div class="fontSize20 border px-2">
  124.                         -
  125.                     </div>
  126.                     <div class="">
  127.                         <input type="text" name="" id="" value="1" class="border-0 text-center width-50" />
  128.                     </div>
  129.                     <div class="fontSize20 border px-2">
  130.                         +
  131.                     </div>
  132.                 </div>
  133.             </div>
  134.             <div class="pt-4 border-top">
  135.                 <div class="d-flex jusify-content-around">
  136.                     <button type="button" class="border bg-dark w-30 px-4 py-3 text-white fontSize16">立即购买</button>
  137.                     <button type="button" class="border w-30 px-4 py-3 text-black fontSize16">加入购物车</button>
  138.                 </div>
  139.             </div>
  140.         </div>
  141.      </div>
  143.      <div class="container d-flex jusify-content-between">
  144.          <div class="info-left w-70">
  145.              <div class="info-tab d-flex border-bottom w-100">
  146.                  <div class="px-4 py-2 border-bottom border-dark">
  147.                      商品详情
  148.                  </div>
  149.                  <div class="px-4 py-2">
  150.                      所有评价
  151.                  </div>
  152.              </div>
  153.              <div class="py-3">
  154.                  <img src="./img/det01.jpg" alt="">
  155.              </div>
  156.          </div>
  157.          <div class="info-right w-20">
  158.              <div class="border">
  159.                  <div class="bg-fbfb text-center py-2">
  160.                      为您推荐
  161.                  </div>
  162.                  <div class="p-3">
  163.                      <div class="">
  164.                          <img src="./img/see01.jpg" class="w-80" >
  165.                      </div>
  166.                      <div class="pt-3 pb-3">
  167.                          【细说】细说PHP
  168.                      </div>
  169.                      <div class="">
  170.                          ￥158.00
  171.                      </div>
  172.                  </div>
  173.                  <div class="p-3">
  174.                      <div class="">
  175.                          <img src="./img/see01.jpg" class="w-80" >
  176.                      </div>
  177.                      <div class="pt-3 pb-3">
  178.                          【细说】细说PHP
  179.                      </div>
  180.                      <div class="">
  181.                          ￥158.00
  182.                      </div>
  183.                  </div>
  184.              </div>
  185.          </div>
  186.      </div>
  188.      <div class="container-full bg-fbfb pt-2 pb-2">
  189.          <div class="container">
  190.              <div class="text-center fontSize16">
  191.                  猜你喜欢
  192.              </div>
  193.              <div class="d-flex jusify-content-between">
  194.                  <div class="w-10 d-flex align-items-center iconfont icon-xiangzuojiantou fontSize50 text-777">
  196.                  </div>
  197.                  <div class="w-80 d-flex jusify-content-around align-items-center">
  198.                      <div class="p-3">
  199.                          <div class="">
  200.                              <img src="./img/like04.jpg" >
  201.                          </div>
  202.                          <div class="pt-3 pb-3">
  203.                              【细说】细说PHP
  204.                          </div>
  205.                          <div class="textColorRed120">
  206.                              ￥158.00
  207.                          </div>
  208.                      </div>
  209.                      <div class="p-3">
  210.                          <div class="">
  211.                              <img src="./img/like04.jpg" >
  212.                          </div>
  213.                          <div class="pt-3 pb-3">
  214.                              【细说】细说PHP
  215.                          </div>
  216.                          <div class="textColorRed120">
  217.                              ￥158.00
  218.                          </div>
  219.                      </div>
  220.                      <div class="p-3">
  221.                          <div class="">
  222.                              <img src="./img/like04.jpg" >
  223.                          </div>
  224.                          <div class="pt-3 pb-3">
  225.                              【细说】细说PHP
  226.                          </div>
  227.                          <div class="textColorRed120">
  228.                              ￥158.00
  229.                          </div>
  230.                      </div>
  231.                      <div class="p-3">
  232.                          <div class="">
  233.                              <img src="./img/like04.jpg" >
  234.                          </div>
  235.                          <div class="pt-3 pb-3">
  236.                              【细说】细说PHP
  237.                          </div>
  238.                          <div class="textColorRed120">
  239.                              ￥158.00
  240.                          </div>
  241.                      </div>
  242.                  </div>
  243.                  <div class="w-10 d-flex jusify-content-center align-items-center iconfont icon-xiangyoujiantou fontSize50 text-777">
  245.                  </div>
  246.              </div>
  247.          </div>
  248.      </div>
  251.     <footer class="container-full border-top mt-4 ">
  252.         <section class="container d-flex my-2 jusify-content-around align-items-center">
  253.             <div class="border-right py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
  254.                 <img src="./img/foot1.png" alt="">
  255.                 <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
  256.             </div>
  257.             <div class="border-right py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
  258.                 <img src="./img/foot1.png" alt="">
  259.                 <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
  260.             </div>
  261.             <div class="border-right py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
  262.                 <img src="./img/foot1.png" alt="">
  263.                 <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
  264.             </div>
  265.             <div class=" py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
  266.                 <img src="./img/foot1.png" alt="">
  267.                 <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
  268.             </div>
  272.         </section>
  273.         <section class="bg-black text-center py-3">
  274.             <p class="text-white">最家家居©2013-2017公司版权所有 京ICP备080100-44备0000111000号<br/>
  275.                 违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
  276.         </section>
  277.     </footer>
  278. </body>
  279. </html>
上一条：linux内核的软中断实现教程下一条：模仿拼多多小程序自动登录思想
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
P粉7135673242022-09-09 16:17:241楼
您好，请问如何实现商品页和商品详情页的交互呢，点击商品页的商品，如何出现详情页对应的图片呢

相关文章

查看更多