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

博客列表 >结算页仿写--PHP培训第十期线上班

结算页仿写--PHP培训第十期线上班

宋明杰
宋明杰原创
2020年01月02日 14:47:30677浏览

结算页面仿写：

HTML代码：

  1. <body>
  2. <div class="js">
  3.     <div class="js-1">
  4.         <a href="#"><img src="../img/logo.png" alt=""></a>
  5.         <span>结算页</span>
  6.     </div>
  8.     <div class="js-2">
  9.         <div class="js-2a">
  10.             <span>确认收货地址</span>
  11.             <span>管理收货地址</span>
  12.         </div>
  13.         <div class="js-2b">
  14.             <div class="js-2b1">
  15.                 <span><i class="iconfont icon-icon-test6"></i> 寄送至：</span>
  16.             </div>
  17.             <div class="js-2b2">
  18.                 <div>
  19.                     <input type="radio" name="dizhi" id="dizhi">
  20.                     <label for="dizhi">四川省 成都市 高新区 天府三街228号 （张三 收）13900009999</label>
  21.                 </div>
  22.                 <div>
  23.                     <input type="radio" name="dizhi" id="dizhi">
  24.                     <label for="dizhi">四川省 成都市 高新区 天府三街228号 （张三 收）13900009999</label>
  25.                 </div>
  26.                 <div>
  27.                     <input type="radio" name="dizhi" id="dizhi">
  28.                     <label for="dizhi">四川省 成都市 高新区 天府三街228号 （张三 收）13900009999</label>
  29.                 </div>
  30.                 <div>
  31.                     <input type="radio" name="dizhi" id="dizhi">
  32.                     <label for="dizhi">四川省 成都市 高新区 天府三街228号 （张三 收）13900009999</label>
  33.                 </div>
  34.                 <span>使用其他地址</span>
  35.             </div>
  36.         </div>
  37.     </div>
  39.     <div class="js-3">
  40.         <div class="js-3a">
  41.             <span class="bt1">确认订单信息</span>
  42.             <span>宝贝信息</span>
  43.             <span>商品属性</span>
  44.             <span>单价</span>
  45.             <span>数量</span>
  46.             <span>优惠</span>
  47.             <span>小计</span>
  48.         </div>
  49.         <div class="js-3b">
  50.             <div class="js-3b1">
  51.                 <a href="#"><img src="../img/33.jpg" </a>
  52.                 <a href=""><span>移动固态硬盘500g苹果mac电脑type-c外置BOOT CAMP便携SSD</span></a>
  53.                 <span>颜色分类：256G[WTG]</span>
  54.                 <span>399.00</span>
  55.                 <span>1</span>
  56.                 <span>省170:爆款特卖</span>
  57.                 <span class="heji">229.00</span>
  58.             </div>
  59.             <div class="js-3b2">
  60.                 <span>给卖家留言：</span>
  61.                 <textarea>选填，请先和卖家协商一致</textarea>
  62.                 <span>运送方式：</span>
  63.                 <span>普通配送 快递费:15.00</span>
  64.                 <span class="heji">15.00</span>
  66.             </div>
  67.             <div class="js-3b3">
  68.                 <span>单款合计（含运费）</span>
  69.                 <span>￥260.00</span>
  70.             </div>
  71.         </div>
  72.         <div class="js-3b">
  73.             <div class="js-3b1">
  74.                 <a href="#"><img src="../img/33.jpg" </a>
  75.                 <a href=""><span>移动固态硬盘500g苹果mac电脑type-c外置BOOT CAMP便携SSD</span></a>
  76.                 <span>颜色分类：256G[WTG]</span>
  77.                 <span>399.00</span>
  78.                 <span>1</span>
  79.                 <span>省170:爆款特卖</span>
  80.                 <span class="heji">229.00</span>
  81.             </div>
  82.             <div class="js-3b2">
  83.                 <span>给卖家留言：</span>
  84.                 <textarea>选填，请先和卖家协商一致</textarea>
  85.                 <span>运送方式：</span>
  86.                 <span>普通配送 快递费:15.00</span>
  87.                 <span class="heji">15.00</span>
  89.             </div>
  90.             <div class="js-3b3">
  91.                 <span>单款合计（含运费）</span>
  92.                 <span>￥260.00</span>
  93.             </div>
  94.         </div>
  95.         <div class="js-3b">
  96.             <div class="js-3b1">
  97.                 <a href="#"><img src="../img/33.jpg" </a>
  98.                 <a href=""><span>移动固态硬盘500g苹果mac电脑type-c外置BOOT CAMP便携SSD</span></a>
  99.                 <span>颜色分类：256G[WTG]</span>
  100.                 <span>399.00</span>
  101.                 <span>1</span>
  102.                 <span>省170:爆款特卖</span>
  103.                 <span class="heji">229.00</span>
  104.             </div>
  105.             <div class="js-3b2">
  106.                 <span>给卖家留言：</span>
  107.                 <textarea>选填，请先和卖家协商一致</textarea>
  108.                 <span>运送方式：</span>
  109.                 <span>普通配送 快递费:15.00</span>
  110.                 <span class="heji">15.00</span>
  112.             </div>
  113.             <div class="js-3b3">
  114.                 <span>单款合计（含运费）</span>
  115.                 <span>￥260.00</span>
  116.             </div>
  117.         </div>
  119.     </div>
  121.     <div class="js-4">
  122.         <div class="js-4a">
  123.             <div>
  124.                 <span class="js41">实付款：</span>
  125.                 <span class="js42">￥3588.88</span>
  126.             </div>
  127.             <div>
  128.                 <span class="js41">寄送至：</span>
  129.                 <span class="js43">四川省 成都市 高新区 天府三街228号6栋6楼</span>
  130.             </div>
  131.             <div>
  132.                 <span class="js41">收货人：</span>
  133.                 <span class="js43">张三 13900009999</span>
  134.             </div>
  135.             <div class="js-4b">
  136.                 <!--            <a class="js45">返回购物车</a>-->
  137.                 <input type="button" class="js45" value="返回物车">
  138.                 <button class="js46">提交订单</button>
  139.             </div>
  140.         </div>
  141.     </div>
  142. </div>
  144. </body>

CSS代码：

  1. @import "../zujian_reset.css";
  3. *{
  4.     /*border: 1px solid red;*/
  5.     letter-spacing: 1px;
  6. }
  8. .js{
  9.     width: 1000px;
  10.     margin: auto;
  11.     /*border: 1px solid red;*/
  12. }
  14. .js > .js-1{
  15.     height: 60px;
  16.     display: flex;
  17.     align-items: flex-end;
  18. }
  19. .js > .js-1 img{
  20.     height: 60px;
  21.     display: block;
  22. }
  23. .js > .js-1 span{
  24.     font-size: 20px;
  25.     color: #333333;
  26.     margin-left: 8px;
  28. }
  30. .js > .js-2 > .js-2a{
  31.     display: flex;
  32.     justify-content: space-between;
  33.     margin-top: 25px;
  34.     padding-bottom: 3px;
  35.     border-bottom: 2px solid #999999;
  36.     /*letter-spacing: 1px;*/
  37. }
  38. .js > .js-2 > .js-2a span:first-of-type{
  39.     font-size: 14px;
  41. }
  42. .js > .js-2 > .js-2a span:last-of-type{
  43.     font-size: 10px;
  44.     color: #0077aa;
  45.     align-self: flex-end;
  46. }
  48. .js > .js-2 > .js-2b{
  49.     display: flex;
  50.     margin:10px
  51. }
  52. .js > .js-2 > .js-2b > .js-2b1{
  53.     color: red;
  54.     font-size: 12px;
  55.     margin-right: 5px;
  57. }
  58. .js > .js-2 > .js-2b > .js-2b2{
  59.     display: flex;
  60.     flex-direction: column;
  61.     font-size: 12px;
  62. }
  63. .js > .js-2 > .js-2b > .js-2b2 div{
  64.     margin: 3px 0;
  65. }
  66. .js > .js-2 > .js-2b > .js-2b2 span{
  67.     margin-top: 8px;
  68.     color: #0077aa;
  69. }
  71. .js > .js-3 > .js-3a{
  72.     margin-top: 20px;
  73.     border-bottom: 1px solid #999999;
  74.     display: grid;
  75.     grid-template: "a1 a1 a1 a1 a1 a1 " 30px
  76.                    "b1 b2 b3 b4 b5 b6 " 20px
  77.                  /3fr 1.5fr 1fr 1fr 1.5fr 1fr;
  78. }
  79. .js > .js-3 > .js-3a span{
  80.     font-size: 11px;
  81.     margin-left: 15px;
  82. }
  83. .js > .js-3 > .js-3a > .bt1 {
  84.     grid-area: a1;
  85.     font-size: 14px;
  86.     margin: 0;
  87. }
  89. .js > .js-3 > .js-3b > .js-3b1{
  90.     margin-top: 20px;
  91.     padding: 10px 0;
  92.     box-sizing: border-box;
  93.     background: #f0f6ff;
  94.     grid-column-gap: 3px;
  95.     border-top: 1px dashed #b3d4fc;
  96.     /*border-bottom: 1px dashed #b3d4fc;*/
  97.     display: grid;
  98.     grid-template: "a1 a2 a3 a4 a5 a6 a7" 70px
  99.                  /0.8fr 2.2fr 1.5fr 1fr 1fr 1.5fr 1fr;
  100. }
  101. .js > .js-3 > .js-3b > .js-3b1 img{
  102.     width: 70px;
  103.     height: 70px;
  104.     margin-left: 10px;
  105. }
  106. .js > .js-3 > .js-3b > .js-3b1 span{
  107.     font-size: 13px;
  108.     color: #333333;
  109. }
  110. .js > .js-3 > .js-3b > .js-3b1 > .heji{
  111.     font-size: 18px;
  112.     color: red;
  113. }
  114. .js > .js-3 > .js-3b > .js-3b2{
  115.     margin-top: 3px;
  116.     padding: 10px;
  117.     box-sizing: border-box;
  118.     background: #f0f6ff;
  119.     grid-column-gap: 5px;
  120.     display: grid;
  121.     grid-template: "a1 a2 a3 a4 a5" 60px
  122.                  /1fr 4fr 1fr 3fr 1fr;
  123. }
  124. .js > .js-3 > .js-3b > .js-3b2{
  125.     font-size: 13px;
  126.     color: #333333;
  127. }
  128. .js > .js-3 > .js-3b > .js-3b2 :nth-of-type(2){
  129.     place-self: start end;
  130. }
  131. .js > .js-3 > .js-3b > .js-3b2 > .heji {
  132.     font-size: 18px;
  133.     color: red;
  134. }
  135. .js > .js-3 > .js-3b > .js-3b2 textarea{
  136.     width: 350px;
  137.     height: 60px;
  138.     color: #999999;
  139.     font-size: 11px;
  140.     text-indent: 1em;
  141.     resize: none;
  142. }
  143. .js > .js-3 > .js-3b > .js-3b3 {
  144.     margin-top: 3px;
  145.     padding: 20px;
  146.     box-sizing: border-box;
  147.     background: #f0f6ff;
  148.     border-bottom: 1px dashed #b3d4fc;
  149.     display: flex;
  150.     justify-content: flex-end;
  151. }
  152. .js > .js-3 > .js-3b > .js-3b3 span {
  153.     font-size: 15px;
  154.     color: #333333;
  155.     width: 160px;
  156. }
  157. .js > .js-3 > .js-3b > .js-3b3 :last-of-type{
  158.     font-size: 18px;
  159.     color: red;
  160.     width: 95px;
  161. }
  163. .js > .js-4{
  164.     display: flex;
  165.     flex-direction: column;
  166.     margin: 20px 0;
  167.     border-top: 1px solid #666666;
  168.     /*justify-content: flex-end;*/
  169. }
  170. .js > .js-4 > .js-4a{
  171.     display: flex;
  172.     margin-top: 15px;
  173.     align-self: flex-end;
  174.     flex-direction: column;
  175.     border: 1px solid red;
  176.     width: 360px;
  177.     height: 100%;
  178. }
  179. .js > .js-4 > .js-4a div{
  180.     display: flex;
  181.     justify-content: flex-end;
  182.     margin-top: 8px;
  183. }
  184. .js > .js-4 > .js-4a div > .js41{
  185.     font-size: 13px;
  186.     color: #333333;
  187.     align-self: center;
  189. }
  190. .js > .js-4 > .js-4a div > .js42{
  191.     font-size: 26px;
  192.     color: red;
  193.     margin-right: 5px;
  194. }
  195. .js > .js-4 > .js-4a div > .js43 {
  196.     font-size: 12px;
  197.     color: #666666;
  198.     margin-right: 5px;
  199. }
  200. .js > .js-4 > .js-4a >.js-4b > .js45{
  201.     color: dodgerblue;
  202.     width: 50%;
  203.     height: 35px;
  204.     border: none;
  205.     border-top: 1px solid red;
  206. }
  207. .js > .js-4 > .js-4a > .js-4b > .js46{
  208.     font-size: 18px;
  209.     width: 50%;
  210.     height: 35px;
  211.     color: #ffffff;
  212.     background: red;
  213.     border: 1px solid red;
  214. }

运行结果截图：

上一条：仿写京东购物车（12.31作业）+PHP培训十期线上班下一条：12月31日larave 作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多