页面

 <style>
body { background: #fff; font-size: 14px; font-family: Arial; }
p   { margin: 0; }
#receipt { background: #fff; padding: 10px 20px; width: 400px; /* 改这里的width可以控制宽度  width: 600px; */ }
#receipt h1 { margin: 0; font-size: 1em; text-align: center; padding: 5px; border-bottom: 1px solid #000; }

#r-body { overflow: hidden; height: 140px; padding: 0 5px; }
#r-body-left { float: left; width: 65%; }
#r-body-right { float: right; width: 35%; height: 200px;  }
#r-body-right p { text-align: right; margin: 15px 0 15px 0; }
#r-b-l-1 { width: 90%; margin: 10px 0; height: 20px; border: 1px solid #000; padding: 5px; }
#r-b-l-2 { float: left; width: 60%; margin: 0 10px 10px 0; height: 80px; border: 1px solid dashed; }
#r-b-l-3 { border-top: 1px dashed #000; width: 90%; border-bottom: 1px dashed #000; height: 43px; margin-top: 30px; }

#r-foot { border-top: 1px solid #000; padding: 5px; }
#r-foot p { text-align: center; border: 1px solid #000; padding: 5px; }
</style>

<div id="receipt">
 <h1>xxx</h1>
 <div id="r-body">
  <div id="r-body-left">
   <div id="r-b-l-1">
    <p>xxxxxxxxxxxxxxxxxxxxx</p>
   </div>
   <div id="r-b-l-2">
   
   </div>
   <div id="r-b-l-3">
    
   </div>
  </div>
  <div id="r-body-right">
   <p>xxxxxxxxxxxxxxxxxxxx</p>
   <p>xxxxxxxx</p>
   <p>xxxxxxxx</p>
   <p>xxxxxxxx</p>
  </div>
 </div>
 <div id="r-foot">
  <p>xxxxxxxxxx</p>
 </div>
</div>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值