[重要通告]如您遇疑難雜癥,本站支持知識付費業(yè)務,掃右邊二維碼加博主微信,可節(jié)省您寶貴時間哦!

這玩意兒沒啥可說的,直接上圖;

純css+html 收據模板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>老梁博客-收據模板</title>
<style type="text/css">
.main{width: 960px; height: 480px; margin: 0px auto; margin-top: 20px; padding: 10px; display: flex;}
.body{width: 95%; height: 480px;}
.title{width: 100%; height: 40px; display: flex;}
.title .div1{width: 60%; text-align: right;}
.title .div1 .divCtn{width: 230px; height: 40px; float: right;}
.title .div1 .divCtn .titleCtn{width: 230px; height: 30px; line-height: 30px;text-align: center; font-size: 25px; font-weight: bold;}
.title .div1 .divCtn .titleUdeLine{width: 230px; height: 6px; border-bottom: solid 2px #9C5223; border-top: solid 2px #9C5223;}
.title .div2{width: 40%; text-align: right; height: 40px; line-height: 30px; font-size: 20px; font-weight: bold;}
.date{width: 100%; height: 40px; display: flex;}
.date .deDiv1{width: 60%; height: 40px; line-height: 40px; text-align: right; font-size: 18px;}
.date .deDiv2{width: 40%; height: 40px;line-height: 40px; text-align: right;font-size: 18px;}
.tempTr1 td{text-align: center;}
table tr td{padding: 5px;}
.tempTr2 td{height: 40px; text-align: center;}
.end{width: 5%; height: 480px; }
</style>
</head>
<body>
<div class="main">
<div class="body">
<div class="title">
<div class="div1">
<div class="divCtn">
<div class="titleCtn">收&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;據</div>
<div class="titleUdeLine"></div>
</div>
</div>
<div class="div2">NO:<span style="color: #9C5223;">2396827</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
</div>
<div class="date">
<div class="deDiv1">2021年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;09月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;03日</div>
<div class="deDiv2">第&nbsp;&nbsp;&nbsp;&nbsp;200&nbsp;&nbsp;&nbsp;&nbsp;號</div>
</div>
<table border="1" style="width: 100%; border-collapse: collapse;">
<tr class="tempTr2">
<td colspan="6" style="border-right-color: #FFFFFF; width: 50%; text-align: left;">&nbsp;&nbsp;茲&nbsp;&nbsp;收&nbsp;&nbsp;到&nbsp;&nbsp; 老梁</td>
<td colspan="6" style="width: 50%;">交&nbsp;&nbsp;來&nbsp;&nbsp;下&nbsp;&nbsp;列&nbsp;&nbsp;款&nbsp;&nbsp;項&nbsp;&nbsp;此&nbsp;&nbsp;據</td>
</tr>
<tr>
<td align="center" rowspan="2" style="width: 60%;">摘&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;要</td>
<td colspan="10" align="center" style="width: 10%;">金&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;額</td>
<td rowspan="2" align="center" style="width: 30%;">備&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注</td>
</tr>
<tr class="tempTr1">
<td>¥</td>
<td>百</td>
<td>十</td>
<td>萬</td>
<td>千</td>
<td>百</td>
<td>十</td>
<td>元</td>
<td>角</td>
<td>分</td>
</tr>
<tr class="tempTr2">
<td>2021月08份水費</td>
<td>¥</td>
<td></td>
<td></td>
<td>2</td>
<td>5</td>
<td>4</td>
<td>3</td>
<td>2</td>
<td>2</td>
<td>3</td>
<td>支付方式:現(xiàn)金</td>
</tr>
<tr class="tempTr2">
<td></td>
<td>¥</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="tempTr2">
<td></td>
<td>¥</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="tempTr2">
<td colspan="12" style=" text-align: left;">
合計人民幣(大寫)貳萬伍仟肆佰叁拾貳圓貳角叁分
<div style="float: right; display: flex;"><div style="font-size: 20px;">¥:</div><div style="width: 180px; height: 30px; border-bottom: solid #000000 1px; text-align: center;">25432.23</div></div>
</td>
</tr>
</table>
<div style="width: 100%; display: flex; height: 40px;">
<div style="width: 50%; height: 40px; line-height: 40px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;主管:</div>
<div style="width: 50%; height: 40px; line-height: 40px;">經手人:</div>
</div>
</div>
<div class="end"><div style="margin-top: 160px; text-align: center; height: 230px;width: 100%;">第<br/>二<br/>聯(lián)<br/>:<br/>存<br/>根</div></div>
</div>
</body>
</html>

問題未解決?付費解決問題加Q或微信 2589053300 (即Q號又微信號)右上方掃一掃可加博主微信

所寫所說,是心之所感,思之所悟,行之所得;文當無敷衍,落筆求簡潔。 以所舍,求所獲;有所依,方所成!

支付寶贊助
微信贊助

免責聲明,若由于商用引起版權糾紛,一切責任均由使用者承擔。

您必須遵守我們的協(xié)議,如您下載該資源,行為將被視為對《免責聲明》全部內容的認可->聯(lián)系老梁投訴資源
LaoLiang.Net部分資源來自互聯(lián)網收集,僅供用于學習和交流,請勿用于商業(yè)用途。如有侵權、不妥之處,請聯(lián)系站長并出示版權證明以便刪除。 敬請諒解! 侵權刪帖/違法舉報/投稿等事物聯(lián)系郵箱:service@laoliang.net
意在交流學習,歡迎贊賞評論,如有謬誤,請聯(lián)系指正;轉載請注明出處: » 純css+html打造不錯的收據模板

發(fā)表回復

本站承接,網站推廣(SEM,SEO);軟件安裝與調試;服務器或網絡推薦及配置;APP開發(fā)與維護;網站開發(fā)修改及維護; 各財務軟件安裝調試及注冊服務(金蝶,用友,管家婆,速達,星宇等);同時也有客戶管理系統(tǒng),人力資源,超市POS,醫(yī)藥管理等;

立即查看 了解詳情