css3商品购物清单样式

html代码

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