#html #css
Вопрос:
Я использую CSS и html дизайн формата счета, у меня есть некоторые ошибки при разрыве страницы после конца 10 div нижний колонтитул последняя печать страницы ? пожалуйста, поделитесь ценной идеей…
- Встроенное кодирование HTML и CSS по мере необходимости.
- После 10 div сделайте перерыв на следующей странице .
- Нижний колонтитул последней страницы всегда печатается, а верхний колонтитул первой страницы нужен?
Формат счета (HTML/CSS)
проектный вид
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>PRIC</title>
</head>
<body>
<div style="width:98%;margin:10px;">
<div id="header" style="border:1px solid;">
<!--------------------1---------------------->
<div style="width:100%;min-height:90px;border-bottom:1px solid;padding: 5px;">
<div style="width:65%;float:left;">
<h2 style="text-align:left;font-family: serif;font-size:24px;font-weight: bold;">AGGARWAL PHARMACY</h2>
<h3 style="text-align:left;font-family: serif;font-size:16px;font-weight: bold;line-height: 15px;">B-35-922/2/1, Ferozepur Road,Near MBD Mall,Ludhiana(PB)</h3>
<h3 style="text-align:left;font-family: serif;font-size:16px;font-weight: bold;">E-Mail:PUNJABRHEUMATOLOGY@GMAIL.COM</h3>
</div>
<div style="width:35%;float:left;">
<h2 style="text-align:right;font-family: serif;serif;font-size:15px;font-weight: bold;">Licence No.:LDH-137840 NB-LDH/137841 B </h2>
<h3 style="text-align:right;font-family: serif;serif;font-size:15px;font-weight: bold;">GSTIN : 03ABRFA6867B1ZE</h3>
</div>
</div>
<!------------------2------------------->
<div style="width:100%;min-height:60px;border-bottom:1px solid;padding: 5px;">
<div style="width:45%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;"><b>Patient Name :</b>amit</p>
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;"><b>Doctor Name :</b> dr Prashant </p>
</div>
<div style="width:30%;float:left;">
<h2 style="text-align:left;font-family: serif;font-size:20px;font-weight: bold;">GST INVOICE</h2>
</div>
<div style="width:25%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;"><b>Invoice No.:</b>11111111</p>
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;"><b>Date :</b></p>
</div>
</div>
<!-----------------------3------------------------------------------->
<div style="width:100%;min-height:23px;">
<div style="width:5%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;text-align: center;"><b>Sn.</b></p>
</div>
<div style="width:30%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;border-left:1px solid;text-align:left;"><b>Particulars</b></p>
</div>
<div style="width:10%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;border-left:1px solid;text-align: center;"><b>Exp.</b></p>
</div>
<div style="width:10%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;border-left:1px solid;text-align: center;"><b>Batch No.</b></p>
</div>
<div style="width:10%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;border-left:1px solid;text-align: center;"><b>Qty.</b></p>
</div>
<div style="width:10%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;border-left:1px solid;text-align: center;"><b>MRP</b></p>
</div>
<div style="width:10%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;border-left:1px solid;text-align: center;"><b>Disc.</b></p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;text-align: center;border-left:1px solid;"><b>Amount(MRP)</b></p>
</div>
</div>
</div>
<!-------------------content area---------------------------->
<div id="middle" style="width:100%;min-height:25px;">
<div style="text-align:left;font-family: serif;font-size:13px;text-decoration: underline;"><b>SALE</b></div>
<div style="width:100%;min-height:23px;padding-left:10px;">
<div style="width:5%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;">1</p>
</div>
<div style="width:30%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;">ACUCLAV</p>
</div>
<div style="width:10%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;">2021-02-1</p>
</div>
<div style="width:10%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;">11111</p>
</div>
<div style="width:10%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;">1.7</p>
</div>
<div style="width:10%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;">300</p>
</div>
<div style="width:10%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;">10%</p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;">44</p>
</div>
</div>
<!----------------Medicine-return-------------------------->
<div style="text-align:left;font-family: serif;font-size:13px;text-decoration: underline;"><b>RETURN</b></div>
<!---------------------------set Loop------------------------------>
<div style="width:100%;min-height:23px;padding-left:10px;">
<div style="width:5%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;">1</p>
</div>
<div style="width:30%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;">ACUCLAV</p>
</div>
<div style="width:10%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;">2021-03-18</p>
</div>
<div style="width:10%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;">12345</p>
</div>
<div style="width:10%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;">1.6</p>
</div>
<div style="width:10%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;">40</p>
</div>
<div style="width:10%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;">10</p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;">500</p>
</div>
</div>
</div>
<!------------------------footer------------------------------------->
<div id="footer" style="border:1px solid;min-height:248px;">
<div style="width:100%;">
<div style="width:75%;float:left;border-right: 1px solid;">
<div style="width:100%;border-bottom:1px solid;float:left">
<div style="width:5%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;text-align: center;"><b>Sn.</b></p>
</div>
<div style="width:35%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;border-left:1px solid;"><b>GST Class</b></p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;border-left:1px solid;text-align: center;"><b>Total</b></p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;border-left:1px solid;text-align: center;"><b>CGST</b></p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;border-left:1px solid;text-align: center;"><b>SGST</b></p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;text-align: center;"><b>Total GST</b></p>
</div>
</div>
<!-----------------1---------------->
<div style="width:100%;border-bottom:1px solid;float:left">
<div style="width:5%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;text-align: center;">1</p>
</div>
<div style="width:35%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;border-left:1px solid;">CGST/SGST @ 5 %</p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;border-left:1px solid;text-align: center;">55</p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;border-left:1px solid;text-align: center;">55</p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;border-left:1px solid;text-align: center;">555</p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;text-align: center;">44</p>
</div>
</div>
<!---------------------2----------------------->
<div style="width:100%;border-bottom:1px solid;float:left">
<div style="width:5%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;text-align: center;">2</p>
</div>
<div style="width:35%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;border-left:1px solid;">CGST/SGST @ 12 %</p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;border-left:1px solid;text-align: center;">444</p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;border-left:1px solid;text-align: center;">44</p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;border-left:1px solid;text-align: center;">444</p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;text-align: center;">44</p>
</div>
</div>
<!-----------------4---------------------------->
<div style="width:100%;border-bottom:1px solid;float:left">
<div style="width:5%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;text-align: center;">3</p>
</div>
<div style="width:35%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;border-left:1px solid;">CGST/SGST @ 18 %</p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;border-left:1px solid;text-align: center;">55</p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;border-left:1px solid;text-align: center;">55</p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;border-left:1px solid;text-align: center;">55</p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;text-align: center;">55</p>
</div>
</div>
<!----------------5--------------------------->
<div style="width:100%;border-bottom:1px solid;float:left;">
<div style="width:5%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;text-align: center;">4</p>
</div>
<div style="width:35%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;border-left:1px solid;">CGST/SGST @ 28 %</p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;border-left:1px solid;text-align: center;">555</p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;border-left:1px solid;text-align: center;">66</p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;border-left:1px solid;text-align: center;">66</p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:13px;margin-bottom: 1px;text-align: center;">66</p>
</div>
</div>
<!------------------6--------------------------->
<div style="width:100%;float:left;">
<div style="width:40%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;text-align:right;margin-right: 30px;"><b>Total GST</b></p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;border-left:1px solid;text-align: center;"><b>70</b></p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;border-left:1px solid;text-align: center;"><b>700</b></p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;border-left:1px solid;text-align: center;"><b>600</b></p>
</div>
<div style="width:15%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;text-align: center;"><b>500</b></p>
</div>
</div>
</div>
<div style="width:25%;float:left;">
<div style="width:100%;">
<div style="width:70%;float:left;padding-right: 20px;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;text-align:right;">SUB TOTAL :</p>
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;text-align:right;">DISCOUNT PRICE :</p>
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;text-align:right;">TOTAL AMOUNT :</p>
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;text-align:right;">RETURN AMOUNT :</p>
</div>
<div style="width:30%;float:left;">
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;text-align:left;">300</p>
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;text-align:left;;">400</p>
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;text-align:left;;">399</p>
<p style="text-align:left;font-family: serif;font-size:15px;margin-bottom: 1px;text-align:left;;">6</p>
</div>
</div>
</div>
</div>
<!-----------------receiver--------------------------->
<div style="width:100%;float:left;border-bottom:1px solid;border-top:1px solid;">
<div style="width: 75%;float:left;border-right: 1px solid;">
<p style="text-align:left;font-family: serif;padding:5px 10px;font-size:15px;margin-bottom: 1px;text-align:left;margin-right: 30px;"><B>600</B></</p>
</div>
<div style="width:17%;float:left;border-right:1px solid;">
<p style="text-align:left;font-family: serif;padding:5px 10px;font-size:15px;margin-bottom: 1px;text-align: center;"><b>Net Payable Amount :</b></p>
</div>
<div style="width:5%;float:left;">
<p style="text-align:left;font-family: serif;padding:5px 10px;;font-size:15px;margin-bottom: 1px;text-align: center;"><b>5800</b></p>
</div>
</div>
<!----------------receiver--------------------------->
<div style="width:100%;">
<div style="width: 52.6%;float:left;border-right:1px solid;">
<p style="text-align:left;font-family: serif;padding:5px 10px;font-size:15px;margin-bottom:-20px;text-align:left;"><b>Terms amp; Conditions</b></p>
<p style="text-align:left;font-family: serif;padding:13px 10px;font-size:14px;margin-bottom: 1px;text-align:left;">Goods once sold will not be taken back or exchanged</br>Bill not paid due date will attract @4% interest</p>
</div>
<div style="width:22.4%;float:left;border-right:1px solid;padding: 24px;">
<p style="text-align:left;font-family: serif;padding:5px 10px;font-size:15px;margin-bottom: 1px;text-align: center;"><b>Receiver</b> </p>
</div>
<div style="width:24%;float:left;padding: 24px;">
<p style="text-align:left;font-family: serif;padding:5px 10px;font-size:15px;margin-bottom: 1px;text-align: center;"><b>For AGGARWAL PHARMACY</b></p>
</div>
</div>
<!--------------------------------------------->
</div>
</div>
</body>
</html>
Комментарии:
1. Он работает для настольного компьютера, а не для небольшого устройства. Поэтому вам нужно сначала создать внешний CSS-файл для хранения CSS. а затем вы должны использовать медиа-запрос для адаптивного дизайна для другого окна просмотра.