search

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

商城列表页及商品详情页

坨坨
坨坨原创
2021年11月24日 10:14:53925浏览

CSS代码块分散不好上传。这里只贴图及上html代码

商品列表

商品详情

商品列表html代码

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link rel="stylesheet" href="./css/base.css">
  7.     <link rel="stylesheet" href="./font/iconfont.css">
  8.     <link rel="stylesheet" href="./css/index.css">
  9.     <link rel="stylesheet" href="./css/list.css">
  10.     <title>商品列表页面</title>
  11. </head>
  12. <body>
  13.     <!-- 头部 -->
  14.     <header class="flex-between container margin-auto">
  15.         <div>
  16.             <img src="./img/logo.png" alt="" class="width-80">
  17.         </div>
  18.         <div class="flex-center">
  19.             <a href="#" class="margin-top-5 font-15">登录</a>
  20.             <span class="margin-top-5">｜</span>
  21.             <a href="#" class="margin-top-5 font-15">注册</a>
  22.             <div class="border-bottom-black-1 margin-left-10 padding-lr-5">
  23.                 <input type="text" name="search" placeholder="热门搜索：细说php" id="search" class="border-none">
  24.                 <label for="search"><a href=""><i class="iconfont icon-sousuo color120"></i></a></label>
  25.             </div>
  26.             <div class="margin-top-5">
  27.                 <a href=""><i class="iconfont icon-yonghu color120 margin-left-15 font-18"></i></a>
  28.                 <a href=""><i class="iconfont icon-erweima color120 margin-left-10 font-18"></i></a>
  29.                 <a href=""><i class="iconfont icon-gouwuche1 color120 margin-left-10 font-18"></i></a>
  31.             </div>
  33.         </div>
  34.     </header>
  35.     <!-- 导航 -->
  36.     <nav class="margin-top-20">
  37.         <ul class="flex-center">
  38.             <li class="margin-lr-20 border-bottom-red-2">首页</li>
  39.             <li class="margin-lr-20 border-bottom-red-2">编程图书
  40.                 <section class="margin-top-12">
  41.                     <ul>
  42.                         <li>细说PHP</li>
  43.                         <li>细说PHP</li>
  44.                         <li>细说PHP</li>
  45.                         <li>细说PHP</li>
  46.                     </ul>
  47.                 </section>
  48.             </li>
  49.             <li class="margin-lr-20 border-bottom-red-2">算法图书</li>
  50.             <li class="margin-lr-20 border-bottom-red-2">AI图书</li>
  51.             <li class="margin-lr-20 border-bottom-red-2">人工智能</li>
  52.         </ul>
  53.     </nav>
  54.     <!-- 轮播图 -->
  55.     <section class="width-100 overflow-hiden banner">
  56.         <div class="banner-paused">
  57.             <a href="">
  58.                 <img src="./img/001.jpeg" alt="">
  59.             </a>
  60.             <a href="">
  61.                 <img src="./img/2.jpeg" alt="">
  62.             </a>
  63.             <a href="">
  64.                 <img src="./img/3.jpeg" alt="">
  65.             </a>
  66.         </div>
  68.     </section>
  69.     <!-- 右侧功能 -->
  70.     <div class="sidebar">
  71.         <i class="iconfont icon-gouwuche1 color120 font-18 sidebar-bottom"></i>
  72.         <i class="iconfont icon-sousuo color120 font-18 sidebar-bottom"></i>
  73.         <i class="iconfont icon-yonghu color120 font-18 sidebar-bottom"></i>
  74.         <i class="iconfont icon-yonghu color120 font-18 sidebar-bottom"></i>
  75.     </div>
  76.     <!-- 导航 -->
  77.     <section class="daohang">
  78.         <span>首页</span>
  79.         <span>/</span>
  80.         <span>编程书籍</span>
  81.         <span>/</span>
  82.         <span>细说系列</span>
  83.     </section>
  84.     <!-- 标题 -->
  85.     <section class="list-content">
  86.         <div class="list-title">
  87.             细说系列
  88.         </div>
  89.         <div class="list-select">
  90.             <div class="list-select1">
  91.                 <span>排序方式</span>
  92.                 <i class="iconfont icon-htmal5icon03"></i>
  93.             </div>
  94.             <div class="list-select2">
  95.                 <div>新品上市</div>
  96.                 <div>销量从高到低</div>
  97.                 <div>销量从低到高</div>
  98.                 <div>价格从高到低</div>
  99.                 <div>价格从低到高</div>
  100.             </div>
  102.         </div>
  103.     </section>
  104.     <!-- 商品 -->
  105.     <section class="list-goods">
  106.         <div class="list-goods-card">
  107.             <img src="./img/pro01.jpg" alt="">
  108.             <p style="font-size: 12px;">【细说】细说PHP</p>
  109.             <p class="list-price">￥159.00</p>
  110.         </div>
  111.         <div class="list-goods-card">
  112.             <img src="./img/pro01.jpg" alt="">
  113.             <p style="font-size: 12px;">【细说】细说PHP</p>
  114.             <p class="list-price">￥159.00</p>
  115.         </div>
  116.         <div class="list-goods-card">
  117.             <img src="./img/pro01.jpg" alt="">
  118.             <p style="font-size: 12px;">【细说】细说PHP</p>
  119.             <p class="list-price">￥159.00</p>
  120.         </div>
  121.         <div class="list-goods-card">
  122.             <img src="./img/pro01.jpg" alt="">
  123.             <p style="font-size: 12px;">【细说】细说PHP</p>
  124.             <p class="list-price">￥159.00</p>
  125.         </div>
  126.     </section>
  128.     <!-- 底部 -->
  129.     <footer>
  130.         <section class="shouhou">
  131.             <div class="shouhou-card">
  132.                 <img src="./img/foot1.png" alt="">
  133.                 <p class="font-14">7天无理由退货</p>
  134.             </div>
  135.             <div class="shouhou-card">
  136.                 <img src="./img/foot2.png" alt="">
  137.                 <p class="font-14">15天免费换货</p>
  138.             </div>
  139.             <div class="shouhou-card">
  140.                 <img src="./img/foot3.png" alt="">
  141.                 <p class="font-14">满599包邮</p>
  142.             </div>
  143.             <div class="shouhou-card4">
  144.                 <img src="./img/foot4.png" alt="">
  145.                 <p class="font-14">手机特色服务</p>
  146.             </div>
  147.         </section>
  148.         <section class="footer">
  149.             <p>最家家居©2013-2017公司版权所有 京ICP备080100-44备0000111000号</p>
  150.             <p>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
  151.         </section>
  152.     </footer>
  154. </body>
  155. </html>

商品详情html代码

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <link rel="stylesheet" href="./css/base.css">
  7.     <link rel="stylesheet" href="./font/iconfont.css">
  8.     <link rel="stylesheet" href="./css/index.css">
  9.     <link rel="stylesheet" href="./css/list.css">
  10.     <link rel="stylesheet" href="./css/info.css">
  11.     <title>商品详情页面</title>
  12. </head>
  13. <body>
  14.     <!-- 头部 -->
  15.     <header class="flex-between container margin-auto">
  16.         <div>
  17.             <img src="./img/logo.png" alt="" class="width-80">
  18.         </div>
  19.         <div class="flex-center">
  20.             <a href="#" class="margin-top-5 font-15">登录</a>
  21.             <span class="margin-top-5">｜</span>
  22.             <a href="#" class="margin-top-5 font-15">注册</a>
  23.             <div class="border-bottom-black-1 margin-left-10 padding-lr-5">
  24.                 <input type="text" name="search" placeholder="热门搜索：细说php" id="search" class="border-none">
  25.                 <label for="search"><a href=""><i class="iconfont icon-sousuo color120"></i></a></label>
  26.             </div>
  27.             <div class="margin-top-5">
  28.                 <a href=""><i class="iconfont icon-yonghu color120 margin-left-15 font-18"></i></a>
  29.                 <a href=""><i class="iconfont icon-erweima color120 margin-left-10 font-18"></i></a>
  30.                 <a href=""><i class="iconfont icon-gouwuche1 color120 margin-left-10 font-18"></i></a>
  32.             </div>
  34.         </div>
  35.     </header>
  36.     <!-- 导航 -->
  37.     <nav class="margin-top-20">
  38.         <ul class="flex-center">
  39.             <li class="margin-lr-20 border-bottom-red-2">首页</li>
  40.             <li class="margin-lr-20 border-bottom-red-2">编程图书
  41.                 <section class="margin-top-12">
  42.                     <ul>
  43.                         <li>细说PHP</li>
  44.                         <li>细说PHP</li>
  45.                         <li>细说PHP</li>
  46.                         <li>细说PHP</li>
  47.                     </ul>
  48.                 </section>
  49.             </li>
  50.             <li class="margin-lr-20 border-bottom-red-2">算法图书</li>
  51.             <li class="margin-lr-20 border-bottom-red-2">AI图书</li>
  52.             <li class="margin-lr-20 border-bottom-red-2">人工智能</li>
  53.         </ul>
  54.     </nav>
  55.     <!-- 轮播图 -->
  56.     <section class="width-100 overflow-hiden banner">
  57.         <div class="banner-paused">
  58.             <a href="">
  59.                 <img src="./img/001.jpeg" alt="">
  60.             </a>
  61.             <a href="">
  62.                 <img src="./img/2.jpeg" alt="">
  63.             </a>
  64.             <a href="">
  65.                 <img src="./img/3.jpeg" alt="">
  66.             </a>
  67.         </div>
  69.     </section>
  70.     <!-- 右侧功能 -->
  71.     <div class="sidebar">
  72.         <i class="iconfont icon-gouwuche1 color120 font-18 sidebar-bottom"></i>
  73.         <i class="iconfont icon-sousuo color120 font-18 sidebar-bottom"></i>
  74.         <i class="iconfont icon-yonghu color120 font-18 sidebar-bottom"></i>
  75.         <i class="iconfont icon-yonghu color120 font-18 sidebar-bottom"></i>
  76.     </div>
  77.     <!-- 导航 -->
  78.     <section class="daohang">
  79.         <span>首页</span>
  80.         <span>/</span>
  81.         <span>编程书籍</span>
  82.         <span>/</span>
  83.         <span>细说系列</span>
  84.         <span>/</span>
  85.         <span>细说php</span>
  86.     </section>
  87.     <!-- 大图及购买 -->
  88.     <section class="flex-between width-80 margin-auto margin-top-40">
  89.         <div class="width-50">
  90.             <div>
  91.                 <img src="./img/proDet01_big.jpg" alt="" >
  92.             </div>
  93.             <div class="flex-start">
  94.                 <img src="./img/proDet01.jpg" alt="">
  95.                 <img src="./img/proDet01.jpg" alt="">
  96.                 <img src="./img/proDet01.jpg" alt="">
  97.                 <img src="./img/proDet01.jpg" alt="">
  98.             </div>
  99.         </div>
  100.         <div class="width-50">
  101.             <div class="border-bottom-black-1">
  102.                 <h2>[细说] 细说PHP</h2>
  103.                 <p class="font-12 color-8c8c8c margin-top-20">【破损补寄】【适合放室内、卧室、书房、餐桌、办公室、客厅、电视柜等地方】【无理由退换货】【包邮】【白色现代简约花瓶】</p>
  104.                 <span class="color120 font-weight-bold font-16 margin-bottom-40 block margin-top-20">￥ 159.00</span>
  105.             </div>
  106.             <div class="border-bottom-black-1">
  107.                 <p class="margin-top-20">颜色分类</p>
  108.                 <div class="flex-start margin-bottom-20 margin-top-12">
  109.                     <img src="./img/proDet01.jpg" alt="" class="img-color">
  110.                     <img src="./img/proDet01.jpg" alt="" class="img-color margin-left-15">
  111.                     <img src="./img/proDet01.jpg" alt="" class="img-color margin-left-15">
  112.                     <img src="./img/proDet01.jpg" alt="" class="img-color margin-left-15">
  113.                 </div>
  114.                 <p>
  115.                     数量 库存 <span class="color120">2000</span> 件
  116.                 </p>
  117.                 <div class="fuhao margin-bottom-40 margin-top-20">
  118.                     <span class="mouse-point">-</span>
  119.                     <input type="text" value="1" class="book-number">
  120.                     <span class="mouse-point">+</span>
  121.                 </div>
  123.             </div>
  124.             <div class="margin-top-40 flex-around">
  125.                 <button class="goumai">立即购买</button>
  126.                 <button class="gouwuche">加入购物车</button>
  127.             </div>
  129.         </div>
  130.     </section>
  131.     <!-- 商品详情 -->
  132.     <section class="width-80 margin-auto margin-top-40 flex-between">
  133.         <div style="width: 950px;">
  134.             <nav class="border-top-ccc-1 padding-10">
  135.                 <a href="" class="font-12 font-weight-bold border-bottom-120 padding-10">商品详情</a>
  136.                 <a href="" class="margin-left-15 font-12 padding-10">所有评价</a>
  137.             </nav>
  138.             <div class="border-top-ccc-1">
  139.                 <img src="./img/det01.jpg" alt="">
  140.                 <img src="./img/det01.jpg" alt="">
  141.                 <img src="./img/det01.jpg" alt="">
  142.                 <img src="./img/det01.jpg" alt="">
  143.                 <img src="./img/det01.jpg" alt="">
  144.             </div>
  145.         </div>
  147.         <div class="tuijian">
  148.             <p class="tuijian-text">为您推荐</p>
  149.             <div class="padding-lr-10 margin-top-12">
  150.                 <img src="./img/see01.jpg" alt="">
  151.                 <p>【细说】细说PHP</p>
  152.                 <p class="margin-top-5">￥158.00</p>
  153.             </div>
  154.             <div class="padding-lr-10 margin-top-12">
  155.                 <img src="./img/see01.jpg" alt="">
  156.                 <p>【细说】细说PHP</p>
  157.                 <p class="margin-top-5">￥158.00</p>
  158.             </div>
  159.             <div class="padding-lr-10 margin-top-12">
  160.                 <img src="./img/see01.jpg" alt="">
  161.                 <p>【细说】细说PHP</p>
  162.                 <p class="margin-top-5">￥158.00</p>
  163.             </div>
  164.             <div class="padding-lr-10 margin-top-12 margin-bottom-20">
  165.                 <img src="./img/see01.jpg" alt="">
  166.                 <p>【细说】细说PHP</p>
  167.                 <p class="margin-top-5">￥158.00</p>
  168.             </div>
  169.         </div>
  170.     </section>
  171.     <!-- 猜你喜欢 -->
  172.     <section class="xihuan">
  173.         <p class="font-18">猜你喜欢</p>
  174.         <div class="flex-around margin-bottom-40">
  175.             <div class="jiantou"><</div>
  176.             <div>
  177.                 <img src="./img/like04.jpg" alt="">
  178.                 <p class="font-14 margin-top-20">【细说】细说PHP</p>
  179.                 <p class="font-14 margin-top-12 color120">￥158.00</p> 
  180.             </div>
  181.             <div>
  182.                 <img src="./img/like04.jpg" alt="">
  183.                 <p class="font-14 margin-top-20">【细说】细说PHP</p>
  184.                 <p class="font-14 margin-top-12 color120">￥158.00</p> 
  185.             </div>
  186.             <div>
  187.                 <img src="./img/like04.jpg" alt="">
  188.                 <p class="font-14 margin-top-20">【细说】细说PHP</p>
  189.                 <p class="font-14 margin-top-12 color120">￥158.00</p> 
  190.             </div>
  191.             <div>
  192.                 <img src="./img/like04.jpg" alt="">
  193.                 <p class="font-14 margin-top-20">【细说】细说PHP</p>
  194.                 <p class="font-14 margin-top-12 color120">￥158.00</p> 
  195.             </div>
  196.             <div class="jiantou">></div>
  197.         </div>
  198.     </section>
  199.     <!-- 底部 -->
  200.     <footer>
  201.         <section class="shouhou">
  202.             <div class="shouhou-card">
  203.                 <img src="./img/foot1.png" alt="">
  204.                 <p class="font-14">7天无理由退货</p>
  205.             </div>
  206.             <div class="shouhou-card">
  207.                 <img src="./img/foot2.png" alt="">
  208.                 <p class="font-14">15天免费换货</p>
  209.             </div>
  210.             <div class="shouhou-card">
  211.                 <img src="./img/foot3.png" alt="">
  212.                 <p class="font-14">满599包邮</p>
  213.             </div>
  214.             <div class="shouhou-card4">
  215.                 <img src="./img/foot4.png" alt="">
  216.                 <p class="font-14">手机特色服务</p>
  217.             </div>
  218.         </section>
  219.         <section class="footer">
  220.             <p>最家家居©2013-2017公司版权所有 京ICP备080100-44备0000111000号</p>
  221.             <p>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
  222.         </section>
  223.     </footer>
  225. </body>
  226. </html>
上一条：避坑指南：分享云虚拟主机选择心得及使用感受下一条：localstroage的保存用户设置
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议