简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 元旦作业+购物车结算页面的编写+10期线上班
Blogger Information
Blog 25
fans 1
comment 1
visits 17285
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
元旦作业+购物车结算页面的编写+10期线上班
江川林
Original
735 people have browsed it

购物车结算页面的编写

1.首先将购物车大概的布局想象出来，尽量画出来，或者参照有个现有的界面进行模仿

2.按照布局内容编写HTML代码

3.用CSS进行排版和样式改变

以下是效果图：

以下是HTML代码和CSS代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>仿京东商城购物车结算页面</title>
  6.     <style>
  7.         /*初始化*/
  8.         * :not(body){
  9.             padding: 0;
  10.             margin: 0;
  11.             /*outline: 1px dashed red;*/
  12.             font-size: 13px;
  13.         }
  14.         a {
  15.             text-decoration: none;
  16.             color: black;
  17.             font-size: 13px
  18.         }
  19.         ul,li {
  20.             list-style: none;
  21.         }
  23.         img {
  24.             width: 100%;
  25.         }
  27.         /*header的布局*/
  28.         header {
  29.             height: 30px;
  30.             display: flex;
  31.             justify-content: space-between;
  32.             background-color: #cccccc;
  33.         }
  34.         header > .item1 {
  35.             padding: 5px 10px;
  36.             box-sizing: border-box;
  37.             margin-left: 200px;
  38.         }
  39.         header > .item2 {
  40.             padding: 5px 10px;
  41.             box-sizing: border-box;
  42.             margin-right: 200px;
  43.         }
  44.         header span {
  45.             padding: 0 5px;
  46.         }
  47.         header > .item2 > a > span:hover {
  48.             color: red;
  49.         }
  51.         /*LOGO+search布局*/
  52.         .title {
  53.             display: flex;
  54.             height: 100px;
  55.             justify-content: space-between;
  56.         }
  57.         .title > .logo {
  58.             margin-left: 200px;
  59.             align-self: center;
  60.         }
  61.         .title > .logo > a > img {
  62.             width: 100px;
  63.             height: 80px;
  64.         }
  65.         .title > .logo > span {
  66.             font-size: 20px;
  67.             padding-left: 10px;
  68.         }
  69.         .title > .search {
  70.             margin-right: 200px;
  71.             align-self: center;
  72.             display: flex;
  73.         }
  74.         .title > .search  > input {
  75.             width: 300px;
  76.             height: 30px;
  77.             border: 3px solid red;
  78.         }
  79.         .title > .search > label {
  80.             height: 30px;
  81.             width: 50px;
  82.             background-color: red;
  83.             color: white;
  84.             text-align: center;
  85.             line-height: 30px;
  86.         }
  87.         /*购物车详情布局---上部分*/
  88.         .shopping-cart {
  89.             width: 940px;
  90.             margin: auto;
  91.             display: flex;
  92.             flex-direction: column;
  93.         }
  94.         .shopping-cart > .detail {
  95.             height: 40px;
  96.             display: flex;
  97.             text-align: center;
  98.             line-height: 40px;
  99.             justify-content: space-between;
  100.             background-color: #cccccc;
  101.             border: 1px solid black;
  102.         }
  103.         .shopping-cart > .detail > .detail1 {
  104.             margin-left: 10px;
  105.         }
  106.         .shopping-cart > .detail > .detail1 > span {
  107.             margin-left: 50px;
  108.         }
  109.         .shopping-cart > .detail > .detail2 {
  110.             margin-right: 100px;
  111.         }
  112.         .shopping-cart > .detail > .detail2 > span {
  113.             margin: 0 50px;
  114.         }
  116.         /*购物车详情布局---下部分*/
  117.         .shopping-cart > .shop-list {
  118.             height: 80px;
  119.             display: flex;
  120.             margin-left: 10px;
  121.             justify-content: space-around;
  122.         }
  123.         .shopping-cart > .shop-list input:first-of-type {
  124.             position: relative;
  125.             left: -35px;
  126.         }
  128.         .shopping-cart > .shop-list img {
  129.             height: 50px;
  130.             width: 50px;
  131.             position: relative;
  132.             left: -70px;
  133.             display: block;
  134.             top:20px;
  135.         }
  136.         .shopping-cart > .shop-list span:first-of-type {
  137.             width: 200px;
  138.             position: relative;
  139.             left: -140px;
  140.             align-self: center;
  141.         }
  142.         .shopping-cart > .shop-list span:nth-of-type(2){
  143.             position: relative;
  144.             left: -160px;
  145.             align-self: center;
  146.         }
  147.         .shopping-cart > .shop-list input:last-of-type {
  148.             position: relative;
  149.             left: -150px;
  150.             width: 50px;
  151.             height: 20px;
  152.             align-self: center;
  153.         }
  154.         .shopping-cart > .shop-list span:nth-of-type(3){
  155.             position: relative;
  156.             left: -140px;
  157.             align-self: center;
  158.         }
  159.         .shopping-cart > .shop-list span:last-of-type {
  160.             position: relative;
  161.             left: -115px;
  162.             align-self: center;
  163.         }
  164.         footer {
  165.             width: 940px;
  166.             margin: auto;
  167.             display: flex;
  168.             justify-content: flex-end;
  169.             border-top: 1px solid black;
  170.         }
  171.         footer > .end {
  172.             height: 60px;
  173.             margin-right: 140px;
  174.         }
  175.         footer > .end > button {
  176.             width: 100px;
  177.             height: 60px;
  178.             background-color: red;
  179.             color: #cccccc;
  180.             font-size: 20px;
  181.             font-weight: bold;
  182.         }
  183.         footer > .end > span {
  184.             padding: 0 10px;
  185.         }
  186.         footer > .end > span:last-of-type {
  187.             font-weight: bold;
  188.             color: red;
  189.         }
  190.     </style>
  191. </head>
  192. <body>
  193.         <header>
  194.             <div class="item1">
  195.                 <a href=""><span>京东首页</span></a>
  196.                 <a href=""><span>四川</span></a>
  197.             </div>
  198.             <div class="item2">
  199.                 <a href=""><span>我的订单</span></a>
  200.                 <a href=""><span>我在京东</span></a>
  201.                 <a href=""><span>京东会员</span></a>
  202.                 <a href=""><span>企业采购</span></a>
  203.                 <a href=""><span>客户服务</span></a>
  204.                 <a href=""><span>网站导航</span></a>
  205.                 <a href=""><span>手机京东</span></a>
  206.             </div>
  207.         </header>
  208.         <div class="title">
  209.                 <div class="logo">
  210.                     <a href=""><img src="static/images/logo.png" alt=""></a>
  211.                     <span>购物车</span>
  212.                 </div>
  213.                 <div class="search">
  214.                     <input type="search" id="search" value="自营"><label for="search">搜索</label>
  215.                 </div>
  216.         </div>
  217.         <div class="shopping-cart">
  218.                 <div class="detail">
  219.                         <div class="detail1">
  220.                                 <input type="checkbox" id="checkbox" checked><label for="checkbox">全选</label>
  221.                                 <span>商品</span>
  222.                         </div>
  223.                        <div class="detail2">
  224.                                 <span>单价</span>
  225.                                 <span>数量</span>
  226.                                 <span>小计</span>
  227.                                 <span>操作</span>
  228.                        </div>
  229.                 </div>
  230.                 <div class="shop-list">
  231.                     <input type="checkbox" checked>
  232.                     <a href=""><img src="static/images/ad/1.png" alt=""></a>
  233.                     <span>PHP中文网是最良心网站PHP中文网是最良心网站</span>
  234.                     <span>￥1488</span>
  235.                     <input type="number" value="1">
  236.                     <span>￥1488</span>
  237.                     <span>删除</span>
  238.                 </div>
  239.                 <div class="shop-list">
  240.                 <input type="checkbox" checked>
  241.                 <a href=""><img src="static/images/ad/1.png" alt=""></a>
  242.                 <span>PHP中文网是最良心网站PHP中文网是最良心网站</span>
  243.                 <span>￥1488</span>
  244.                 <input type="number" value="1">
  245.                 <span>￥1488</span>
  246.                 <span>删除</span>
  247.             </div>
  248.                 <div class="shop-list">
  249.                 <input type="checkbox" checked>
  250.                 <a href=""><img src="static/images/ad/1.png" alt=""></a>
  251.                 <span>PHP中文网是最良心网站PHP中文网是最良心网站</span>
  252.                 <span>￥1488</span>
  253.                 <input type="number" value="1">
  254.                 <span>￥1488</span>
  255.                 <span>删除</span>
  256.             </div>
  257.         </div>
  258.         <footer>
  259.             <div class="end">
  260.                 <span>总价</span>
  261.                 <span>￥20000</span>
  262.                 <button>去结算</button>
  263.             </div>
  264.         </footer>
  265. </body>
  266. </html>
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！