简体中文（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

博客列表 >元旦作业+购物车结算页面的编写+10期线上班

元旦作业+购物车结算页面的编写+10期线上班

江川林
江川林原创
2020年01月07日 11:47:05734浏览

购物车结算页面的编写

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>
上一条：基于flex布局的购物车页面（元旦前端学习作业）下一条：Grid布局属性复习（1230前端开发学习）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多