純css+html打造不錯的收據模板
[重要通告]如您遇疑難雜癥,本站支持知識付費業務,掃右邊二維碼加博主微信,可節省您寶貴時間哦!
這玩意兒沒啥可說的,直接上圖;
純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">收 據</div> <div class="titleUdeLine"></div> </div> </div> <div class="div2">NO:<span style="color: #9C5223;">2396827</span> </div> </div> <div class="date"> <div class="deDiv1">2021年 09月 03日</div> <div class="deDiv2">第 200 號</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;"> 茲 收 到 老梁</td> <td colspan="6" style="width: 50%;">交 來 下 列 款 項 此 據</td> </tr> <tr> <td align="center" rowspan="2" style="width: 60%;">摘 要</td> <td colspan="10" align="center" style="width: 10%;">金 額</td> <td rowspan="2" align="center" style="width: 30%;">備 注</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>支付方式:現金</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;"> 主管:</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/>聯<br/>:<br/>存<br/>根</div></div> </div> </body> </html>
問題未解決?付費解決問題加Q或微信 2589053300 (即Q號又微信號)右上方掃一掃可加博主微信
所寫所說,是心之所感,思之所悟,行之所得;文當無敷衍,落筆求簡潔。 以所舍,求所獲;有所依,方所成!
賞
支付寶贊助
微信贊助
免責聲明,若由于商用引起版權糾紛,一切責任均由使用者承擔。
您必須遵守我們的協議,如您下載該資源,行為將被視為對《免責聲明》全部內容的認可->聯系老梁投訴資源 LaoLiang.Net部分資源來自互聯網收集,僅供用于學習和交流,請勿用于商業用途。如有侵權、不妥之處,請聯系站長并出示版權證明以便刪除。
敬請諒解! 侵權刪帖/違法舉報/投稿等事物聯系郵箱:service@laoliang.net
意在交流學習,歡迎贊賞評論,如有謬誤,請聯系指正;轉載請注明出處: » 純css+html打造不錯的收據模板