简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 结算页仿写--PHP培训第十期线上班
Blogger Information
Blog 11
fans 0
comment 0
visits 8056
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
结算页仿写--PHP培训第十期线上班
宋明杰
Original
678 people have browsed it

结算页面仿写：

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. }

运行结果截图：

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：看上去功能是完整的, 不错的
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！