欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

某商城登录注册-购物车订单支付-个人中心所有页面

程序员文章站 2022-03-04 08:01:44
...

某商城登录注册-购物车订单支付-个人中心所有页面

核心样式 base.css eduwork.css layout.css 链接 核心css

登录注册

    

  1. @charset "utf-8";
    2. 

  2. .login {
    3. 

  3.     height: 100vh;
    4. 

  4.     background: transparent url("../img/19.jpg") no-repeat;
    5. 

  5.     background-size: 100% 100%;
    6. 

  6. }
    7. 

    8. 

  8. .register {
    9. 

  9.     height: 100vh;
    10. 

  10.     background: transparent url("../img/20.jpg") no-repeat;
    11. 

  11.     background-size: 100% 100%;
    12. 

  12. }
    13. 

    14. 

  14. .login > form, .register > form {
    15. 

  15.     position: fixed;
    16. 

  16.     top: 15%;
    17. 

  17.     right: 10%;
    18. 

  18. }
    19. 

    20. 

  20. .borderGold {
    21. 

  21.     border: 1px solid #f6c090;
    22. 

  22. }
    23. 

    24. 

  24. .bgfef4e5 {
    25. 

  25.     background-color: #fef4e5;
    26. 

  26. }
    27.
  • 登录 login.html
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Ewshop - login</title>
    6. 

  6.     <link rel="stylesheet" href="./css/base.css"/>
    7. 

  7.     <link rel="stylesheet" href="./css/eduwork.css"/>
    8. 

  8.     <link rel="stylesheet" href="./css/layout.css">
    9. 

  9.     <link rel="stylesheet" href="./css/login.css">
    10. 

  10.     <link rel="icon" href="./img/icon.png"/>
    11. 

  11. </head>
    12. 

  12. <body>
    13. 

    14. 

  14. <section class="container-full login">
    15. 

  15.     <form action="" class="bgWhite borderSmColor">
    16. 

  16.         <div class="p-2 border-bottom"><a href="" title="" class="d-block text-center"><img src="./img/logo.png" alt="" class="w-30"></a></div>
    17. 

  17.         <div class="p-4 d-flex flex-column">
    18. 

  18.             <div class="borderGold bgfef4e5 color777 p-2 w-100 border-box">公共场所不建议自动登录，以防账号丢失</div>
    19. 

  19.             <input type="text" name="" id="" class="w-100 my-2 fontSize20 p-1 border-box" placeholder="昵称/手机/邮箱">
    20. 

  20.             <input type="password" name="" id="" class="w-100 my-2 fontSize20 p-1 border-box" placeholder="密码">
    21. 

  21.             <input type="submit" value="提交" class="bgRed textWhite border border-dark mt-2 py-1 w-100 fontSize20">
    22. 

  22.             <p class="text-right">
    23. 

  23.                 <a href="" title="" class="mr-4">免费注册</a>
    24. 

  24.                 <a href="" title="">忘记密码</a>
    25. 

  25.             </p>
    26. 

  26.         </div>
    27. 

  27.     </form>
    28. 

  28. </section>
    29. 

    30. 

  30. </body>
    31. 

  31. </html>
    32.
  • 注册 register.html
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Ewshop - register</title>
    6. 

  6.     <link rel="stylesheet" href="./css/base.css"/>
    7. 

  7.     <link rel="stylesheet" href="./css/eduwork.css"/>
    8. 

  8.     <link rel="stylesheet" href="./css/layout.css">
    9. 

  9.     <link rel="stylesheet" href="./css/login.css">
    10. 

  10.     <link rel="icon" href="./img/icon.png"/>
    11. 

  11. </head>
    12. 

  12. <body>
    13. 

    14. 

  14. <section class="container-full register">
    15. 

  15.     <form action="" class="bgWhite borderSmColor py-4 border w-30">
    16. 

  16.         <div class="border-bottom"><a href="" title="" class="d-block text-center"><img src="./img/logo.png" alt="" class="w-30"></a></div>
    17. 

  17.         <div class="m-4 px-4 d-flex flex-column">
    18. 

  18.             <div class="w-100 text-center">用户注册</div>
    19. 

  19.             <input type="email" name="" id="" class="w-100 my-2 fontSize20 p-1 border-box" placeholder="请输入邮箱">
    20. 

  20.             <input type="password" name="" id="" class="w-100 my-2 fontSize20 p-1 border-box" placeholder="请输入密码">
    21. 

  21.             <input type="password" name="" id="" class="w-100 my-2 fontSize20 p-1 border-box" placeholder="请确认密码">
    22. 

  22.             <div class="d-flex">
    23. 

  23.                 <input type="text" name="" id="" class="w-60 my-2 fontSize20 p-1 border-box" placeholder="验证码">
    24. 

  24.                 <div class="w-30 d-flex align-items-center ml-2"><img src="./img/code.jpg" alt="" ></div>
    25. 

  25.             </div>
    26. 

  26.             <input type="submit" value="注册" class="bgRed textWhite border border-dark mt-2 py-1 w-100 fontSize20">
    27. 

  27.             <span class="fontSize12 my-2">完成此注册，即表明您同意了我们的<a href="" title="" class="fontSize12 textRed"> <使用条款和隐私策略></a></span>
    28. 

  28.             <a href="" title="" class="text-right fontSize12">已有账号登录</a>
    29. 

  29.         </div>
    30. 

  30.     </form>
    31. 

  31. </section>
    32. 

    33. 

  33. </body>
    34. 

  34. </html>
    35.

某商城登录注册-购物车订单支付-个人中心所有页面

某商城登录注册-购物车订单支付-个人中心所有页面

购物车订单支付

  • 购物车 cart.html
    

  1. @charset "utf-8";
    2. 

  2. .w-120px {
    3. 

  3.     width: 120px;
    4. 

  4. }
    5. 

    6. 

  6. .h-40px {
    7. 

  7.     height: 40px;
    8. 

  8. }
    9. 

    10. 

  10. .bgE9 {
    11. 

  11.     background: #e9e9e9;
    12. 

  12. }
    13. 

    14. 

  14. .bg8e {
    15. 

  15.     background: #8e8e8e;
    16. 

  16. }
    17. 

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Ewshop - cart</title>
    6. 

  6.     <link rel="stylesheet" href="./css/base.css"/>
    7. 

  7.     <link rel="stylesheet" href="./css/eduwork.css"/>
    8. 

  8.     <link rel="stylesheet" href="./css/layout.css">
    9. 

  9.     <link rel="stylesheet" href="./css/cart.css">
    10. 

  10.     <link rel="stylesheet" href="//at.alicdn.com/t/font_2946534_nvos7wgzrcf.css">
    11. 

  11.     <link rel="icon" href="./img/icon.png"/>
    12. 

  12. </head>
    13. 

  13. <body>
    14. 

    15. 

  15. <!--头部-->
    16. 

  16. <header class="container d-flex justify-content-between">
    17. 

  17.     <div class="border-0"><img src="./img/logo.png" alt="logo"></div>
    18. 

  18.     <div class="d-flex justify-content-center align-items-center">
    19. 

  19.         <a href="" title="登录" class="fontSize14">登录</a>
    20. 

  20.         <span class="mx-1">|</span>
    21. 

  21.         <a href="" title="注册" class="fontSize14">注册</a>
    22. 

  22.         <form class="d-flex border-bottom py-1 px-2 mx-2" action="">
    23. 

  23.             <input type="text" name="search" placeholder="热门搜索：细说php" class="border-0"/>
    24. 

  24.             <button class="border-0 bg-transparent iconfont icon-sousuo fontSize20 fontIcon120"></button>
    25. 

  25.         </form>
    26. 

  26.         <div class="d-flex justify-content-center align-items-center font">
    27. 

  27.             <i class="iconfont icon-200yonghu_yonghu fontSize20 fontIcon120"></i>
    28. 

  28.             <i class="iconfont icon-erweima fontIcon120 px-2"></i>
    29. 

  29.             <i class="iconfont icon-gouwuchekong fontIcon120"></i>
    30. 

  30.         </div>
    31. 

  31.     </div>
    32. 

  32. </header>
    33. 

    34. 

  34. <!--导航-->
    35. 

  35. <nav class="bcontainer-full">
    36. 

  36.     <ul class="d-flex justify-content-center m-auto">
    37. 

  37.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">首页</a></li>
    38. 

  38.         <li class="mx-4 px-2 py-2">
    39. 

  39.             <a href="#" title="" class="hover">编程图书</a>
    40. 

  40.             <ul class="position-absolute d-flex justify-content-center w-100 left-0 my-2 py-3">
    41. 

  41.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    42. 

  42.                 </li>
    43. 

  43.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    44. 

  44.                 </li>
    45. 

  45.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    46. 

  46.                 </li>
    47. 

  47.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    48. 

  48.                 </li>
    49. 

  49.             </ul>
    50. 

  50.         </li>
    51. 

  51.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">算法图书</a></li>
    52. 

  52.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">AI图书</a></li>
    53. 

  53.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">人工智能</a></li>
    54. 

  54.     </ul>
    55. 

  55. </nav>
    56. 

    57. 

  57. <!--banner-->
    58. 

  58. <section class="banner container-full overflow-hidden">
    59. 

  59.     <div class="d-flex w-300">
    60. 

  60.         <a href="" title="" class="d-block w-100"><img src="./img/001.jpeg" alt="" class="w-100"/></a>
    61. 

  61.         <a href="" title="" class="d-block w-100"><img src="./img/2.jpeg" alt="" class="w-100"/></a>
    62. 

  62.         <a href="" title="" class="d-block w-100"><img src="./img/3.jpeg" alt="" class="w-100"/></a>
    63. 

  63.     </div>
    64. 

  64. </section>
    65. 

    66. 

  66. <!--侧栏-->
    67. 

  67. <aside class="position-fixed right-10 d-flex flex-column jusify-content-between z-index100">
    68. 

  68.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-gouwuchekong"></span>
    69. 

  69.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-sousuo"></span>
    70. 

  70.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-200yonghu_yonghu"></span>
    71. 

  71.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-erweima"></span>
    72. 

  72. </aside>
    73. 

    74. 

  74. <!--购物车-->
    75. 

  75. <section class="container d-flex justify-content-between align-items-center">
    76. 

  76.     <div class="fontSize16">购物车</div>
    77. 

  77.     <div><img src="./img/cartTop01.png" alt=""></div>
    78. 

  78.     <div class="fontSize16">继续购物</div>
    79. 

  79. </section>
    80. 

    81. 

  81. <section class="container">
    82. 

  82.     <section class="d-flex justify-content-between bgDb py-2">
    83. 

  83.         <div class="flex-basis40 text-center fontSize14">商品</div>
    84. 

  84.         <div class="flex-basis10 text-center fontSize14">单价</div>
    85. 

  85.         <div class="flex-basis20 text-center fontSize14">数量</div>
    86. 

  86.         <div class="flex-basis10 text-center fontSize14">小计</div>
    87. 

  87.         <div class="flex-basis10 text-center fontSize14">操作</div>
    88. 

  88.     </section>
    89. 

    90. 

  90.     <section class="d-flex justify-content-between align-items-center my-4 pb-4 border-bottom-dashed borderSmColor">
    91. 

  91.         <div class="flex-basis40 d-flex align-items-center">
    92. 

  92.             <div class="px-2"><input type="checkbox" name="" id="" class="d-inline-block w-20px h-20px"></div>
    93. 

  93.             <div class="px-2"><img src="./img/cart01.jpg" alt="" class="w-120px"></div>
    94. 

  94.             <div>
    95. 

  95.                 <h3 class="mb-3"><a href="" title="">创意现代简约干花花瓶摆件</a></h3>
    96. 

  96.                 <div class="mb-1 color777">图书分类:</div>
    97. 

  97.                 <div class="color777">细说系列</div>
    98. 

  98.             </div>
    99. 

  99.         </div>
    100. 

  100.         <div class="flex-basis10 text-center">￥20.00</div>
    101. 

  101.         <div class="flex-basis20 text-center">数量</div>
    102. 

  102.         <div class="flex-basis10 text-center">小计</div>
    103. 

  103.         <div class="flex-basis10 text-center">操作</div>
    104. 

  104.     </section>
    105. 

    106. 

  106.     <section class="d-flex justify-content-between align-items-center my-4 pb-4">
    107. 

  107.         <div class="flex-basis40 d-flex align-items-center">
    108. 

  108.             <div class="px-2"><input type="checkbox" name="" id="" class="d-inline-block w-20px h-20px"></div>
    109. 

  109.             <div class="px-2"><img src="./img/cart01.jpg" alt="" class="w-120px"></div>
    110. 

  110.             <div>
    111. 

  111.                 <h3 class="mb-3"><a href="" title="">创意现代简约干花花瓶摆件</a></h3>
    112. 

  112.                 <div class="mb-1 color777">图书分类:</div>
    113. 

  113.                 <div class="color777">细说系列</div>
    114. 

  114.             </div>
    115. 

  115.         </div>
    116. 

  116.         <div class="flex-basis10 text-center">￥20.00</div>
    117. 

  117.         <div class="flex-basis20 text-center">数量</div>
    118. 

  118.         <div class="flex-basis10 text-center">小计</div>
    119. 

  119.         <div class="flex-basis10 text-center">操作</div>
    120. 

  120.     </section>
    121. 

    122. 

  122.     <section class="d-flex justify-content-between align-items-center bgE9">
    123. 

  123.         <div class="d-flex ml-2 align-items-center h-100">
    124. 

  124.             <input type="checkbox" name="" id="" class="d-inline-block w-20px h-20px">
    125. 

  125.             <a href="javascript:;" title="" class="mx-3 fontSize12">全选</a>
    126. 

  126.             <a href="javascript:;" title="" class="fontSize12">删除</a>
    127. 

  127.         </div>
    128. 

  128.         <div class="d-flex justify-content-end align-items-center h-100 w-30">
    129. 

  129.             <div>共<span class="textRed">0</span>件商品</div>
    130. 

  130.             <div class="mx-4 px-4">合计: <span class="textRed">￥0.00</span></div>
    131. 

  131.             <a href="" title="" class="w-40 py-2 bg8e text-center textWhite">结算</a>
    132. 

  132.         </div>
    133. 

  133.     </section>
    134. 

  134. </section>
    135. 

    136. 

  136. <!--底部-->
    137. 

  137. <footer class="container-full border-top mt-4">
    138. 

  138.     <!--上部分-->
    139. 

  139.     <section class="container d-flex justify-content-around">
    140. 

  140.         <div class="d-flex align-items-center">
    141. 

  141.             <img src="./img/foot1.png" alt="" class="w-53px">
    142. 

  142.             <span class="ml-2 fontSize14">7天无理由退货</span>
    143. 

  143.         </div>
    144. 

  144.         <div class="border-right"></div>
    145. 

  145.         <div class="d-flex align-items-center">
    146. 

  146.             <img src="./img/foot2.png" alt="" class="w-53px">
    147. 

  147.             <span class="ml-2 fontSize14">15天免费换货</span>
    148. 

  148.         </div>
    149. 

  149.         <div class="border-right"></div>
    150. 

  150.         <div class="d-flex align-items-center">
    151. 

  151.             <img src="./img/foot3.png" alt="" class="w-53px">
    152. 

  152.             <span class="ml-2 fontSize14">满599包邮</span>
    153. 

  153.         </div>
    154. 

  154.         <div class="border-right"></div>
    155. 

  155.         <div class="d-flex align-items-center">
    156. 

  156.             <img src="./img/foot4.png" alt="" class="w-53px">
    157. 

  157.             <span class="ml-2 fontSize14">手机特色服务</span>
    158. 

  158.         </div>
    159. 

  159.     </section>
    160. 

    161. 

  161.     <!--下部分-->
    162. 

  162.     <section class="p-4 bgBlack text-center textWhite">
    163. 

  163.         <div>最家家居©2013-2017公司版权所有 京ICP备080100-44备0000111000号</div>
    164. 

  164.         <div>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
    165. 

  165.     </section>
    166. 

  166. </footer>
    167. 

    168. 

  168. </body>
    169. 

  169. </html>
    170.

某商城登录注册-购物车订单支付-个人中心所有页面

  • 订单 order.html
    

  1. @charset "utf-8";
    2. 

  2. .bgE9 {
    3. 

  3.     background-color: #e9e9e9;
    4. 

  4. }
    5. 

  5. .flex-basis48 {
    6. 

  6.     flex-basis: 48%;
    7. 

  7. }
    8. 

  8. .w-87px {
    9. 

  9.     width: 87px;
    10. 

  10. }
    11. 

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Ewshop - order</title>
    6. 

  6.     <link rel="stylesheet" href="./css/base.css"/>
    7. 

  7.     <link rel="stylesheet" href="./css/eduwork.css"/>
    8. 

  8.     <link rel="stylesheet" href="./css/layout.css">
    9. 

  9.     <link rel="stylesheet" href="./css/order.css">
    10. 

  10.     <link rel="stylesheet" href="//at.alicdn.com/t/font_2946534_nvos7wgzrcf.css">
    11. 

  11.     <link rel="icon" href="./img/icon.png"/>
    12. 

  12. </head>
    13. 

  13. <body>
    14. 

    15. 

  15. <!--头部-->
    16. 

  16. <header class="container d-flex justify-content-between">
    17. 

  17.     <div class="border-0"><img src="./img/logo.png" alt="logo"></div>
    18. 

  18.     <div class="d-flex justify-content-center align-items-center">
    19. 

  19.         <a href="" title="登录" class="fontSize14">登录</a>
    20. 

  20.         <span class="mx-1">|</span>
    21. 

  21.         <a href="" title="注册" class="fontSize14">注册</a>
    22. 

  22.         <form class="d-flex border-bottom py-1 px-2 mx-2" action="">
    23. 

  23.             <input type="text" name="search" placeholder="热门搜索：细说php" class="border-0"/>
    24. 

  24.             <button class="border-0 bg-transparent iconfont icon-sousuo fontSize20 fontIcon120"></button>
    25. 

  25.         </form>
    26. 

  26.         <div class="d-flex justify-content-center align-items-center font">
    27. 

  27.             <i class="iconfont icon-200yonghu_yonghu fontSize20 fontIcon120"></i>
    28. 

  28.             <i class="iconfont icon-erweima fontIcon120 px-2"></i>
    29. 

  29.             <i class="iconfont icon-gouwuchekong fontIcon120"></i>
    30. 

  30.         </div>
    31. 

  31.     </div>
    32. 

  32. </header>
    33. 

    34. 

  34. <!--导航-->
    35. 

  35. <nav class="bcontainer-full">
    36. 

  36.     <ul class="d-flex justify-content-center m-auto">
    37. 

  37.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">首页</a></li>
    38. 

  38.         <li class="mx-4 px-2 py-2">
    39. 

  39.             <a href="#" title="" class="hover">编程图书</a>
    40. 

  40.             <ul class="position-absolute d-flex justify-content-center w-100 left-0 my-2 py-3">
    41. 

  41.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    42. 

  42.                 </li>
    43. 

  43.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    44. 

  44.                 </li>
    45. 

  45.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    46. 

  46.                 </li>
    47. 

  47.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    48. 

  48.                 </li>
    49. 

  49.             </ul>
    50. 

  50.         </li>
    51. 

  51.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">算法图书</a></li>
    52. 

  52.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">AI图书</a></li>
    53. 

  53.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">人工智能</a></li>
    54. 

  54.     </ul>
    55. 

  55. </nav>
    56. 

    57. 

  57. <!--banner-->
    58. 

  58. <section class="banner container-full overflow-hidden">
    59. 

  59.     <div class="d-flex w-300">
    60. 

  60.         <a href="" title="" class="d-block w-100"><img src="./img/001.jpeg" alt="" class="w-100"/></a>
    61. 

  61.         <a href="" title="" class="d-block w-100"><img src="./img/2.jpeg" alt="" class="w-100"/></a>
    62. 

  62.         <a href="" title="" class="d-block w-100"><img src="./img/3.jpeg" alt="" class="w-100"/></a>
    63. 

  63.     </div>
    64. 

  64. </section>
    65. 

    66. 

  66. <!--侧栏-->
    67. 

  67. <aside class="position-fixed right-10 d-flex flex-column jusify-content-between z-index100">
    68. 

  68.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-gouwuchekong"></span>
    69. 

  69.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-sousuo"></span>
    70. 

  70.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-200yonghu_yonghu"></span>
    71. 

  71.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-erweima"></span>
    72. 

  72. </aside>
    73. 

    74. 

  74. <!--订单确认-->
    75. 

  75. <section class="container d-flex justify-content-between align-items-center p-2">
    76. 

  76.     <div class="fontSize16">订单确认</div>
    77. 

  77.     <div><img src="./img/cartTop02.png" alt=""></div>
    78. 

  78.     <div></div>
    79. 

  79. </section>
    80. 

    81. 

  81. <section class="container d-flex justify-content-between">
    82. 

  82.     <section class="flex-basis60 pl-2">
    83. 

  83.         <section class="d-flex justify-content-between py-2 border-bottom">
    84. 

  84.             <div class="fontSize16">收件信息</div>
    85. 

  85.             <div>新增地址</div>
    86. 

  86.         </section>
    87. 

  87.         <section class="d-flex flex-wrap justify-content-between">
    88. 

  88.             <div class="border2 border-dark flex-basis48 mt-4 cursor">
    89. 

  89.                 <div class="border-bottom d-flex justify-content-between align-items-center">
    90. 

  90.                     <div class="d-flex px-2">
    91. 

  91.                         <p class="mr-4">张三</p>
    92. 

  92.                         <p>[默认地址]</p>
    93. 

  93.                     </div>
    94. 

  94.                     <div class="d-flex px-2">
    95. 

  95.                         <a href="javascript:;" title="" class="fontSize12">删除</a>
    96. 

  96.                         <span class="mx-2">|</span>
    97. 

  97.                         <a href="javascript:;" title="" class="fontSize12">编辑</a>
    98. 

  98.                     </div>
    99. 

  99.                 </div>
    100. 

  100.                 <div class="p-2 bgE9">
    101. 

  101.                     <p>河北省 唐山市 路北区 大学生公寓村</p>
    102. 

  102.                     <p>15732570937</p>
    103. 

  103.                 </div>
    104. 

  104.             </div>
    105. 

    106. 

  106.             <div class="border2 flex-basis48 mt-4 cursor">
    107. 

  107.                 <div class="border-bottom d-flex justify-content-between align-items-center">
    108. 

  108.                     <div class="d-flex px-2">
    109. 

  109.                         <p class="mr-4">张三</p>
    110. 

  110.                         <p>[默认地址]</p>
    111. 

  111.                     </div>
    112. 

  112.                     <div class="d-flex px-2">
    113. 

  113.                         <a href="javascript:;" title="" class="fontSize12">删除</a>
    114. 

  114.                         <span class="mx-2">|</span>
    115. 

  115.                         <a href="javascript:;" title="" class="fontSize12">编辑</a>
    116. 

  116.                     </div>
    117. 

  117.                 </div>
    118. 

  118.                 <div class="p-2 bgE9">
    119. 

  119.                     <p>河北省 唐山市 路北区 大学生公寓村</p>
    120. 

  120.                     <p>15732570937</p>
    121. 

  121.                 </div>
    122. 

  122.             </div>
    123. 

    124. 

  124.             <div class="border2 flex-basis48 mt-4 cursor">
    125. 

  125.                 <div class="border-bottom d-flex justify-content-between align-items-center">
    126. 

  126.                     <div class="d-flex px-2">
    127. 

  127.                         <p class="mr-4">张三</p>
    128. 

  128.                         <p>[默认地址]</p>
    129. 

  129.                     </div>
    130. 

  130.                     <div class="d-flex px-2">
    131. 

  131.                         <a href="javascript:;" title="" class="fontSize12">删除</a>
    132. 

  132.                         <span class="mx-2">|</span>
    133. 

  133.                         <a href="javascript:;" title="" class="fontSize12">编辑</a>
    134. 

  134.                     </div>
    135. 

  135.                 </div>
    136. 

  136.                 <div class="p-2 bgE9">
    137. 

  137.                     <p>河北省 唐山市 路北区 大学生公寓村</p>
    138. 

  138.                     <p>15732570937</p>
    139. 

  139.                 </div>
    140. 

  140.             </div>
    141. 

    142. 

  142.         </section>
    143. 

    144. 

  144.         <section class="mt-4">
    145. 

  145.             <div class="border-bottom py-2 mb-4 fontSize16">支付方式</div>
    146. 

  146.             <div class="d-flex justify-content-between">
    147. 

  147.                 <img src="./img/way01.jpg" alt="" class="border2 flex-basis15 cursor border-dark">
    148. 

  148.                 <img src="./img/way02.jpg" alt="" class="border2 cursor flex-basis15">
    149. 

  149.                 <img src="./img/way03.jpg" alt="" class="border2 cursor flex-basis15">
    150. 

  150.                 <img src="./img/way04.jpg" alt="" class="border2 cursor flex-basis15">
    151. 

  151.             </div>
    152. 

  152.         </section>
    153. 

    154. 

  154.         <section class="mt-4">
    155. 

  155.             <div class="border-bottom py-2 mb-4 fontSize16">选择快递</div>
    156. 

  156.             <div class="d-flex justify-content-between">
    157. 

  157.                 <div class="border2 flex-basis15 border-dark text-center px-3 py-2 cursor">顺丰快递</div>
    158. 

  158.                 <div class="border2 flex-basis15 text-center px-3 py-2 cursor">百世汇通</div>
    159. 

  159.                 <div class="border2 flex-basis15 text-center px-3 py-2 cursor">圆通快递</div>
    160. 

  160.                 <div class="border2 flex-basis15 text-center px-3 py-2 cursor">中通快递</div>
    161. 

  161.             </div>
    162. 

  162.         </section>
    163. 

    164. 

  164.     </section>
    165. 

    166. 

  166.     <section class="flex-basis35">
    167. 

  167.         <div class="bgColor">
    168. 

  168.             <div class="d-flex justify-content-between p-2">
    169. 

  169.                 <div class="fontSize16">订单内容</div>
    170. 

  170.                 <a href="" title="" class="fontSize12">返回购物车</a>
    171. 

  171.             </div>
    172. 

    173. 

  173.             <div class="border-top mx-2 p-2 d-flex justify-content-between align-items-center">
    174. 

  174.                 <div class="d-flex align-items-center">
    175. 

  175.                     <img src="./img/order01.jpg" alt="" class="w-87px">
    176. 

  176.                     <div class="ml-2">
    177. 

  177.                         <p>创意现代简约干花花瓶摆件</p>
    178. 

  178.                         <p class="color777">颜色分类：烟灰色玻璃瓶</p>
    179. 

  179.                         <p class="color777">数量：1</p>
    180. 

  180.                     </div>
    181. 

  181.                 </div>
    182. 

  182.                 <div>￥158.00</div>
    183. 

  183.             </div>
    184. 

    185. 

  185.             <div class="border-top mx-2 p-2 d-flex justify-content-between align-items-center">
    186. 

  186.                 <div class="d-flex align-items-center">
    187. 

  187.                     <img src="./img/order01.jpg" alt="" class="w-87px">
    188. 

  188.                     <div class="ml-2">
    189. 

  189.                         <p>创意现代简约干花花瓶摆件</p>
    190. 

  190.                         <p class="color777">颜色分类：烟灰色玻璃瓶</p>
    191. 

  191.                         <p class="color777">数量：1</p>
    192. 

  192.                     </div>
    193. 

  193.                 </div>
    194. 

  194.                 <div>￥158.00</div>
    195. 

  195.             </div>
    196. 

  196.         </div>
    197. 

    198. 

  198.         <div class="my-3">
    199. 

  199.             <div class="d-flex justify-content-between my-2">
    200. 

  200.                 <span>商品价格:</span>
    201. 

  201.                 <span>￥158.00</span>
    202. 

  202.             </div>
    203. 

  203.             <div class="d-flex justify-content-between my-2">
    204. 

  204.                 <span>优惠价格:</span>
    205. 

  205.                 <span>￥0.00</span>
    206. 

  206.             </div>
    207. 

  207.             <div class="d-flex justify-content-between my-2">
    208. 

  208.                 <span>运费:</span>
    209. 

  209.                 <span>免运费</span>
    210. 

  210.             </div>
    211. 

  211.         </div>
    212. 

    213. 

  213.         <div class="border-top">
    214. 

  214.             <div class="d-flex justify-content-between fontSize16 py-3">
    215. 

  215.                 <span>合计：</span>
    216. 

  216.                 <span class="textRed">￥158.00</span>
    217. 

  217.             </div>
    218. 

  218.             <a href="javascript:;" title="" class="d-block text-center bgRed textWhite py-3">去支付</a>
    219. 

  219.         </div>
    220. 

  220.     </section>
    221. 

  221. </section>
    222. 

    223. 

  223. <!--底部-->
    224. 

  224. <footer class="container-full border-top mt-4">
    225. 

  225.     <!--上部分-->
    226. 

  226.     <section class="container d-flex justify-content-around">
    227. 

  227.         <div class="d-flex align-items-center">
    228. 

  228.             <img src="./img/foot1.png" alt="" class="w-53px">
    229. 

  229.             <span class="ml-2 fontSize14">7天无理由退货</span>
    230. 

  230.         </div>
    231. 

  231.         <div class="border-right"></div>
    232. 

  232.         <div class="d-flex align-items-center">
    233. 

  233.             <img src="./img/foot2.png" alt="" class="w-53px">
    234. 

  234.             <span class="ml-2 fontSize14">15天免费换货</span>
    235. 

  235.         </div>
    236. 

  236.         <div class="border-right"></div>
    237. 

  237.         <div class="d-flex align-items-center">
    238. 

  238.             <img src="./img/foot3.png" alt="" class="w-53px">
    239. 

  239.             <span class="ml-2 fontSize14">满599包邮</span>
    240. 

  240.         </div>
    241. 

  241.         <div class="border-right"></div>
    242. 

  242.         <div class="d-flex align-items-center">
    243. 

  243.             <img src="./img/foot4.png" alt="" class="w-53px">
    244. 

  244.             <span class="ml-2 fontSize14">手机特色服务</span>
    245. 

  245.         </div>
    246. 

  246.     </section>
    247. 

    248. 

  248.     <!--下部分-->
    249. 

  249.     <section class="p-4 bgBlack text-center textWhite">
    250. 

  250.         <div>最家家居©2013-2017公司版权所有 京ICP备080100-44备0000111000号</div>
    251. 

  251.         <div>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
    252. 

  252.     </section>
    253. 

  253. </footer>
    254. 

    255. 

  255. </body>
    256. 

  256. </html>
    257.

某商城登录注册-购物车订单支付-个人中心所有页面

  • 支付完成 pay.html
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Ewshop - info</title>
    6. 

  6.     <link rel="stylesheet" href="./css/base.css"/>
    7. 

  7.     <link rel="stylesheet" href="./css/eduwork.css"/>
    8. 

  8.     <link rel="stylesheet" href="./css/layout.css">
    9. 

  9.     <link rel="stylesheet" href="./css/info.css">
    10. 

  10.     <link rel="stylesheet" href="//at.alicdn.com/t/font_2946534_nvos7wgzrcf.css">
    11. 

  11.     <link rel="icon" href="./img/icon.png"/>
    12. 

  12. </head>
    13. 

  13. <body>
    14. 

    15. 

  15. <!--头部-->
    16. 

  16. <header class="container d-flex justify-content-between">
    17. 

  17.     <div class="border-0"><img src="./img/logo.png" alt="logo"></div>
    18. 

  18.     <div class="d-flex justify-content-center align-items-center">
    19. 

  19.         <a href="" title="登录" class="fontSize14">登录</a>
    20. 

  20.         <span class="mx-1">|</span>
    21. 

  21.         <a href="" title="注册" class="fontSize14">注册</a>
    22. 

  22.         <form class="d-flex border-bottom py-1 px-2 mx-2" action="">
    23. 

  23.             <input type="text" name="search" placeholder="热门搜索：细说php" class="border-0"/>
    24. 

  24.             <button class="border-0 bg-transparent iconfont icon-sousuo fontSize20 fontIcon120"></button>
    25. 

  25.         </form>
    26. 

  26.         <div class="d-flex justify-content-center align-items-center font">
    27. 

  27.             <i class="iconfont icon-200yonghu_yonghu fontSize20 fontIcon120"></i>
    28. 

  28.             <i class="iconfont icon-erweima fontIcon120 px-2"></i>
    29. 

  29.             <i class="iconfont icon-gouwuchekong fontIcon120"></i>
    30. 

  30.         </div>
    31. 

  31.     </div>
    32. 

  32. </header>
    33. 

    34. 

  34. <!--导航-->
    35. 

  35. <nav class="bcontainer-full">
    36. 

  36.     <ul class="d-flex justify-content-center m-auto">
    37. 

  37.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">首页</a></li>
    38. 

  38.         <li class="mx-4 px-2 py-2">
    39. 

  39.             <a href="#" title="" class="hover">编程图书</a>
    40. 

  40.             <ul class="position-absolute d-flex justify-content-center w-100 left-0 my-2 py-3">
    41. 

  41.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    42. 

  42.                 </li>
    43. 

  43.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    44. 

  44.                 </li>
    45. 

  45.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    46. 

  46.                 </li>
    47. 

  47.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    48. 

  48.                 </li>
    49. 

  49.             </ul>
    50. 

  50.         </li>
    51. 

  51.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">算法图书</a></li>
    52. 

  52.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">AI图书</a></li>
    53. 

  53.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">人工智能</a></li>
    54. 

  54.     </ul>
    55. 

  55. </nav>
    56. 

    57. 

  57. <!--banner-->
    58. 

  58. <section class="banner container-full overflow-hidden">
    59. 

  59.     <div class="d-flex w-300">
    60. 

  60.         <a href="" title="" class="d-block w-100"><img src="./img/001.jpeg" alt="" class="w-100"/></a>
    61. 

  61.         <a href="" title="" class="d-block w-100"><img src="./img/2.jpeg" alt="" class="w-100"/></a>
    62. 

  62.         <a href="" title="" class="d-block w-100"><img src="./img/3.jpeg" alt="" class="w-100"/></a>
    63. 

  63.     </div>
    64. 

  64. </section>
    65. 

    66. 

  66. <!--侧栏-->
    67. 

  67. <aside class="position-fixed right-10 d-flex flex-column jusify-content-between z-index100">
    68. 

  68.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-gouwuchekong"></span>
    69. 

  69.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-sousuo"></span>
    70. 

  70.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-200yonghu_yonghu"></span>
    71. 

  71.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-erweima"></span>
    72. 

  72. </aside>
    73. 

    74. 

  74. <!--支付完成-->
    75. 

  75. <section class="container d-flex justify-content-between align-items-center p-2">
    76. 

  76.     <div class="fontSize16">支付成功</div>
    77. 

  77.     <div><img src="./img/cartTop03.png" alt=""></div>
    78. 

  78.     <div></div>
    79. 

  79. </section>
    80. 

    81. 

  81. <!--支付完成-->
    82. 

  82. <section class="container my-4 py-4">
    83. 

  83.     <p class="fontSize16 textRed mb-4 text-center">支付成功 5s 跳转</p>
    84. 

  84.     <p class="text-center"><a href="" title="">返回订单页</a></p>
    85. 

  85. </section>
    86. 

    87. 

  87. <!--猜你喜欢-->
    88. 

  88. <section class="container-full bgfb py-4">
    89. 

  89.     <h3 class="text-center py-2">猜你喜欢</h3>
    90. 

  90.     <section class="d-flex justify-content-between">
    91. 

  91.         <a href="" title="" class="decoration-none text-center pl-4 d-flex align-items-center"><i class="iconfont icon-xiangzuojiantou fontSize50 opcity3"></i></a>
    92. 

  92.         <div class="container d-flex justify-content-around">
    93. 

  93.             <div>
    94. 

  94.                 <img src="./img/like04.jpg" alt="">
    95. 

  95.                 <p class="fontSize16">【细说】细说PHP</p>
    96. 

  96.                 <p class="textRed fontSize16">￥158.00</p>
    97. 

  97.             </div>
    98. 

  98.             <div>
    99. 

  99.                 <img src="./img/like04.jpg" alt="">
    100. 

  100.                 <p class="fontSize16">【细说】细说PHP</p>
    101. 

  101.                 <p class="textRed fontSize16">￥158.00</p>
    102. 

  102.             </div>
    103. 

  103.             <div>
    104. 

  104.                 <img src="./img/like04.jpg" alt="">
    105. 

  105.                 <p class="fontSize16">【细说】细说PHP</p>
    106. 

  106.                 <p class="textRed fontSize16">￥158.00</p>
    107. 

  107.             </div>
    108. 

  108.             <div>
    109. 

  109.                 <img src="./img/like04.jpg" alt="">
    110. 

  110.                 <p class="fontSize16">【细说】细说PHP</p>
    111. 

  111.                 <p class="textRed fontSize16">￥158.00</p>
    112. 

  112.             </div>
    113. 

  113.         </div>
    114. 

  114.         <a href="" title="" class="decoration-none text-center pr-4 d-flex align-items-center"><i class="iconfont icon-xiangyoujiantou fontSize50 opcity3"></i></a>
    115. 

  115.     </section>
    116. 

  116. </section>
    117. 

    118. 

  118. <!--底部-->
    119. 

  119. <footer class="container-full border-top mt-4">
    120. 

  120.     <!--上部分-->
    121. 

  121.     <section class="container d-flex justify-content-around">
    122. 

  122.         <div class="d-flex align-items-center">
    123. 

  123.             <img src="./img/foot1.png" alt="" class="w-53px">
    124. 

  124.             <span class="ml-2 fontSize14">7天无理由退货</span>
    125. 

  125.         </div>
    126. 

  126.         <div class="border-right"></div>
    127. 

  127.         <div class="d-flex align-items-center">
    128. 

  128.             <img src="./img/foot2.png" alt="" class="w-53px">
    129. 

  129.             <span class="ml-2 fontSize14">15天免费换货</span>
    130. 

  130.         </div>
    131. 

  131.         <div class="border-right"></div>
    132. 

  132.         <div class="d-flex align-items-center">
    133. 

  133.             <img src="./img/foot3.png" alt="" class="w-53px">
    134. 

  134.             <span class="ml-2 fontSize14">满599包邮</span>
    135. 

  135.         </div>
    136. 

  136.         <div class="border-right"></div>
    137. 

  137.         <div class="d-flex align-items-center">
    138. 

  138.             <img src="./img/foot4.png" alt="" class="w-53px">
    139. 

  139.             <span class="ml-2 fontSize14">手机特色服务</span>
    140. 

  140.         </div>
    141. 

  141.     </section>
    142. 

    143. 

  143.     <!--下部分-->
    144. 

  144.     <section class="p-4 bgBlack text-center textWhite">
    145. 

  145.         <div>最家家居©2013-2017公司版权所有 京ICP备080100-44备0000111000号</div>
    146. 

  146.         <div>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
    147. 

  147.     </section>
    148. 

  148. </footer>
    149. 

    150. 

  150. </body>
    151. 

  151. </html>
    152.

某商城登录注册-购物车订单支付-个人中心所有页面

个人中心

    

  1. @charset "utf-8";
    2. 

  2. .visibileHide {
    3. 

  3.     visibility: hidden;
    4. 

  4. }
    5. 

    6. 

  6. .visibileShow:hover .visibileHide {
    7. 

  7.     visibility: visible;
    8. 

  8. }
    9. 

    10. 

  10. .border-radius-circle {
    11. 

  11.     border-radius: 50%;
    12. 

  12. }
    13. 

    14. 

  14. .borderBlock {
    15. 

  15.     border-color: #ababab;
    16. 

  16. }
    17. 

    18. 

  18. .bg8e {
    19. 

  19.     background-color: #8e8e8e;
    20. 

  20. }
    21.
  • 个人中心 - 我的中心 persionCenter.html
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Ewshop - personalCenter</title>
    6. 

  6.     <link rel="stylesheet" href="./css/base.css"/>
    7. 

  7.     <link rel="stylesheet" href="./css/eduwork.css"/>
    8. 

  8.     <link rel="stylesheet" href="./css/layout.css">
    9. 

  9.     <link rel="stylesheet" href="./css/personal.css">
    10. 

  10.     <link rel="stylesheet" href="//at.alicdn.com/t/font_2946534_nvos7wgzrcf.css">
    11. 

  11.     <link rel="icon" href="./img/icon.png"/>
    12. 

  12. </head>
    13. 

  13. <body>
    14. 

    15. 

  15. <!--头部-->
    16. 

  16. <header class="container d-flex justify-content-between">
    17. 

  17.     <div class="border-0"><img src="./img/logo.png" alt="logo"></div>
    18. 

  18.     <div class="d-flex justify-content-center align-items-center">
    19. 

  19.         <a href="" title="登录" class="fontSize14">登录</a>
    20. 

  20.         <span class="mx-1">|</span>
    21. 

  21.         <a href="" title="注册" class="fontSize14">注册</a>
    22. 

  22.         <form class="d-flex border-bottom py-1 px-2 mx-2" action="">
    23. 

  23.             <input type="text" name="search" placeholder="热门搜索：细说php" class="border-0"/>
    24. 

  24.             <button class="border-0 bg-transparent iconfont icon-sousuo fontSize20 fontIcon120"></button>
    25. 

  25.         </form>
    26. 

  26.         <div class="d-flex justify-content-center align-items-center font">
    27. 

  27.             <i class="iconfont icon-200yonghu_yonghu fontSize20 fontIcon120"></i>
    28. 

  28.             <i class="iconfont icon-erweima fontIcon120 px-2"></i>
    29. 

  29.             <i class="iconfont icon-gouwuchekong fontIcon120"></i>
    30. 

  30.         </div>
    31. 

  31.     </div>
    32. 

  32. </header>
    33. 

    34. 

  34. <!--导航-->
    35. 

  35. <nav class="bcontainer-full">
    36. 

  36.     <ul class="d-flex justify-content-center m-auto">
    37. 

  37.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">首页</a></li>
    38. 

  38.         <li class="mx-4 px-2 py-2">
    39. 

  39.             <a href="#" title="" class="hover">编程图书</a>
    40. 

  40.             <ul class="position-absolute d-flex justify-content-center w-100 left-0 my-2 py-3">
    41. 

  41.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    42. 

  42.                 </li>
    43. 

  43.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    44. 

  44.                 </li>
    45. 

  45.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    46. 

  46.                 </li>
    47. 

  47.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    48. 

  48.                 </li>
    49. 

  49.             </ul>
    50. 

  50.         </li>
    51. 

  51.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">算法图书</a></li>
    52. 

  52.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">AI图书</a></li>
    53. 

  53.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">人工智能</a></li>
    54. 

  54.     </ul>
    55. 

  55. </nav>
    56. 

    57. 

  57. <!--侧栏-->
    58. 

  58. <aside class="position-fixed right-10 d-flex flex-column jusify-content-between z-index100">
    59. 

  59.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-gouwuchekong"></span>
    60. 

  60.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-sousuo"></span>
    61. 

  61.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-200yonghu_yonghu"></span>
    62. 

  62.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-erweima"></span>
    63. 

  63. </aside>
    64. 

    65. 

  65. <!--面包屑-->
    66. 

  66. <section class="container-full mt-4 py-1 border-top border-bottom">
    67. 

  67.     <div class="container">
    68. 

  68.         <a href="" title="" class="fontSize12 color777">首页</a>
    69. 

  69.         <span class="mx-2">/</span>
    70. 

  70.         <span class="fontSize12">个人中心</span>
    71. 

  71.     </div>
    72. 

  72. </section>
    73. 

    74. 

  74. <!--个人中心-->
    75. 

  75. <section class="container-full bgColor">
    76. 

  76.     <section class="container d-flex justify-content-between">
    77. 

  77.         <section class="border bgWhite flex-basis20 my-2 mr-1">
    78. 

  78.             <div class="border-bottom border-dark">
    79. 

  79.                 <div class="w-45 m-auto p-2"><img src="./img/tx.png" alt=""></div>
    80. 

  80.                 <div class="text-center mb-3">
    81. 

  81.                     <span class="fontSize14">[<a href="" title="">羊羊羊</a>]</span>
    82. 

  82.                     <span class="fontSize14 ml-1">[<a href="" title="">退出登录</a>]</span>
    83. 

  83.                 </div>
    84. 

  84.             </div>
    85. 

  85.             <ul class="d-flex flex-column align-items-center mb-2">
    86. 

  86.                 <li class="my-2 fontSize16 bold">我的交易</li>
    87. 

  87.                 <li class="my-2"><a href="" title="" class="color777">我的购物车</a></li>
    88. 

  88.                 <li class="my-2"><a href="" title="" class="color777">我的订单</a></li>
    89. 

  89.                 <li class="my-2"><a href="" title="" class="color777">评价晒单</a></li>
    90. 

    91. 

  91.                 <li class="my-2 fontSize16 bold">个人中心</li>
    92. 

  92.                 <li class="my-2"><a href="" title="" class="textRed">我的中心</a></li>
    93. 

  93.                 <li class="my-2"><a href="" title="" class="color777">地址管理</a></li>
    94. 

    95. 

  95.                 <li class="my-2 fontSize16 bold">账户管理</li>
    96. 

  96.                 <li class="my-2"><a href="" title="" class="color777">个人信息</a></li>
    97. 

  97.                 <li class="my-2"><a href="" title="" class="color777">密码修改</a></li>
    98. 

  98.             </ul>
    99. 

  99.         </section>
    100. 

  100.         <section class="border bgWhite flex-basis80 my-2 ml-1 p-4">
    101. 

  101.             <div class="d-flex justify-content-between align-items-center border-bottom mx-4 pb-4">
    102. 

  102.                 <div class="d-flex">
    103. 

  103.                     <div><img src="./img/tx.png" alt="" class="border border-radius-circle"></div>
    104. 

  104.                     <div class="d-flex flex-column justify-content-center p-3">
    105. 

  105.                         <div class="fontSize14 mb-2">六六六</div>
    106. 

  106.                         <div><a href="" title="" class="fontSize12 textRed">修改个人信息></a></div>
    107. 

  107.                     </div>
    108. 

  108.                 </div>
    109. 

  109.                 <div class="color777">绑定邮箱：12****4@**.com</div>
    110. 

  110.             </div>
    111. 

  111.             <div class="d-flex flex-wrap m-4 p-4">
    112. 

  112.                 <div class="d-flex align-items-center w-50 mb-4 pb-4">
    113. 

  113.                     <a href="" title=""><img src="./img/gxin1.jpg" alt=""></a>
    114. 

  114.                     <div class="d-flex flex-column justify-content-center px-2">
    115. 

  115.                         <div class="fontSize14 color777">待支付的订单:<span class="textRed">0</span></div>
    116. 

  116.                         <div class="mt-2"><a href="" title="" class="fontSize12 color777">查看待支付订单></a></div>
    117. 

  117.                     </div>
    118. 

  118.                 </div>
    119. 

    120. 

  120.                 <div class="d-flex align-items-center w-50 mb-4 pb-4">
    121. 

  121.                     <a href="" title=""><img src="./img/gxin2.jpg" alt=""></a>
    122. 

  122.                     <div class="d-flex flex-column justify-content-center px-2">
    123. 

  123.                         <div class="fontSize14 color777">待收货的订单:<span class="textRed">0</span></div>
    124. 

  124.                         <div class="mt-2"><a href="" title="" class="fontSize12 color777">查看待支付订单></a></div>
    125. 

  125.                     </div>
    126. 

  126.                 </div>
    127. 

    128. 

  128.                 <div class="d-flex align-items-center w-50 mb-4 pb-4">
    129. 

  129.                     <a href="" title=""><img src="./img/gxin3.jpg" alt=""></a>
    130. 

  130.                     <div class="d-flex flex-column justify-content-center px-2">
    131. 

  131.                         <div class="fontSize14 color777">待评价的订单:<span class="textRed">0</span></div>
    132. 

  132.                         <div class="mt-2"><a href="" title="" class="fontSize12 color777">查看待支付订单></a></div>
    133. 

  133.                     </div>
    134. 

  134.                 </div>
    135. 

    136. 

  136.                 <div class="d-flex align-items-center w-50 mb-4 pb-4">
    137. 

  137.                     <a href="" title=""><img src="./img/gxin4.jpg" alt=""></a>
    138. 

  138.                     <div class="d-flex flex-column justify-content-center px-2">
    139. 

  139.                         <div class="fontSize14 color777">喜欢的商品:<span class="textRed">0</span></div>
    140. 

  140.                         <div class="mt-2"><a href="" title="" class="fontSize12 color777">查看待支付订单></a></div>
    141. 

  141.                     </div>
    142. 

  142.                 </div>
    143. 

    144. 

  144.             </div>
    145. 

  145.         </section>
    146. 

  146.     </section>
    147. 

  147. </section>
    148. 

    149. 

  149. <!--底部-->
    150. 

  150. <footer class="container-full border-top mt-4">
    151. 

  151.     <!--上部分-->
    152. 

  152.     <section class="container d-flex justify-content-around">
    153. 

  153.         <div class="d-flex align-items-center">
    154. 

  154.             <img src="./img/foot1.png" alt="" class="w-53px">
    155. 

  155.             <span class="ml-2 fontSize14">7天无理由退货</span>
    156. 

  156.         </div>
    157. 

  157.         <div class="border-right"></div>
    158. 

  158.         <div class="d-flex align-items-center">
    159. 

  159.             <img src="./img/foot2.png" alt="" class="w-53px">
    160. 

  160.             <span class="ml-2 fontSize14">15天免费换货</span>
    161. 

  161.         </div>
    162. 

  162.         <div class="border-right"></div>
    163. 

  163.         <div class="d-flex align-items-center">
    164. 

  164.             <img src="./img/foot3.png" alt="" class="w-53px">
    165. 

  165.             <span class="ml-2 fontSize14">满599包邮</span>
    166. 

  166.         </div>
    167. 

  167.         <div class="border-right"></div>
    168. 

  168.         <div class="d-flex align-items-center">
    169. 

  169.             <img src="./img/foot4.png" alt="" class="w-53px">
    170. 

  170.             <span class="ml-2 fontSize14">手机特色服务</span>
    171. 

  171.         </div>
    172. 

  172.     </section>
    173. 

    174. 

  174.     <!--下部分-->
    175. 

  175.     <section class="p-4 bgBlack text-center textWhite">
    176. 

  176.         <div>最家家居©2013-2017公司版权所有 京ICP备080100-44备0000111000号</div>
    177. 

  177.         <div>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
    178. 

  178.     </section>
    179. 

  179. </footer>
    180. 

    181. 

  181. </body>
    182. 

  182. </html>
    183.

某商城登录注册-购物车订单支付-个人中心所有页面

  • 个人中心 - 个人信息 personalInfo.html
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Ewshop - personalInfo</title>
    6. 

  6.     <link rel="stylesheet" href="./css/base.css"/>
    7. 

  7.     <link rel="stylesheet" href="./css/eduwork.css"/>
    8. 

  8.     <link rel="stylesheet" href="./css/layout.css">
    9. 

  9.     <link rel="stylesheet" href="./css/personal.css">
    10. 

  10.     <link rel="stylesheet" href="//at.alicdn.com/t/font_2946534_nvos7wgzrcf.css">
    11. 

  11.     <link rel="icon" href="./img/icon.png"/>
    12. 

  12. </head>
    13. 

  13. <body>
    14. 

    15. 

  15. <!--头部-->
    16. 

  16. <header class="container d-flex justify-content-between">
    17. 

  17.     <div class="border-0"><img src="./img/logo.png" alt="logo"></div>
    18. 

  18.     <div class="d-flex justify-content-center align-items-center">
    19. 

  19.         <a href="" title="登录" class="fontSize14">登录</a>
    20. 

  20.         <span class="mx-1">|</span>
    21. 

  21.         <a href="" title="注册" class="fontSize14">注册</a>
    22. 

  22.         <form class="d-flex border-bottom py-1 px-2 mx-2" action="">
    23. 

  23.             <input type="text" name="search" placeholder="热门搜索：细说php" class="border-0"/>
    24. 

  24.             <button class="border-0 bg-transparent iconfont icon-sousuo fontSize20 fontIcon120"></button>
    25. 

  25.         </form>
    26. 

  26.         <div class="d-flex justify-content-center align-items-center font">
    27. 

  27.             <i class="iconfont icon-200yonghu_yonghu fontSize20 fontIcon120"></i>
    28. 

  28.             <i class="iconfont icon-erweima fontIcon120 px-2"></i>
    29. 

  29.             <i class="iconfont icon-gouwuchekong fontIcon120"></i>
    30. 

  30.         </div>
    31. 

  31.     </div>
    32. 

  32. </header>
    33. 

    34. 

  34. <!--导航-->
    35. 

  35. <nav class="bcontainer-full">
    36. 

  36.     <ul class="d-flex justify-content-center m-auto">
    37. 

  37.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">首页</a></li>
    38. 

  38.         <li class="mx-4 px-2 py-2">
    39. 

  39.             <a href="#" title="" class="hover">编程图书</a>
    40. 

  40.             <ul class="position-absolute d-flex justify-content-center w-100 left-0 my-2 py-3">
    41. 

  41.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    42. 

  42.                 </li>
    43. 

  43.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    44. 

  44.                 </li>
    45. 

  45.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    46. 

  46.                 </li>
    47. 

  47.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    48. 

  48.                 </li>
    49. 

  49.             </ul>
    50. 

  50.         </li>
    51. 

  51.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">算法图书</a></li>
    52. 

  52.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">AI图书</a></li>
    53. 

  53.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">人工智能</a></li>
    54. 

  54.     </ul>
    55. 

  55. </nav>
    56. 

    57. 

  57. <!--侧栏-->
    58. 

  58. <aside class="position-fixed right-10 d-flex flex-column jusify-content-between z-index100">
    59. 

  59.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-gouwuchekong"></span>
    60. 

  60.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-sousuo"></span>
    61. 

  61.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-200yonghu_yonghu"></span>
    62. 

  62.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-erweima"></span>
    63. 

  63. </aside>
    64. 

    65. 

  65. <!--面包屑-->
    66. 

  66. <section class="container-full mt-4 py-1 border-top border-bottom">
    67. 

  67.     <div class="container">
    68. 

  68.         <a href="" title="" class="fontSize12 color777">首页</a>
    69. 

  69.         <span class="mx-2">/</span>
    70. 

  70.         <span class="fontSize12">个人中心</span>
    71. 

  71.     </div>
    72. 

  72. </section>
    73. 

    74. 

  74. <!--个人中心-->
    75. 

  75. <section class="container-full bgColor">
    76. 

  76.     <section class="container d-flex justify-content-between">
    77. 

  77.         <section class="border bgWhite flex-basis20 my-2 mr-1">
    78. 

  78.             <div class="border-bottom border-dark">
    79. 

  79.                 <div class="w-45 m-auto p-2"><img src="./img/tx.png" alt=""></div>
    80. 

  80.                 <div class="text-center mb-3">
    81. 

  81.                     <span class="fontSize14">[<a href="" title="">羊羊羊</a>]</span>
    82. 

  82.                     <span class="fontSize14 ml-1">[<a href="" title="">退出登录</a>]</span>
    83. 

  83.                 </div>
    84. 

  84.             </div>
    85. 

  85.             <ul class="d-flex flex-column align-items-center mb-2">
    86. 

  86.                 <li class="my-2 fontSize16 bold">我的交易</li>
    87. 

  87.                 <li class="my-2"><a href="" title="" class="color777">我的购物车</a></li>
    88. 

  88.                 <li class="my-2"><a href="" title="" class="color777">我的订单</a></li>
    89. 

  89.                 <li class="my-2"><a href="" title="" class="color777">评价晒单</a></li>
    90. 

    91. 

  91.                 <li class="my-2 fontSize16 bold">个人中心</li>
    92. 

  92.                 <li class="my-2"><a href="" title="" class="color777">我的中心</a></li>
    93. 

  93.                 <li class="my-2"><a href="" title="" class="color777">地址管理</a></li>
    94. 

    95. 

  95.                 <li class="my-2 fontSize16 bold">账户管理</li>
    96. 

  96.                 <li class="my-2"><a href="" title="" class="textRed">个人信息</a></li>
    97. 

  97.                 <li class="my-2"><a href="" title="" class="color777">密码修改</a></li>
    98. 

  98.             </ul>
    99. 

  99.         </section>
    100. 

  100.         <section class="border bgWhite flex-basis80 my-2 ml-1 p-4">
    101. 

  101.             <div class="mx-4 py-4 border-bottom"><h3 class="fontSize20">个人信息</h3></div>
    102. 

  102.             <div class="my-4 d-flex justify-content-between">
    103. 

  103.                 <div class="flex-basis20 d-flex flex-column justify-content-center align-items-center p-4">
    104. 

  104.                     <img src="./img/tx.png" alt="" class="w-50 my-1">
    105. 

  105.                     <a href="" title="" class="textRed">修改图像</a>
    106. 

  106.                 </div>
    107. 

    108. 

  108.                 <div class="flex-basis80 p-4">
    109. 

  109.                     <div class="border-bottom py-3 d-flex justify-content-between">
    110. 

  110.                         <div class="fontSize16">基础资料</div>
    111. 

  111.                         <div><a href="" title="" class="textRed">编辑</a></div>
    112. 

  112.                     </div>
    113. 

  113.                     <div class="border-bottom py-3 color777">姓名:六六六</div>
    114. 

  114.                     <div class="border-bottom py-3 color777">生日:2000-00-00</div>
    115. 

  115.                     <div class="border-bottom py-3 color777">性别:女</div>
    116. 

  116.                     <div class="border-bottom py-3 color777">地区:中国</div>
    117. 

  117.                 </div>
    118. 

  118.             </div>
    119. 

  119.         </section>
    120. 

  120.     </section>
    121. 

  121. </section>
    122. 

    123. 

  123. <!--底部-->
    124. 

  124. <footer class="container-full border-top mt-4">
    125. 

  125.     <!--上部分-->
    126. 

  126.     <section class="container d-flex justify-content-around">
    127. 

  127.         <div class="d-flex align-items-center">
    128. 

  128.             <img src="./img/foot1.png" alt="" class="w-53px">
    129. 

  129.             <span class="ml-2 fontSize14">7天无理由退货</span>
    130. 

  130.         </div>
    131. 

  131.         <div class="border-right"></div>
    132. 

  132.         <div class="d-flex align-items-center">
    133. 

  133.             <img src="./img/foot2.png" alt="" class="w-53px">
    134. 

  134.             <span class="ml-2 fontSize14">15天免费换货</span>
    135. 

  135.         </div>
    136. 

  136.         <div class="border-right"></div>
    137. 

  137.         <div class="d-flex align-items-center">
    138. 

  138.             <img src="./img/foot3.png" alt="" class="w-53px">
    139. 

  139.             <span class="ml-2 fontSize14">满599包邮</span>
    140. 

  140.         </div>
    141. 

  141.         <div class="border-right"></div>
    142. 

  142.         <div class="d-flex align-items-center">
    143. 

  143.             <img src="./img/foot4.png" alt="" class="w-53px">
    144. 

  144.             <span class="ml-2 fontSize14">手机特色服务</span>
    145. 

  145.         </div>
    146. 

  146.     </section>
    147. 

    148. 

  148.     <!--下部分-->
    149. 

  149.     <section class="p-4 bgBlack text-center textWhite">
    150. 

  150.         <div>最家家居©2013-2017公司版权所有 京ICP备080100-44备0000111000号</div>
    151. 

  151.         <div>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
    152. 

  152.     </section>
    153. 

  153. </footer>
    154. 

    155. 

  155. </body>
    156. 

  156. </html>
    157.

某商城登录注册-购物车订单支付-个人中心所有页面

  • 个人中心 - 地址管理 personalAddress.html
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Ewshop - personalInfo</title>
    6. 

  6.     <link rel="stylesheet" href="./css/base.css"/>
    7. 

  7.     <link rel="stylesheet" href="./css/eduwork.css"/>
    8. 

  8.     <link rel="stylesheet" href="./css/layout.css">
    9. 

  9.     <link rel="stylesheet" href="./css/personal.css">
    10. 

  10.     <link rel="stylesheet" href="//at.alicdn.com/t/font_2946534_nvos7wgzrcf.css">
    11. 

  11.     <link rel="icon" href="./img/icon.png"/>
    12. 

  12. </head>
    13. 

  13. <body>
    14. 

    15. 

  15. <!--头部-->
    16. 

  16. <header class="container d-flex justify-content-between">
    17. 

  17.     <div class="border-0"><img src="./img/logo.png" alt="logo"></div>
    18. 

  18.     <div class="d-flex justify-content-center align-items-center">
    19. 

  19.         <a href="" title="登录" class="fontSize14">登录</a>
    20. 

  20.         <span class="mx-1">|</span>
    21. 

  21.         <a href="" title="注册" class="fontSize14">注册</a>
    22. 

  22.         <form class="d-flex border-bottom py-1 px-2 mx-2" action="">
    23. 

  23.             <input type="text" name="search" placeholder="热门搜索：细说php" class="border-0"/>
    24. 

  24.             <button class="border-0 bg-transparent iconfont icon-sousuo fontSize20 fontIcon120"></button>
    25. 

  25.         </form>
    26. 

  26.         <div class="d-flex justify-content-center align-items-center font">
    27. 

  27.             <i class="iconfont icon-200yonghu_yonghu fontSize20 fontIcon120"></i>
    28. 

  28.             <i class="iconfont icon-erweima fontIcon120 px-2"></i>
    29. 

  29.             <i class="iconfont icon-gouwuchekong fontIcon120"></i>
    30. 

  30.         </div>
    31. 

  31.     </div>
    32. 

  32. </header>
    33. 

    34. 

  34. <!--导航-->
    35. 

  35. <nav class="bcontainer-full">
    36. 

  36.     <ul class="d-flex justify-content-center m-auto">
    37. 

  37.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">首页</a></li>
    38. 

  38.         <li class="mx-4 px-2 py-2">
    39. 

  39.             <a href="#" title="" class="hover">编程图书</a>
    40. 

  40.             <ul class="position-absolute d-flex justify-content-center w-100 left-0 my-2 py-3">
    41. 

  41.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    42. 

  42.                 </li>
    43. 

  43.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    44. 

  44.                 </li>
    45. 

  45.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    46. 

  46.                 </li>
    47. 

  47.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    48. 

  48.                 </li>
    49. 

  49.             </ul>
    50. 

  50.         </li>
    51. 

  51.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">算法图书</a></li>
    52. 

  52.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">AI图书</a></li>
    53. 

  53.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">人工智能</a></li>
    54. 

  54.     </ul>
    55. 

  55. </nav>
    56. 

    57. 

  57. <!--侧栏-->
    58. 

  58. <aside class="position-fixed right-10 d-flex flex-column jusify-content-between z-index100">
    59. 

  59.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-gouwuchekong"></span>
    60. 

  60.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-sousuo"></span>
    61. 

  61.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-200yonghu_yonghu"></span>
    62. 

  62.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-erweima"></span>
    63. 

  63. </aside>
    64. 

    65. 

  65. <!--面包屑-->
    66. 

  66. <section class="container-full mt-4 py-1 border-top border-bottom">
    67. 

  67.     <div class="container">
    68. 

  68.         <a href="" title="" class="fontSize12 color777">首页</a>
    69. 

  69.         <span class="mx-2">/</span>
    70. 

  70.         <span class="fontSize12">个人中心</span>
    71. 

  71.     </div>
    72. 

  72. </section>
    73. 

    74. 

  74. <!--个人中心-->
    75. 

  75. <section class="container-full bgColor">
    76. 

  76.     <section class="container d-flex justify-content-between">
    77. 

  77.         <section class="border bgWhite flex-basis20 my-2 mr-1">
    78. 

  78.             <div class="border-bottom border-dark">
    79. 

  79.                 <div class="w-45 m-auto p-2"><img src="./img/tx.png" alt=""></div>
    80. 

  80.                 <div class="text-center mb-3">
    81. 

  81.                     <span class="fontSize14">[<a href="" title="">羊羊羊</a>]</span>
    82. 

  82.                     <span class="fontSize14 ml-1">[<a href="" title="">退出登录</a>]</span>
    83. 

  83.                 </div>
    84. 

  84.             </div>
    85. 

  85.             <ul class="d-flex flex-column align-items-center mb-2">
    86. 

  86.                 <li class="my-2 fontSize16 bold">我的交易</li>
    87. 

  87.                 <li class="my-2"><a href="" title="" class="color777">我的购物车</a></li>
    88. 

  88.                 <li class="my-2"><a href="" title="" class="color777">我的订单</a></li>
    89. 

  89.                 <li class="my-2"><a href="" title="" class="color777">评价晒单</a></li>
    90. 

    91. 

  91.                 <li class="my-2 fontSize16 bold">个人中心</li>
    92. 

  92.                 <li class="my-2"><a href="" title="" class="color777">我的中心</a></li>
    93. 

  93.                 <li class="my-2"><a href="" title="" class="textRed">地址管理</a></li>
    94. 

    95. 

  95.                 <li class="my-2 fontSize16 bold">账户管理</li>
    96. 

  96.                 <li class="my-2"><a href="" title="" class="color777">个人信息</a></li>
    97. 

  97.                 <li class="my-2"><a href="" title="" class="color777">密码修改</a></li>
    98. 

  98.             </ul>
    99. 

  99.         </section>
    100. 

  100.         <section class="border bgWhite flex-basis80 my-2 ml-1 p-4">
    101. 

  101.             <div class="mx-4 py-4 border-bottom"><h3 class="fontSize20">收货地址</h3></div>
    102. 

  102.             <div class="mx-4 my-4 p-4 d-flex flex-wrap justify-content-between">
    103. 

  103.                 <div class="mx-4 mb-4 p-4 border w-35 d-flex flex-column justify-content-center align-items-center">
    104. 

  104.                     <a href="" title=""><img src="./img/jia.png" alt=""></a>
    105. 

  105.                     <span class="color777 mt-1 fontSize14">添加新地址</span>
    106. 

  106.                 </div>
    107. 

    108. 

  108.                 <div class="mx-4 mb-4 p-4 border w-35 visibileShow">
    109. 

  109.                     <div class="fontSize16 mb-4">六六六</div>
    110. 

  110.                     <div class="color777">1573****666</div>
    111. 

  111.                     <div class="color777">河北省 唐山市 路北区</div>
    112. 

  112.                     <div class="color777">唐山市大学生公寓村（063000）</div>
    113. 

  113.                     <div class="mt-1 visibileHide">
    114. 

  114.                         <a href="" title="" class="textRed fontSize12 mr-2">删除</a>
    115. 

  115.                         <a href="" title="" class="textRed fontSize12">修改</a>
    116. 

  116.                     </div>
    117. 

  117.                 </div>
    118. 

    119. 

  119.                 <div class="mx-4 mb-4 p-4 border w-35 visibileShow">
    120. 

  120.                     <div class="fontSize16 mb-4">六六六</div>
    121. 

  121.                     <div class="color777">1573****666</div>
    122. 

  122.                     <div class="color777">河北省 唐山市 路北区</div>
    123. 

  123.                     <div class="color777">唐山市大学生公寓村（063000）</div>
    124. 

  124.                     <div class="mt-1 visibileHide">
    125. 

  125.                         <a href="" title="" class="textRed fontSize12 mr-2">删除</a>
    126. 

  126.                         <a href="" title="" class="textRed fontSize12">修改</a>
    127. 

  127.                     </div>
    128. 

  128.                 </div>
    129. 

    130. 

  130.             </div>
    131. 

  131.         </section>
    132. 

  132.     </section>
    133. 

  133. </section>
    134. 

    135. 

  135. <!--底部-->
    136. 

  136. <footer class="container-full border-top mt-4">
    137. 

  137.     <!--上部分-->
    138. 

  138.     <section class="container d-flex justify-content-around">
    139. 

  139.         <div class="d-flex align-items-center">
    140. 

  140.             <img src="./img/foot1.png" alt="" class="w-53px">
    141. 

  141.             <span class="ml-2 fontSize14">7天无理由退货</span>
    142. 

  142.         </div>
    143. 

  143.         <div class="border-right"></div>
    144. 

  144.         <div class="d-flex align-items-center">
    145. 

  145.             <img src="./img/foot2.png" alt="" class="w-53px">
    146. 

  146.             <span class="ml-2 fontSize14">15天免费换货</span>
    147. 

  147.         </div>
    148. 

  148.         <div class="border-right"></div>
    149. 

  149.         <div class="d-flex align-items-center">
    150. 

  150.             <img src="./img/foot3.png" alt="" class="w-53px">
    151. 

  151.             <span class="ml-2 fontSize14">满599包邮</span>
    152. 

  152.         </div>
    153. 

  153.         <div class="border-right"></div>
    154. 

  154.         <div class="d-flex align-items-center">
    155. 

  155.             <img src="./img/foot4.png" alt="" class="w-53px">
    156. 

  156.             <span class="ml-2 fontSize14">手机特色服务</span>
    157. 

  157.         </div>
    158. 

  158.     </section>
    159. 

    160. 

  160.     <!--下部分-->
    161. 

  161.     <section class="p-4 bgBlack text-center textWhite">
    162. 

  162.         <div>最家家居©2013-2017公司版权所有 京ICP备080100-44备0000111000号</div>
    163. 

  163.         <div>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
    164. 

  164.     </section>
    165. 

  165. </footer>
    166. 

    167. 

  167. </body>
    168. 

  168. </html>
    169.

某商城登录注册-购物车订单支付-个人中心所有页面

  • 个人中心 - 评价晒单 personalComment.html
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Ewshop - personalComment</title>
    6. 

  6.     <link rel="stylesheet" href="./css/base.css"/>
    7. 

  7.     <link rel="stylesheet" href="./css/eduwork.css"/>
    8. 

  8.     <link rel="stylesheet" href="./css/layout.css">
    9. 

  9.     <link rel="stylesheet" href="./css/personal.css">
    10. 

  10.     <link rel="stylesheet" href="//at.alicdn.com/t/font_2946534_nvos7wgzrcf.css">
    11. 

  11.     <link rel="icon" href="./img/icon.png"/>
    12. 

  12. </head>
    13. 

  13. <body>
    14. 

    15. 

  15. <!--头部-->
    16. 

  16. <header class="container d-flex justify-content-between">
    17. 

  17.     <div class="border-0"><img src="./img/logo.png" alt="logo"></div>
    18. 

  18.     <div class="d-flex justify-content-center align-items-center">
    19. 

  19.         <a href="" title="登录" class="fontSize14">登录</a>
    20. 

  20.         <span class="mx-1">|</span>
    21. 

  21.         <a href="" title="注册" class="fontSize14">注册</a>
    22. 

  22.         <form class="d-flex border-bottom py-1 px-2 mx-2" action="">
    23. 

  23.             <input type="text" name="search" placeholder="热门搜索：细说php" class="border-0"/>
    24. 

  24.             <button class="border-0 bg-transparent iconfont icon-sousuo fontSize20 fontIcon120"></button>
    25. 

  25.         </form>
    26. 

  26.         <div class="d-flex justify-content-center align-items-center font">
    27. 

  27.             <i class="iconfont icon-200yonghu_yonghu fontSize20 fontIcon120"></i>
    28. 

  28.             <i class="iconfont icon-erweima fontIcon120 px-2"></i>
    29. 

  29.             <i class="iconfont icon-gouwuchekong fontIcon120"></i>
    30. 

  30.         </div>
    31. 

  31.     </div>
    32. 

  32. </header>
    33. 

    34. 

  34. <!--导航-->
    35. 

  35. <nav class="bcontainer-full">
    36. 

  36.     <ul class="d-flex justify-content-center m-auto">
    37. 

  37.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">首页</a></li>
    38. 

  38.         <li class="mx-4 px-2 py-2">
    39. 

  39.             <a href="#" title="" class="hover">编程图书</a>
    40. 

  40.             <ul class="position-absolute d-flex justify-content-center w-100 left-0 my-2 py-3">
    41. 

  41.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    42. 

  42.                 </li>
    43. 

  43.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    44. 

  44.                 </li>
    45. 

  45.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    46. 

  46.                 </li>
    47. 

  47.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    48. 

  48.                 </li>
    49. 

  49.             </ul>
    50. 

  50.         </li>
    51. 

  51.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">算法图书</a></li>
    52. 

  52.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">AI图书</a></li>
    53. 

  53.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">人工智能</a></li>
    54. 

  54.     </ul>
    55. 

  55. </nav>
    56. 

    57. 

  57. <!--侧栏-->
    58. 

  58. <aside class="position-fixed right-10 d-flex flex-column jusify-content-between z-index100">
    59. 

  59.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-gouwuchekong"></span>
    60. 

  60.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-sousuo"></span>
    61. 

  61.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-200yonghu_yonghu"></span>
    62. 

  62.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-erweima"></span>
    63. 

  63. </aside>
    64. 

    65. 

  65. <!--面包屑-->
    66. 

  66. <section class="container-full mt-4 py-1 border-top border-bottom">
    67. 

  67.     <div class="container">
    68. 

  68.         <a href="" title="" class="fontSize12 color777">首页</a>
    69. 

  69.         <span class="mx-2">/</span>
    70. 

  70.         <span class="fontSize12">个人中心</span>
    71. 

  71.     </div>
    72. 

  72. </section>
    73. 

    74. 

  74. <!--个人中心-->
    75. 

  75. <section class="container-full bgColor">
    76. 

  76.     <section class="container d-flex justify-content-between">
    77. 

  77.         <section class="border bgWhite flex-basis20 my-2 mr-1">
    78. 

  78.             <div class="border-bottom border-dark">
    79. 

  79.                 <div class="w-45 m-auto p-2"><img src="./img/tx.png" alt=""></div>
    80. 

  80.                 <div class="text-center mb-3">
    81. 

  81.                     <span class="fontSize14">[<a href="" title="">羊羊羊</a>]</span>
    82. 

  82.                     <span class="fontSize14 ml-1">[<a href="" title="">退出登录</a>]</span>
    83. 

  83.                 </div>
    84. 

  84.             </div>
    85. 

  85.             <ul class="d-flex flex-column align-items-center mb-2">
    86. 

  86.                 <li class="my-2 fontSize16 bold">我的交易</li>
    87. 

  87.                 <li class="my-2"><a href="" title="" class="color777">我的购物车</a></li>
    88. 

  88.                 <li class="my-2"><a href="" title="" class="color777">我的订单</a></li>
    89. 

  89.                 <li class="my-2"><a href="" title="" class="textRed">评价晒单</a></li>
    90. 

    91. 

  91.                 <li class="my-2 fontSize16 bold">个人中心</li>
    92. 

  92.                 <li class="my-2"><a href="" title="" class="color777">我的中心</a></li>
    93. 

  93.                 <li class="my-2"><a href="" title="" class="color777">地址管理</a></li>
    94. 

    95. 

  95.                 <li class="my-2 fontSize16 bold">账户管理</li>
    96. 

  96.                 <li class="my-2"><a href="" title="" class="color777">个人信息</a></li>
    97. 

  97.                 <li class="my-2"><a href="" title="" class="color777">密码修改</a></li>
    98. 

  98.             </ul>
    99. 

  99.         </section>
    100. 

  100.         <section class="border bgWhite flex-basis80 my-2 ml-1 p-4">
    101. 

  101.             <div class="mx-4 py-4"><h3 class="fontSize20">商品评价</h3></div>
    102. 

  102.             <div class="mx-4 my-4">
    103. 

  103.                 <div>
    104. 

  104.                     <a href="" title="" class="textRed">待评价商品</a>
    105. 

  105.                     <span class="mx-4">|</span>
    106. 

  106.                     <a href="" title="" class="color777">已评价商品</a>
    107. 

  107.                     <span class="mx-4">|</span>
    108. 

  108.                     <a href="" title="" class="color777">评价失效</a>
    109. 

  109.                 </div>
    110. 

  110.                 <div class="d-flex flex-wrap justify-content-between">
    111. 

  111.                     <div class="d-flex flex-column align-items-center border-bottom m-4 p-4 pb-2">
    112. 

  112.                         <img src="./img/nav3.jpg" alt="" class="w-80 p">
    113. 

  113.                         <a href="" title="" class="my-1 fontSize12 textRed">细说PHP第四版</a>
    114. 

  114.                         <div class="my-1">￥199.00</div>
    115. 

  115.                         <div class="my-1">16000人评价</div>
    116. 

  116.                         <a href="" title="" class="my-1 w-50 p-2 bgColor fontSize12 text-center decoration-none hoverWhite hoverBgRed">评价</a>
    117. 

  117.                     </div>
    118. 

    119. 

  119.                     <div class="d-flex flex-column align-items-center border-bottom m-4 p-4 pb-2">
    120. 

  120.                         <img src="./img/nav3.jpg" alt="" class="w-80 p">
    121. 

  121.                         <a href="" title="" class="my-1 fontSize12 textRed">细说PHP第四版</a>
    122. 

  122.                         <div class="my-1">￥199.00</div>
    123. 

  123.                         <div class="my-1">16000人评价</div>
    124. 

  124.                         <a href="" title="" class="my-1 w-50 p-2 bgColor fontSize12 text-center decoration-none hoverWhite hoverBgRed">评价</a>
    125. 

  125.                     </div>
    126. 

    127. 

  127.                     <div class="d-flex flex-column align-items-center border-bottom m-4 p-4 pb-2">
    128. 

  128.                         <img src="./img/nav3.jpg" alt="" class="w-80 p">
    129. 

  129.                         <a href="" title="" class="my-1 fontSize12 textRed">细说PHP第四版</a>
    130. 

  130.                         <div class="my-1">￥199.00</div>
    131. 

  131.                         <div class="my-1">16000人评价</div>
    132. 

  132.                         <a href="" title="" class="my-1 w-50 p-2 bgColor fontSize12 text-center decoration-none hoverWhite hoverBgRed">评价</a>
    133. 

  133.                     </div>
    134. 

    135. 

  135.                     <div class="d-flex flex-column align-items-center border-bottom m-4 p-4 pb-2">
    136. 

  136.                         <img src="./img/nav3.jpg" alt="" class="w-80 p">
    137. 

  137.                         <a href="" title="" class="my-1 fontSize12 textRed">细说PHP第四版</a>
    138. 

  138.                         <div class="my-1">￥199.00</div>
    139. 

  139.                         <div class="my-1">16000人评价</div>
    140. 

  140.                         <a href="" title="" class="my-1 w-50 p-2 bgColor fontSize12 text-center decoration-none hoverWhite hoverBgRed">评价</a>
    141. 

  141.                     </div>
    142. 

  142.                 </div>
    143. 

  143.             </div>
    144. 

  144.         </section>
    145. 

  145.     </section>
    146. 

  146. </section>
    147. 

    148. 

  148. <!--底部-->
    149. 

  149. <footer class="container-full border-top mt-4">
    150. 

  150.     <!--上部分-->
    151. 

  151.     <section class="container d-flex justify-content-around">
    152. 

  152.         <div class="d-flex align-items-center">
    153. 

  153.             <img src="./img/foot1.png" alt="" class="w-53px">
    154. 

  154.             <span class="ml-2 fontSize14">7天无理由退货</span>
    155. 

  155.         </div>
    156. 

  156.         <div class="border-right"></div>
    157. 

  157.         <div class="d-flex align-items-center">
    158. 

  158.             <img src="./img/foot2.png" alt="" class="w-53px">
    159. 

  159.             <span class="ml-2 fontSize14">15天免费换货</span>
    160. 

  160.         </div>
    161. 

  161.         <div class="border-right"></div>
    162. 

  162.         <div class="d-flex align-items-center">
    163. 

  163.             <img src="./img/foot3.png" alt="" class="w-53px">
    164. 

  164.             <span class="ml-2 fontSize14">满599包邮</span>
    165. 

  165.         </div>
    166. 

  166.         <div class="border-right"></div>
    167. 

  167.         <div class="d-flex align-items-center">
    168. 

  168.             <img src="./img/foot4.png" alt="" class="w-53px">
    169. 

  169.             <span class="ml-2 fontSize14">手机特色服务</span>
    170. 

  170.         </div>
    171. 

  171.     </section>
    172. 

    173. 

  173.     <!--下部分-->
    174. 

  174.     <section class="p-4 bgBlack text-center textWhite">
    175. 

  175.         <div>最家家居©2013-2017公司版权所有 京ICP备080100-44备0000111000号</div>
    176. 

  176.         <div>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
    177. 

  177.     </section>
    178. 

  178. </footer>
    179. 

    180. 

  180. </body>
    181. 

  181. </html>
    182.

某商城登录注册-购物车订单支付-个人中心所有页面

  • 个人中心 - 我的订单 personalOrder.html
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Ewshop - personalOrder</title>
    6. 

  6.     <link rel="stylesheet" href="./css/base.css"/>
    7. 

  7.     <link rel="stylesheet" href="./css/eduwork.css"/>
    8. 

  8.     <link rel="stylesheet" href="./css/layout.css">
    9. 

  9.     <link rel="stylesheet" href="./css/personal.css">
    10. 

  10.     <link rel="stylesheet" href="//at.alicdn.com/t/font_2946534_nvos7wgzrcf.css">
    11. 

  11.     <link rel="icon" href="./img/icon.png"/>
    12. 

  12. </head>
    13. 

  13. <body>
    14. 

    15. 

  15. <!--头部-->
    16. 

  16. <header class="container d-flex justify-content-between">
    17. 

  17.     <div class="border-0"><img src="./img/logo.png" alt="logo"></div>
    18. 

  18.     <div class="d-flex justify-content-center align-items-center">
    19. 

  19.         <a href="" title="登录" class="fontSize14">登录</a>
    20. 

  20.         <span class="mx-1">|</span>
    21. 

  21.         <a href="" title="注册" class="fontSize14">注册</a>
    22. 

  22.         <form class="d-flex border-bottom py-1 px-2 mx-2" action="">
    23. 

  23.             <input type="text" name="search" placeholder="热门搜索：细说php" class="border-0"/>
    24. 

  24.             <button class="border-0 bg-transparent iconfont icon-sousuo fontSize20 fontIcon120"></button>
    25. 

  25.         </form>
    26. 

  26.         <div class="d-flex justify-content-center align-items-center font">
    27. 

  27.             <i class="iconfont icon-200yonghu_yonghu fontSize20 fontIcon120"></i>
    28. 

  28.             <i class="iconfont icon-erweima fontIcon120 px-2"></i>
    29. 

  29.             <i class="iconfont icon-gouwuchekong fontIcon120"></i>
    30. 

  30.         </div>
    31. 

  31.     </div>
    32. 

  32. </header>
    33. 

    34. 

  34. <!--导航-->
    35. 

  35. <nav class="bcontainer-full">
    36. 

  36.     <ul class="d-flex justify-content-center m-auto">
    37. 

  37.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">首页</a></li>
    38. 

  38.         <li class="mx-4 px-2 py-2">
    39. 

  39.             <a href="#" title="" class="hover">编程图书</a>
    40. 

  40.             <ul class="position-absolute d-flex justify-content-center w-100 left-0 my-2 py-3">
    41. 

  41.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    42. 

  42.                 </li>
    43. 

  43.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    44. 

  44.                 </li>
    45. 

  45.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    46. 

  46.                 </li>
    47. 

  47.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    48. 

  48.                 </li>
    49. 

  49.             </ul>
    50. 

  50.         </li>
    51. 

  51.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">算法图书</a></li>
    52. 

  52.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">AI图书</a></li>
    53. 

  53.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">人工智能</a></li>
    54. 

  54.     </ul>
    55. 

  55. </nav>
    56. 

    57. 

  57. <!--侧栏-->
    58. 

  58. <aside class="position-fixed right-10 d-flex flex-column jusify-content-between z-index100">
    59. 

  59.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-gouwuchekong"></span>
    60. 

  60.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-sousuo"></span>
    61. 

  61.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-200yonghu_yonghu"></span>
    62. 

  62.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-erweima"></span>
    63. 

  63. </aside>
    64. 

    65. 

  65. <!--面包屑-->
    66. 

  66. <section class="container-full mt-4 py-1 border-top border-bottom">
    67. 

  67.     <div class="container">
    68. 

  68.         <a href="" title="" class="fontSize12 color777">首页</a>
    69. 

  69.         <span class="mx-2">/</span>
    70. 

  70.         <a href="" title="" class="fontSize12 color777">个人中心</a>
    71. 

  71.         <span class="mx-2">/</span>
    72. 

  72.         <span class="fontSize12">我的订单</span>
    73. 

  73.     </div>
    74. 

  74. </section>
    75. 

    76. 

  76. <!--个人中心-->
    77. 

  77. <section class="container-full bgColor">
    78. 

  78.     <section class="container d-flex justify-content-between">
    79. 

  79.         <section class="border bgWhite flex-basis20 my-2 mr-1">
    80. 

  80.             <div class="border-bottom border-dark">
    81. 

  81.                 <div class="w-45 m-auto p-2"><img src="./img/tx.png" alt=""></div>
    82. 

  82.                 <div class="text-center mb-3">
    83. 

  83.                     <span class="fontSize14">[<a href="" title="">羊羊羊</a>]</span>
    84. 

  84.                     <span class="fontSize14 ml-1">[<a href="" title="">退出登录</a>]</span>
    85. 

  85.                 </div>
    86. 

  86.             </div>
    87. 

  87.             <ul class="d-flex flex-column align-items-center mb-2">
    88. 

  88.                 <li class="my-2 fontSize16 bold">我的交易</li>
    89. 

  89.                 <li class="my-2"><a href="" title="" class="color777">我的购物车</a></li>
    90. 

  90.                 <li class="my-2"><a href="" title="" class="textRed">我的订单</a></li>
    91. 

  91.                 <li class="my-2"><a href="" title="" class="color777">评价晒单</a></li>
    92. 

    93. 

  93.                 <li class="my-2 fontSize16 bold">个人中心</li>
    94. 

  94.                 <li class="my-2"><a href="" title="" class="color777">我的中心</a></li>
    95. 

  95.                 <li class="my-2"><a href="" title="" class="color777">地址管理</a></li>
    96. 

    97. 

  97.                 <li class="my-2 fontSize16 bold">账户管理</li>
    98. 

  98.                 <li class="my-2"><a href="" title="" class="color777">个人信息</a></li>
    99. 

  99.                 <li class="my-2"><a href="" title="" class="color777">密码修改</a></li>
    100. 

  100.             </ul>
    101. 

  101.         </section>
    102. 

  102.         <section class="border bgWhite flex-basis80 my-2 ml-1 p-4">
    103. 

  103.             <div class="mx-4 py-4 d-flex align-items-center">
    104. 

  104.                 <h3 class="fontSize20 mr-4">我的订单</h3>
    105. 

  105.                 <a href="" title="">请谨防钓鱼链接活诈骗电话，了解更多></a>
    106. 

  106.             </div>
    107. 

  107.             <div class="mx-4 my-4">
    108. 

  108.                 <div class="pb-2">
    109. 

  109.                     <a href="" title="" class="textRed">全部有效订单</a>
    110. 

  110.                     <span class="mx-4">|</span>
    111. 

  111.                     <a href="" title="" class="color777">待支付</a>
    112. 

  112.                     <span class="mx-4">|</span>
    113. 

  113.                     <a href="" title="" class="color777">待收货</a>
    114. 

  114.                 </div>
    115. 

    116. 

  116.                 <div class="border borderBlock my-4">
    117. 

  117.                     <div class="border-bottom borderSmColor p-4">
    118. 

  118.                         <div class="d-flex align-items-center">
    119. 

  119.                             <p class="fontSize16 color777 mr-4">已收货</p>
    120. 

  120.                             <a class="fontSize12" href=""></a>
    121. 

  121.                         </div>
    122. 

  122.                         <div class="d-flex justify-content-between">
    123. 

  123.                             <div class="color777">2021年12月1日 18:53 | 杨小黄 | 订单号:5160513358520018 | 在线支付</div>
    124. 

  124.                             <div>订单金额: <span class="textRed fontSize16">99.99</span>元</div>
    125. 

  125.                         </div>
    126. 

  126.                     </div>
    127. 

  127.                     <div class="d-flex justify-content-between justify-content-center p-4">
    128. 

  128.                         <div class="w-80 d-flex">
    129. 

  129.                             <a href="" title=""><img src="./img/g1.jpg" alt=""></a>
    130. 

  130.                             <div class="ml-2 d-flex flex-column">
    131. 

  131.                                 <a href="" title="" class="fontSize12 mb-3">家用创意菜盘子圆盘 釉下彩复古</a>
    132. 

  132.                                 <a href="" title="" class="fontSize12">￥99.00 x 1</a>
    133. 

  133.                             </div>
    134. 

  134.                         </div>
    135. 

  135.                         <div class="w-15 d-flex flex-column align-items-center">
    136. 

  136.                             <a href="" title=""
    137. 

  137.                                class="mb-2 w-100 py-1 text-center decoration-none border color777">待评价</a>
    138. 

  138.                             <a href="" title="" class="w-100 py-1 text-center decoration-none border color777">订单详情</a>
    139. 

  139.                         </div>
    140. 

  140.                     </div>
    141. 

  141.                 </div>
    142. 

    143. 

  143.                 <div class="border borderBlock my-4">
    144. 

  144.                     <div class="border-bottom borderSmColor p-4">
    145. 

  145.                         <div class="d-flex align-items-center">
    146. 

  146.                             <p class="fontSize16 textRed mr-4">待收货</p>
    147. 

  147.                             <a class="fontSize12" href="">查看物流</a>
    148. 

  148.                         </div>
    149. 

  149.                         <div class="d-flex justify-content-between">
    150. 

  150.                             <div class="color777">2021年12月1日 18:53 | 杨小黄 | 订单号:5160513358520018 | 在线支付</div>
    151. 

  151.                             <div>订单金额: <span class="textRed fontSize16">99.99</span>元</div>
    152. 

  152.                         </div>
    153. 

  153.                     </div>
    154. 

  154.                     <div class="d-flex justify-content-between justify-content-center p-4">
    155. 

  155.                         <div class="w-80 d-flex">
    156. 

  156.                             <a href="" title=""><img src="./img/g1.jpg" alt=""></a>
    157. 

  157.                             <div class="ml-2 d-flex flex-column">
    158. 

  158.                                 <a href="" title="" class="fontSize12 mb-3">家用创意菜盘子圆盘 釉下彩复古</a>
    159. 

  159.                                 <a href="" title="" class="fontSize12">￥99.00 x 1</a>
    160. 

  160.                             </div>
    161. 

  161.                         </div>
    162. 

  162.                         <div class="w-15 d-flex flex-column align-items-center">
    163. 

  163.                             <a href="" title=""
    164. 

  164.                                class="mb-2 w-100 py-1 text-center decoration-none border textWhite bgRed">确认收货</a>
    165. 

  165.                             <a href="" title="" class="w-100 py-1 text-center decoration-none border color777">订单详情</a>
    166. 

  166.                         </div>
    167. 

  167.                     </div>
    168. 

  168.                 </div>
    169. 

    170. 

  170.                 <div class="border borderBlock my-4">
    171. 

  171.                     <div class="border-bottom borderSmColor p-4">
    172. 

  172.                         <div class="d-flex align-items-center">
    173. 

  173.                             <p class="fontSize16 textRed mr-4">待支付</p>
    174. 

  174.                             <a class="fontSize12" href=""></a>
    175. 

  175.                         </div>
    176. 

  176.                         <div class="d-flex justify-content-between">
    177. 

  177.                             <div class="color777">2021年12月1日 18:53 | 杨小黄 | 订单号:5160513358520018 | 在线支付</div>
    178. 

  178.                             <div>订单金额: <span class="textRed fontSize16">99.99</span>元</div>
    179. 

  179.                         </div>
    180. 

  180.                     </div>
    181. 

  181.                     <div class="d-flex justify-content-between justify-content-center p-4">
    182. 

  182.                         <div class="w-80 d-flex">
    183. 

  183.                             <a href="" title=""><img src="./img/g1.jpg" alt=""></a>
    184. 

  184.                             <div class="ml-2 d-flex flex-column">
    185. 

  185.                                 <a href="" title="" class="fontSize12 mb-3">家用创意菜盘子圆盘 釉下彩复古</a>
    186. 

  186.                                 <a href="" title="" class="fontSize12">￥99.00 x 1</a>
    187. 

  187.                             </div>
    188. 

  188.                         </div>
    189. 

  189.                         <div class="w-15 d-flex flex-column align-items-center">
    190. 

  190.                             <a href="" title=""
    191. 

  191.                                class="mb-2 w-100 py-1 text-center decoration-none border textWhite bgRed">立即支付</a>
    192. 

  192.                             <a href="" title="" class="w-100 py-1 text-center decoration-none border color777">订单详情</a>
    193. 

  193.                         </div>
    194. 

  194.                     </div>
    195. 

  195.                 </div>
    196. 

    197. 

  197.                 <div class="border borderBlock my-4">
    198. 

  198.                     <div class="border-bottom borderSmColor p-4">
    199. 

  199.                         <div class="d-flex align-items-center">
    200. 

  200.                             <p class="fontSize16 color777 mr-4">已关闭</p>
    201. 

  201.                             <a class="fontSize12" href=""></a>
    202. 

  202.                         </div>
    203. 

  203.                         <div class="d-flex justify-content-between">
    204. 

  204.                             <div class="color777">2021年12月1日 18:53 | 杨小黄 | 订单号:5160513358520018 | 在线支付</div>
    205. 

  205.                             <div>订单金额: <span class="textRed fontSize16">99.99</span>元</div>
    206. 

  206.                         </div>
    207. 

  207.                     </div>
    208. 

  208.                     <div class="d-flex justify-content-between justify-content-center p-4">
    209. 

  209.                         <div class="w-80 d-flex">
    210. 

  210.                             <a href="" title=""><img src="./img/g1.jpg" alt=""></a>
    211. 

  211.                             <div class="ml-2 d-flex flex-column">
    212. 

  212.                                 <a href="" title="" class="fontSize12 mb-3">家用创意菜盘子圆盘 釉下彩复古</a>
    213. 

  213.                                 <a href="" title="" class="fontSize12">￥99.00 x 1</a>
    214. 

  214.                             </div>
    215. 

  215.                         </div>
    216. 

  216.                         <div class="w-15 d-flex flex-column align-items-center">
    217. 

  217.                             <a href="" title=""
    218. 

  218.                                class="mb-2 w-100 py-1 text-center decoration-none border color777">立即支付</a>
    219. 

  219.                             <a href="" title="" class="w-100 py-1 text-center decoration-none border color777">订单详情</a>
    220. 

  220.                         </div>
    221. 

  221.                     </div>
    222. 

  222.                 </div>
    223. 

    224. 

  224.                 <div class="d-flex justify-content-center align-items-center">
    225. 

  225.                     <span class="iconfont icon-xiangzuojiantou"></span>
    226. 

  226.                     <div class="mx-4 bg8e py-1 px-3 textWhite">1</div>
    227. 

  227.                     <span class="iconfont icon-xiangyoujiantou"></span>
    228. 

  228.                 </div>
    229. 

    230. 

  230.             </div>
    231. 

  231.         </section>
    232. 

  232.     </section>
    233. 

  233. </section>
    234. 

    235. 

  235. <!--底部-->
    236. 

  236. <footer class="container-full border-top mt-4">
    237. 

  237.     <!--上部分-->
    238. 

  238.     <section class="container d-flex justify-content-around">
    239. 

  239.         <div class="d-flex align-items-center">
    240. 

  240.             <img src="./img/foot1.png" alt="" class="w-53px">
    241. 

  241.             <span class="ml-2 fontSize14">7天无理由退货</span>
    242. 

  242.         </div>
    243. 

  243.         <div class="border-right"></div>
    244. 

  244.         <div class="d-flex align-items-center">
    245. 

  245.             <img src="./img/foot2.png" alt="" class="w-53px">
    246. 

  246.             <span class="ml-2 fontSize14">15天免费换货</span>
    247. 

  247.         </div>
    248. 

  248.         <div class="border-right"></div>
    249. 

  249.         <div class="d-flex align-items-center">
    250. 

  250.             <img src="./img/foot3.png" alt="" class="w-53px">
    251. 

  251.             <span class="ml-2 fontSize14">满599包邮</span>
    252. 

  252.         </div>
    253. 

  253.         <div class="border-right"></div>
    254. 

  254.         <div class="d-flex align-items-center">
    255. 

  255.             <img src="./img/foot4.png" alt="" class="w-53px">
    256. 

  256.             <span class="ml-2 fontSize14">手机特色服务</span>
    257. 

  257.         </div>
    258. 

  258.     </section>
    259. 

    260. 

  260.     <!--下部分-->
    261. 

  261.     <section class="p-4 bgBlack text-center textWhite">
    262. 

  262.         <div>最家家居©2013-2017公司版权所有 京ICP备080100-44备0000111000号</div>
    263. 

  263.         <div>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
    264. 

  264.     </section>
    265. 

  265. </footer>
    266. 

    267. 

  267. </body>
    268. 

  268. </html>
    269.

某商城登录注册-购物车订单支付-个人中心所有页面

  • 个人中心 - 订单信息 personalOrderInfo.html
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Ewshop - personalOrderInfo</title>
    6. 

  6.     <link rel="stylesheet" href="./css/base.css"/>
    7. 

  7.     <link rel="stylesheet" href="./css/eduwork.css"/>
    8. 

  8.     <link rel="stylesheet" href="./css/layout.css">
    9. 

  9.     <link rel="stylesheet" href="./css/personal.css">
    10. 

  10.     <link rel="stylesheet" href="//at.alicdn.com/t/font_2946534_nvos7wgzrcf.css">
    11. 

  11.     <link rel="icon" href="./img/icon.png"/>
    12. 

  12. </head>
    13. 

  13. <body>
    14. 

    15. 

  15. <!--头部-->
    16. 

  16. <header class="container d-flex justify-content-between">
    17. 

  17.     <div class="border-0"><img src="./img/logo.png" alt="logo"></div>
    18. 

  18.     <div class="d-flex justify-content-center align-items-center">
    19. 

  19.         <a href="" title="登录" class="fontSize14">登录</a>
    20. 

  20.         <span class="mx-1">|</span>
    21. 

  21.         <a href="" title="注册" class="fontSize14">注册</a>
    22. 

  22.         <form class="d-flex border-bottom py-1 px-2 mx-2" action="">
    23. 

  23.             <input type="text" name="search" placeholder="热门搜索：细说php" class="border-0"/>
    24. 

  24.             <button class="border-0 bg-transparent iconfont icon-sousuo fontSize20 fontIcon120"></button>
    25. 

  25.         </form>
    26. 

  26.         <div class="d-flex justify-content-center align-items-center font">
    27. 

  27.             <i class="iconfont icon-200yonghu_yonghu fontSize20 fontIcon120"></i>
    28. 

  28.             <i class="iconfont icon-erweima fontIcon120 px-2"></i>
    29. 

  29.             <i class="iconfont icon-gouwuchekong fontIcon120"></i>
    30. 

  30.         </div>
    31. 

  31.     </div>
    32. 

  32. </header>
    33. 

    34. 

  34. <!--导航-->
    35. 

  35. <nav class="bcontainer-full">
    36. 

  36.     <ul class="d-flex justify-content-center m-auto">
    37. 

  37.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">首页</a></li>
    38. 

  38.         <li class="mx-4 px-2 py-2">
    39. 

  39.             <a href="#" title="" class="hover">编程图书</a>
    40. 

  40.             <ul class="position-absolute d-flex justify-content-center w-100 left-0 my-2 py-3">
    41. 

  41.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    42. 

  42.                 </li>
    43. 

  43.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    44. 

  44.                 </li>
    45. 

  45.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    46. 

  46.                 </li>
    47. 

  47.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    48. 

  48.                 </li>
    49. 

  49.             </ul>
    50. 

  50.         </li>
    51. 

  51.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">算法图书</a></li>
    52. 

  52.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">AI图书</a></li>
    53. 

  53.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">人工智能</a></li>
    54. 

  54.     </ul>
    55. 

  55. </nav>
    56. 

    57. 

  57. <!--侧栏-->
    58. 

  58. <aside class="position-fixed right-10 d-flex flex-column jusify-content-between z-index100">
    59. 

  59.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-gouwuchekong"></span>
    60. 

  60.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-sousuo"></span>
    61. 

  61.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-200yonghu_yonghu"></span>
    62. 

  62.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-erweima"></span>
    63. 

  63. </aside>
    64. 

    65. 

  65. <!--面包屑-->
    66. 

  66. <section class="container-full mt-4 py-1 border-top border-bottom">
    67. 

  67.     <div class="container">
    68. 

  68.         <a href="" title="" class="fontSize12 color777">首页</a>
    69. 

  69.         <span class="mx-2">/</span>
    70. 

  70.         <a href="" title="" class="fontSize12 color777">个人中心</a>
    71. 

  71.         <span class="mx-2">/</span>
    72. 

  72.         <span class="fontSize12">我的订单</span>
    73. 

  73.     </div>
    74. 

  74. </section>
    75. 

    76. 

  76. <!--个人中心-->
    77. 

  77. <section class="container-full bgColor">
    78. 

  78.     <section class="container d-flex justify-content-between">
    79. 

  79.         <section class="border bgWhite flex-basis20 my-2 mr-1">
    80. 

  80.             <div class="border-bottom border-dark">
    81. 

  81.                 <div class="w-45 m-auto p-2"><img src="./img/tx.png" alt=""></div>
    82. 

  82.                 <div class="text-center mb-3">
    83. 

  83.                     <span class="fontSize14">[<a href="" title="">羊羊羊</a>]</span>
    84. 

  84.                     <span class="fontSize14 ml-1">[<a href="" title="">退出登录</a>]</span>
    85. 

  85.                 </div>
    86. 

  86.             </div>
    87. 

  87.             <ul class="d-flex flex-column align-items-center mb-2">
    88. 

  88.                 <li class="my-2 fontSize16 bold">我的交易</li>
    89. 

  89.                 <li class="my-2"><a href="" title="" class="color777">我的购物车</a></li>
    90. 

  90.                 <li class="my-2"><a href="" title="" class="textRed">我的订单</a></li>
    91. 

  91.                 <li class="my-2"><a href="" title="" class="color777">评价晒单</a></li>
    92. 

    93. 

  93.                 <li class="my-2 fontSize16 bold">个人中心</li>
    94. 

  94.                 <li class="my-2"><a href="" title="" class="color777">我的中心</a></li>
    95. 

  95.                 <li class="my-2"><a href="" title="" class="color777">地址管理</a></li>
    96. 

    97. 

  97.                 <li class="my-2 fontSize16 bold">账户管理</li>
    98. 

  98.                 <li class="my-2"><a href="" title="" class="color777">个人信息</a></li>
    99. 

  99.                 <li class="my-2"><a href="" title="" class="color777">密码修改</a></li>
    100. 

  100.             </ul>
    101. 

  101.         </section>
    102. 

  102.         <section class="border bgWhite flex-basis80 my-2 ml-1 p-4">
    103. 

  103.             <div class="mx-4 py-4 border-bottom">
    104. 

  104.                 <div class="d-flex align-items-center">
    105. 

  105.                     <h3 class="fontSize20 mr-4">我的订单</h3>
    106. 

  106.                     <a href="" title="">请谨防钓鱼链接活诈骗电话，了解更多></a>
    107. 

  107.                 </div>
    108. 

  108.                 <div class="fontSize16 mt-3">订单号: 54163846846848468</div>
    109. 

  109.             </div>
    110. 

    111. 

  111.             <div class="mx-4 py-4 border-bottom">
    112. 

  112.                 <div class="fontSize16">已收货</div>
    113. 

  113.                 <div class="d-flex align-items-center mt-2">
    114. 

  114.                     <a href="" title="" class="ml-1"><img src="./img/g1.jpg" alt=""></a>
    115. 

  115.                     <a href="" title="" class="ml-4 fontSize14 color777">家用创意菜盘子圆盘 釉下彩复古</a>
    116. 

  116.                     <a href="" title="" class="ml-4 fontSize14 color777">￥99.00 x 1</a>
    117. 

  117.                 </div>
    118. 

  118.             </div>
    119. 

    120. 

  120.             <div class="mx-4 py-4 border-bottom">
    121. 

  121.                 <div class="fontSize16">收获信息</div>
    122. 

  122.                 <div class="mt-2 fontSize12 color777">姓名: 杨小黄</div>
    123. 

  123.                 <div class="mt-2 fontSize12 color777">电话: 135****1234</div>
    124. 

  124.                 <div class="mt-2 fontSize12 color777">收货地址: 河北 唐山市 路北区 高新软件园</div>
    125. 

  125.             </div>
    126. 

    127. 

  127.             <div class="mx-4 py-4 border-bottom">
    128. 

  128.                 <div class="fontSize16">支付方式及送货时间</div>
    129. 

  129.                 <div class="mt-2 fontSize12 color777">支付方式: 在线支付</div>
    130. 

  130.                 <div class="mt-2 fontSize12 color777">送货时间: 不限送货时间</div>
    131. 

  131.             </div>
    132. 

    133. 

  133.             <div class="mx-4 py-4 border-bottom">
    134. 

  134.                 <div class="fontSize16">商品总价: <span class="textRed">￥99.00</span></div>
    135. 

  135.                 <div class="mt-2 fontSize12 color777">运费: <span class="textRed">￥99.00</span></div>
    136. 

  136.                 <div class="mt-2 fontSize12 color777">订单金额: <span class="textRed">￥99.00</span></div>
    137. 

  137.                 <div class="mt-2 fontSize12 color777">实付金额: <span class="textRed">￥99.00</span></div>
    138. 

  138.             </div>
    139. 

    140. 

  140.         </section>
    141. 

  141.     </section>
    142. 

  142. </section>
    143. 

    144. 

  144. <!--底部-->
    145. 

  145. <footer class="container-full border-top mt-4">
    146. 

  146.     <!--上部分-->
    147. 

  147.     <section class="container d-flex justify-content-around">
    148. 

  148.         <div class="d-flex align-items-center">
    149. 

  149.             <img src="./img/foot1.png" alt="" class="w-53px">
    150. 

  150.             <span class="ml-2 fontSize14">7天无理由退货</span>
    151. 

  151.         </div>
    152. 

  152.         <div class="border-right"></div>
    153. 

  153.         <div class="d-flex align-items-center">
    154. 

  154.             <img src="./img/foot2.png" alt="" class="w-53px">
    155. 

  155.             <span class="ml-2 fontSize14">15天免费换货</span>
    156. 

  156.         </div>
    157. 

  157.         <div class="border-right"></div>
    158. 

  158.         <div class="d-flex align-items-center">
    159. 

  159.             <img src="./img/foot3.png" alt="" class="w-53px">
    160. 

  160.             <span class="ml-2 fontSize14">满599包邮</span>
    161. 

  161.         </div>
    162. 

  162.         <div class="border-right"></div>
    163. 

  163.         <div class="d-flex align-items-center">
    164. 

  164.             <img src="./img/foot4.png" alt="" class="w-53px">
    165. 

  165.             <span class="ml-2 fontSize14">手机特色服务</span>
    166. 

  166.         </div>
    167. 

  167.     </section>
    168. 

    169. 

  169.     <!--下部分-->
    170. 

  170.     <section class="p-4 bgBlack text-center textWhite">
    171. 

  171.         <div>最家家居©2013-2017公司版权所有 京ICP备080100-44备0000111000号</div>
    172. 

  172.         <div>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
    173. 

  173.     </section>
    174. 

  174. </footer>
    175. 

    176. 

  176. </body>
    177. 

  177. </html>
    178.

某商城登录注册-购物车订单支付-个人中心所有页面

  • 个人中心 - 修改密码 personalPwd.html
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <title>Ewshop - personalPwd</title>
    6. 

  6.     <link rel="stylesheet" href="./css/base.css"/>
    7. 

  7.     <link rel="stylesheet" href="./css/eduwork.css"/>
    8. 

  8.     <link rel="stylesheet" href="./css/layout.css">
    9. 

  9.     <link rel="stylesheet" href="./css/personal.css">
    10. 

  10.     <link rel="stylesheet" href="//at.alicdn.com/t/font_2946534_nvos7wgzrcf.css">
    11. 

  11.     <link rel="icon" href="./img/icon.png"/>
    12. 

  12. </head>
    13. 

  13. <body>
    14. 

    15. 

  15. <!--头部-->
    16. 

  16. <header class="container d-flex justify-content-between">
    17. 

  17.     <div class="border-0"><img src="./img/logo.png" alt="logo"></div>
    18. 

  18.     <div class="d-flex justify-content-center align-items-center">
    19. 

  19.         <a href="" title="登录" class="fontSize14">登录</a>
    20. 

  20.         <span class="mx-1">|</span>
    21. 

  21.         <a href="" title="注册" class="fontSize14">注册</a>
    22. 

  22.         <form class="d-flex border-bottom py-1 px-2 mx-2" action="">
    23. 

  23.             <input type="text" name="search" placeholder="热门搜索：细说php" class="border-0"/>
    24. 

  24.             <button class="border-0 bg-transparent iconfont icon-sousuo fontSize20 fontIcon120"></button>
    25. 

  25.         </form>
    26. 

  26.         <div class="d-flex justify-content-center align-items-center font">
    27. 

  27.             <i class="iconfont icon-200yonghu_yonghu fontSize20 fontIcon120"></i>
    28. 

  28.             <i class="iconfont icon-erweima fontIcon120 px-2"></i>
    29. 

  29.             <i class="iconfont icon-gouwuchekong fontIcon120"></i>
    30. 

  30.         </div>
    31. 

  31.     </div>
    32. 

  32. </header>
    33. 

    34. 

  34. <!--导航-->
    35. 

  35. <nav class="bcontainer-full">
    36. 

  36.     <ul class="d-flex justify-content-center m-auto">
    37. 

  37.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">首页</a></li>
    38. 

  38.         <li class="mx-4 px-2 py-2">
    39. 

  39.             <a href="#" title="" class="hover">编程图书</a>
    40. 

  40.             <ul class="position-absolute d-flex justify-content-center w-100 left-0 my-2 py-3">
    41. 

  41.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    42. 

  42.                 </li>
    43. 

  43.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    44. 

  44.                 </li>
    45. 

  45.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    46. 

  46.                 </li>
    47. 

  47.                 <li class="mx-4 px-4 py-2"><a href="#" title="" class="textWhite bold hover">细说php</a>
    48. 

  48.                 </li>
    49. 

  49.             </ul>
    50. 

  50.         </li>
    51. 

  51.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">算法图书</a></li>
    52. 

  52.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">AI图书</a></li>
    53. 

  53.         <li class="mx-4 px-2 py-2"><a href="#" title="" class="hover">人工智能</a></li>
    54. 

  54.     </ul>
    55. 

  55. </nav>
    56. 

    57. 

  57. <!--侧栏-->
    58. 

  58. <aside class="position-fixed right-10 d-flex flex-column jusify-content-between z-index100">
    59. 

  59.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-gouwuchekong"></span>
    60. 

  60.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-sousuo"></span>
    61. 

  61.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-200yonghu_yonghu"></span>
    62. 

  62.     <span class="border d-flex justify-content-center align-items-center w-25px h-25px p-3 my-1 cursor fontIcon120 bgDb iconfont icon-erweima"></span>
    63. 

  63. </aside>
    64. 

    65. 

  65. <!--面包屑-->
    66. 

  66. <section class="container-full mt-4 py-1 border-top border-bottom">
    67. 

  67.     <div class="container">
    68. 

  68.         <a href="" title="" class="fontSize12 color777">首页</a>
    69. 

  69.         <span class="mx-2">/</span>
    70. 

  70.         <span class="fontSize12">个人中心</span>
    71. 

  71.     </div>
    72. 

  72. </section>
    73. 

    74. 

  74. <!--个人中心-->
    75. 

  75. <section class="container-full bgColor">
    76. 

  76.     <section class="container d-flex justify-content-between">
    77. 

  77.         <section class="border bgWhite flex-basis20 my-2 mr-1">
    78. 

  78.             <div class="border-bottom border-dark">
    79. 

  79.                 <div class="w-45 m-auto p-2"><img src="./img/tx.png" alt=""></div>
    80. 

  80.                 <div class="text-center mb-3">
    81. 

  81.                     <span class="fontSize14">[<a href="" title="">羊羊羊</a>]</span>
    82. 

  82.                     <span class="fontSize14 ml-1">[<a href="" title="">退出登录</a>]</span>
    83. 

  83.                 </div>
    84. 

  84.             </div>
    85. 

  85.             <ul class="d-flex flex-column align-items-center mb-2">
    86. 

  86.                 <li class="my-2 fontSize16 bold">我的交易</li>
    87. 

  87.                 <li class="my-2"><a href="" title="" class="color777">我的购物车</a></li>
    88. 

  88.                 <li class="my-2"><a href="" title="" class="color777">我的订单</a></li>
    89. 

  89.                 <li class="my-2"><a href="" title="" class="color777">评价晒单</a></li>
    90. 

    91. 

  91.                 <li class="my-2 fontSize16 bold">个人中心</li>
    92. 

  92.                 <li class="my-2"><a href="" title="" class="color777">我的中心</a></li>
    93. 

  93.                 <li class="my-2"><a href="" title="" class="color777">地址管理</a></li>
    94. 

    95. 

  95.                 <li class="my-2 fontSize16 bold">账户管理</li>
    96. 

  96.                 <li class="my-2"><a href="" title="" class="color777">个人信息</a></li>
    97. 

  97.                 <li class="my-2"><a href="" title="" class="textRed">密码修改</a></li>
    98. 

  98.             </ul>
    99. 

  99.         </section>
    100. 

  100.         <section class="border bgWhite flex-basis80 my-2 ml-1 p-4">
    101. 

  101.             <div class="mx-4 py-4 border-bottom"><h3 class="fontSize20">修改密码</h3></div>
    102. 

  102.             <form action="" class="mx-4 my-2 py-4">
    103. 

  103.                 <div class="d-flex align-items-center my-4">
    104. 

  104.                     <div class="w-30 text-right mr-2">
    105. 

  105.                         <label for="old-password" class="fontSize16">原密码:</label>
    106. 

  106.                     </div>
    107. 

  107.                     <div class="w-60 text-left">
    108. 

  108.                         <input type="password" name="" id="old-password" class="p-1 w-50 border" placeholder="原密码">
    109. 

  109.                     </div>
    110. 

  110.                 </div>
    111. 

    112. 

  112.                 <div class="d-flex align-items-center my-4">
    113. 

  113.                     <div class="w-30 text-right mr-2">
    114. 

  114.                         <label for="new-password" class="fontSize16">新密码:</label>
    115. 

  115.                     </div>
    116. 

  116.                     <div class="w-60 text-left">
    117. 

  117.                         <input type="password" name="" id="new-password" class="p-1 w-50 border" placeholder="新密码">
    118. 

  118.                     </div>
    119. 

  119.                 </div>
    120. 

    121. 

  121.                 <div class="d-flex align-items-center my-4">
    122. 

  122.                     <div class="w-30 text-right mr-2">
    123. 

  123.                         <label for="repeat-password" class="fontSize16">重复密码:</label>
    124. 

  124.                     </div>
    125. 

  125.                     <div class="w-60 text-left">
    126. 

  126.                         <input type="password" name="" id="repeat-password" class="p-1 w-50 border" placeholder="重复密码">
    127. 

  127.                     </div>
    128. 

  128.                 </div>
    129. 

    130. 

  130.                 <div class="d-flex align-items-center my-4 py-4">
    131. 

  131.                     <div class="w-80 text-center">
    132. 

  132.                         <input type="button" value="提交" class="py-1 w-25 bgRed textWhite border">
    133. 

  133.                     </div>
    134. 

  134.                 </div>
    135. 

  135.             </form>
    136. 

  136.         </section>
    137. 

  137.     </section>
    138. 

  138. </section>
    139. 

    140. 

  140. <!--底部-->
    141. 

  141. <footer class="container-full border-top mt-4">
    142. 

  142.     <!--上部分-->
    143. 

  143.     <section class="container d-flex justify-content-around">
    144. 

  144.         <div class="d-flex align-items-center">
    145. 

  145.             <img src="./img/foot1.png" alt="" class="w-53px">
    146. 

  146.             <span class="ml-2 fontSize14">7天无理由退货</span>
    147. 

  147.         </div>
    148. 

  148.         <div class="border-right"></div>
    149. 

  149.         <div class="d-flex align-items-center">
    150. 

  150.             <img src="./img/foot2.png" alt="" class="w-53px">
    151. 

  151.             <span class="ml-2 fontSize14">15天免费换货</span>
    152. 

  152.         </div>
    153. 

  153.         <div class="border-right"></div>
    154. 

  154.         <div class="d-flex align-items-center">
    155. 

  155.             <img src="./img/foot3.png" alt="" class="w-53px">
    156. 

  156.             <span class="ml-2 fontSize14">满599包邮</span>
    157. 

  157.         </div>
    158. 

  158.         <div class="border-right"></div>
    159. 

  159.         <div class="d-flex align-items-center">
    160. 

  160.             <img src="./img/foot4.png" alt="" class="w-53px">
    161. 

  161.             <span class="ml-2 fontSize14">手机特色服务</span>
    162. 

  162.         </div>
    163. 

  163.     </section>
    164. 

    165. 

  165.     <!--下部分-->
    166. 

  166.     <section class="p-4 bgBlack text-center textWhite">
    167. 

  167.         <div>最家家居©2013-2017公司版权所有 京ICP备080100-44备0000111000号</div>
    168. 

  168.         <div>违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
    169. 

  169.     </section>
    170. 

  170. </footer>
    171. 

    172. 

  172. </body>
    173. 

  173. </html>
    174.

某商城登录注册-购物车订单支付-个人中心所有页面

上一篇： 爱新觉罗·永瑢：乾隆最全能的儿子，揭秘其生平

下一篇： PHP如何自定义扩展（二）之钩子功能

推荐阅读