纯CSS商品结算清单【原创】

页面的head部分，需引入页面的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，在div的嵌套结构里放了一个ul无序列表，代码如下：

<div class="container">
  <div class="receipt">
    <h2 class="receipt__title">感谢您的惠顾！</h2>
    <p class="receipt__subtitle">以下是您的购物清单，请保存好此票据。</p>
    <ul class="receipt__lines">
      <li class="receipt__line">
        <span class="receipt__line__item">iPad mini 4（数量1）</span>
        <span class="receipt__line__price">¥ 1699</span>  
      </li>
      <li class="receipt__line">
        <span class="receipt__line__item">type-C耳机（数量1）</span>
        <span class="receipt__line__price">¥ 399</span>  
      </li>
      <li class="receipt__line">
        <span class="receipt__line__item">iPhone X edition（数量1）</span>
        <span class="receipt__line__price">¥ 8288</span>  
      </li>
    </ul>
    <p class="receipt__total">
      <span class="receipt__total__item">合计：</span>
      <span class="receipt__total__price">¥ 10386</span>
    </p>
    <p class="receipt__back">
      <a href="#">再去逛逛</a>
    </p>
  </div>
</div>