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="./css/order.css">
  13. </head>
  14. <body>
  15.     <!--头部标签开始-->
  16.     <header class=" container d-flex jusify-content-between">
  17.         <div class="">
  18.             <img src="./img/logo.png" alt="">
  19.         </div>
  20.         <div class=" d-flex jusify-content-between align-items-center">
  21.             <div class="px-3">
  22.                 <a href="" class="fontSize14">登录</a>
  23.                 <span>|</span>
  24.                 <a href="" class="fontSize14">注册</a>
  25.             </div>
  26.             <div class="pl-2 border-bottom border-black py-1">
  27.                 <form action="">
  28.                     <input type="search" class="border-0" placeholder="热门搜索:细说php" name="" id="">
  29.                     <button class="header-button iconfont border-0 bg-transparent textColorRed120 icon-sousuo"></button>
  30.                 </form>
  31.             </div>
  32.             <div class="px-3 header-icon d-flex align-items-center">
  33.                 <i class="iconfont icon-31wode textColorRed120"></i>
  34.                 <i class="iconfont icon-erweima textColorRed120"></i>
  35.                 <i class="iconfont icon-gouwuchekong textColorRed120"></i>
  36.             </div>
  37.         </div>
  38.     </header>
  39.     <!--导航栏-->
  40.     <nav class="container-full ">
  41.         <ul class="d-flex  w-40 m-auto text-center">
  42.             <li class="py-2 px-4 mx-3"><a href="" class="fontSize14">首页</a></li>
  43.             <li class="py-2 px-4 mx-3">
  44.                 <a href="" class="fontSize14">编程图书</a>
  45.                 <section class="w-100 position-absolute left-0">
  46.                     <ul class="d-flex w-40 m-auto">
  47.                         <li class="py-2 px-4 mx-3"><a href="" class="text-white">细说PHP</a></li>
  48.                         <li class="py-2 px-4 mx-3"><a href=" " class="text-white">细说PHP</a></li>
  49.                         <li class="py-2 px-4 mx-3"><a href="" class="text-white">细说PHP</a></li>
  50.                         <li class="py-2 px-4 mx-3"><a href="" class="text-white">细说PHP</a></li>
  51.                     </ul>
  52.                 </section>
  53.             </li>
  54.             <li class="py-2 px-4 mx-3"><a href="" class="fontSize14">算法图书</a></li>
  55.             <li class="py-2 px-4 mx-3"><a href="" class="fontSize14">AI图书</a></li>
  56.             <li class="py-2 px-4 mx-3"><a href="" class="fontSize14">人工智能 </a></li>
  57.         </ul>
  58.     </nav>
  59. <!--导航-->
  60.     <section class="banner container-full overflow-hidden border border-box">
  61.         <div class="d-flex w-300">
  62.             <img src="../项目/img/001.jpeg" alt="" class="w-100">
  63.             <img src="../项目/img/2.jpeg" class="w-100" alt="">
  64.             <img src="../项目/img/3.jpeg" class="w-100" alt="">
  65.         </div>
  66.     </section>
  67. <!--侧边栏-->
  68.     <aside class="posetion-fixed right-10 d-flex flex-column jusify-content-between">
  69.         <div class="iconfont border p-3 bg-db cursor textColorRed120 icon-gouwuchekong"></div>
  70.         <div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-sousuo"></div>
  71.         <div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-31wode"></div>
  72.         <div class="iconfont border p-3 bg-db cursor textColorRed120 mt-1 icon-erweima"></div>
  73.     </aside>
  74. <!--订单确认-->
  75.        <section class="container d-flex  py-2 jusify-content-between align-items-center" >
  76.          <div class="fontSize16">订单确认</div>
  77.             <div>
  78.             <img height="35px"  src="/项目/img/cartTop02.png"/>
  79.             </div>
  80.             <div></div>
  81.         </section>
  82. <!--主体部分-->
  83.        <section class="container d-flex jusify-content-between">
  84.              <section class=" w-60"><!--设置左边宽度-->
  85.                     <div class="d-flex border-bottom align-items-center jusify-content-between py-2">
  86.                     <p class="fontSize14">收件信息</p>
  87.                     <a href="" class="fontSize12">新增地址</a>
  88.                     </div>
  89.                     <div class="mt-2 d-flex flex-wrap jusify-content-between">
  90.                         <div class="w-48 mt-4 border2 border-dark cursor">
  91.                             <div class="d-flex jusify-content-between align-items-center py-2 border-bottom">
  92.                                 <div class="pl-2"><span>张三</span><span>[默认地址]</span></div>
  93.                                 <div class="pr-2">
  94.                                     <a href="">删除</a>
  95.                                     <span>|</span>
  96.                                     <a href="">编辑</a>
  97.                                 </div>
  98.                             </div>
  99.                             <div class="bg-e9 pl-2">
  100.                                 <p class="py-4">河北省 唐山市 路北区 大学生公寓村</p>
  101.                                 <p class="pb-4">15712341234</p>
  102.                             </div>
  103.                         </div>
  104.                         <div class="w-48 mt-4 border2  cursor">
  105.                             <div class="d-flex jusify-content-between align-items-center py-2 border-bottom">
  106.                                 <div class="pl-2"><span>张三</span><span>[默认地址]</span></div>
  107.                                 <div class="pr-2">
  108.                                     <a href="">删除</a>
  109.                                     <span>|</span>
  110.                                     <a href="">编辑</a>
  111.                                 </div>
  112.                             </div>
  113.                             <div class="bg-e9 pl-2">
  114.                                 <p class="py-4">河北省 唐山市 路北区 大学生公寓村</p>
  115.                                 <p class="pb-4">15712341234</p>
  116.                             </div>
  117.                         </div>
  118.                         <div class="w-48 mt-4 border2  cursor">
  119.                             <div class="d-flex jusify-content-between align-items-center py-2 border-bottom">
  120.                                 <div class="pl-2"><span>张三</span><span>[默认地址]</span></div>
  121.                                 <div class="pr-2">
  122.                                     <a href="">删除</a>
  123.                                     <span>|</span>
  124.                                     <a href="">编辑</a>
  125.                                 </div>
  126.                             </div>
  127.                             <div class="bg-e9 pl-2">
  128.                                 <p class="py-4">河北省 唐山市 路北区 大学生公寓村</p>
  129.                                 <p class="pb-4">15712341234</p>
  130.                             </div>
  131.                         </div>
  132.                     </div>
  133.                     <div class="my-4">
  134.                         <div class="py-2 border-bottom fontSize16">支付方式</div>
  135.                         <div class="mt-2 py-2 d-flex jusify-content-between">
  136.                             <img src="./img/way01.jpg" class="border2 cursor w-15 border-dark" alt="">
  137.                             <img src="./img/way02.jpg" class="border2 cursor w-15" alt="">
  138.                             <img src="./img/way03.jpg" class="border2 cursor w-15" alt="">
  139.                             <img src="./img/way04.jpg" class="border2 cursor w-15" alt="">
  140.                         </div>
  141.                     </div>
  142.                     <div class="my-4">
  143.                         <div class="py-2 border-bottom fontSize16">选择快递</div>
  144.                         <div class="mt-2 py-2 d-flex jusify-content-between">
  145.                             <span class="w-15 border2  text-center cursor py-2">顺丰快递</span>
  146.                             <span class="w-15 border2 border-dark cursor text-center py-2">百世汇通</span>
  147.                             <span class="w-15 border2 text-center cursor py-2">圆通快递</span>
  148.                             <span class="w-15 border2 text-center cursor py-2">中通快递</span>
  149.                         </div>
  150.                     </div>
  151.                 </section>
  152.                 <section class=" w-35 "><!--右侧宽度-->
  153.                     <div class="bg-f5 px-2">
  154.                         <div class=" d-flex jusify-content-between align-items-center">
  155.                             <p class="fontSize16 py-2">订单内容</p>
  156.                             <a href="" class="fontSize12">返回购物车</a>
  157.                         </div>
  158.                         <div class="d-flex py-2 bg-f5 jusify-content-between align-items-center px-4 border-top">
  159.                             <img src="./img/order01.jpg" alt="">
  160.                             <div class=" w-60">
  161.                                 <p>细说PHP</p>
  162.                                 <p class="py-4 text-777">分类:编程书籍</p>
  163.                                 <p class="text-777">数量： 1</p>
  164.                             </div>
  165.                             <p>￥158.00</p>
  166.                         </div>
  167.                         <div class="d-flex py-2 bg-f5 jusify-content-between align-items-center px-4 border-top">
  168.                             <img src="./img/order01.jpg" alt="">
  169.                             <div class=" w-60">
  170.                                 <p>细说PHP</p>
  171.                                 <p class="py-4 text-777">分类:编程书籍</p>
  172.                                 <p class="text-777">数量： 1</p>
  173.                             </div>
  174.                             <p>￥158.00</p>
  175.                         </div>
  177.                     </div>
  178.                     <div class="px-2 my-4">
  179.                         <div class="d-flex jusify-content-between">
  180.                             <p>商品价格:</p>
  181.                             <p>￥158.00</p>
  182.                         </div>
  183.                         <div class="d-flex my-2 jusify-content-between">
  184.                             <p>优惠价格:</p>
  185.                             <p>￥158.00</p>
  186.                         </div>
  187.                         <div class="d-flex jusify-content-between">
  188.                             <p>运费:</p>
  189.                             <p>￥158.00</p>
  190.                         </div>
  191.                         <div class="border-top my-4"></div>
  192.                         <div class="d-flex jusify-content-between">
  193.                             <p class="fontSize16">合计:</p>
  194.                             <p class="fontSize16 textColorRed120">￥158.00</p>
  195.                         </div>
  196.                     </div>
  197.                     <div class="px-2">
  198.                         <a class="w-100 d-block text-center cursor border-0 text-white bg-dark py-3">去支付</a>
  199.                     </div>
  200.                 </section>
  201.         </section>
  202. <!--    底部标签-->
  203.     <footer class="container-full border-top mt-4 ">
  204.         <section class="container d-flex my-2 jusify-content-around align-items-center">
  205.             <div class="border-right py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
  206.                 <img src="./img/foot1.png" alt="">
  207.                 <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
  208.             </div>
  209.             <div class="border-right py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
  210.                 <img src="./img/foot1.png" alt="">
  211.                 <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
  212.             </div>
  213.             <div class="border-right py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
  214.                 <img src="./img/foot1.png" alt="">
  215.                 <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
  216.             </div>
  217.             <div class=" py-1 flex-grow1 px-2 pr-4 d-flex jusify-content-center align-items-center">
  218.                 <img src="./img/foot1.png" alt="">
  219.                 <p class="pl-1 ml-2 pr-4">7天无理由退货</p>
  220.             </div>
  221.         </section>
  222.         <section class="bg-black text-center py-3">
  223.             <p class="text-white">最家家居©2013-2017公司版权所有 京ICP备080100-44备0000111000号<br/>
  224.                 违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
  225.         </section>
  226.     </footer>
  227. </body>
  228. </html>

更多相关文章

  1. 某商城列表和详情页
  2. 商城列表内容
  3. 商品详情页练习
  4. 我的第一个作业
  5. 第十二课 数组循环
  6. PHP:oop->细说命名空间/命名空间类的自动加载
  7. 【php基础入门】细说PHP中的函数声明与使用详解（重要）
  8. 【php基础入门】细说php的变量以及常量的知识点详解
  9. MySQL日志详细说明

随机推荐

  1. android进度条的样式
  2. android ListView 中getview学习总结
  3. Android(安卓)安装配置及其项目开发
  4. Android启动续-------SystemSever启动
  5. Android自用-----Android中一些关于Activ
  6. Android之路——第二个Android小程序（Andr
  7. Android imageView图片按比例缩放
  8. freescale Android(安卓)Camera 调试总结
  9. Android(安卓)Paint和Color类
  10. android系统中“关于设备”中android版本