我需要在不使用任何第三部分 CSS 參考的情況下將以下影像轉換為純 CSS 的 HTML。我已經嘗試了以下代碼片段。它的代碼小提琴如下，
uj5u.com熱心網友回復：
可能像下面的代碼片段，帶有串列和 flex：
<div style="display: flex; justify-content:center;">
<div style="padding: 1em; z-index: -1; background: rgb(79,206,213); background: linear-gradient(180deg, rgba(79,206,213,.1) 0%, rgba(20,173,227,.1) 50%, rgba(253,0,243,.1) 100%);">
<div style="border-radius: 1em; padding: 3em 1em 1em 1em; z-index: 0; background: white;">
<p style='margin-bottom:2em;font-size:26px;font-family:"Calibri",sans-serif;text-align:center;'>Transaction Summary</p>
<p style='margin-bottom:1em;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;'><span style="font-size:15px;color:#AFABAB;">Amount</span></p>
<p style='margin-bottom:1em;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;'><span style="font-size:15px;color:#AFABAB;">LKR </span><strong><span style="font-size:28px;color:#0070C0;">2,000.00</span></strong></p>
<p style='margin-bottom:2em;text-align:center;'><span style="font-size:15px;font-size:18px;font-family:'Calibri',sans-serif;color:#333;">Commercial Bank</span></p>
<ul style="display: flex;flex-direction:column;list-style:none;width:319.5pt;row-gap: .5em;margin-bottom: 2em; padding: 0 2em; font-family:'Calibri',sans-serif;font-size:15px;">
<li style="border:1px solid #e3e3e3;padding: .4em; border-radius: .5em; display:grid; grid-template-columns: 1fr 1fr;align-items:center;">
<span style="color:grey;">Payment type</span>
<span style="color:#333;text-align:right;font-weight:600;">Fund Transfer</span>
</li>
<li style="border:1px solid #e3e3e3;padding: .4em; border-radius: .5em; display:grid; grid-template-columns: 1fr 1fr;align-items:center;">
<span style="color:grey;">Paid to</span>
<span style="color:#333;text-align:right;font-weight:600;">1234567r</span>
</li>
<li style="border:1px solid #e3e3e3;padding: .4em; border-radius: .5em; display:grid; grid-template-columns: 1fr 1fr;align-items:center;">
<span style="color:grey;">Bank</span>
<span style="color:#333;text-align:right;font-weight:600;">Rdb Bank</span>
</li>
<li style="border:1px solid #e3e3e3;padding: .4em; border-radius: .5em; display:grid; grid-template-columns: 1fr 1fr;align-items:center;">
<span style="color:grey;">Date of time</span>
<span style="color:#333;text-align:right;font-weight:600;">16-Aug-2021 11:50</span>
</li>
<li style="border:1px solid #e3e3e3;padding: .4em; border-radius: .5em; display:grid; grid-template-columns: 1fr 1fr;align-items:center;">
<span style="color:grey;">Payment Status</span>
<span style="color:#333;text-align:right;font-weight:600;">Success</span>
</li>
<li style="border:1px solid #e3e3e3;padding: .4em; border-radius: .5em; display:grid; grid-template-columns: 1fr 1fr;align-items:center;">
<span style="color:grey;">Reference number</span>
<span style="color:#333;text-align:right;font-weight:600;">32322</span>
</li>
<li style="border:1px solid #e3e3e3;padding: .4em; border-radius: .5em; display:grid; grid-template-columns: 1fr 1fr;align-items:center;">
<span style="color:grey;">Remark</span>
<span style="color:#333;text-align:right;font-weight:600;">Monthly bonus</span>
</li>
</ul>
<p style='border-top:1px solid #e3e3e3;'></p>
<p style='font-size:12px;font-family:"Calibri",sans-serif;text-align:center;'><span style="color:#2E75B6;">Aug-2021 12:56 PM</span></p>
</div>
</div>
</div>uj5u.com熱心網友回復：
解決方案是從多個div而flex不是表中使用：
<html>
<body>
<p style='margin-top:0in;margin-right:0in;margin-bottom:8.0pt;margin-left:0in;line-height:107%;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;'> </p>
<p style='margin-top:0in;margin-right:0in;margin-bottom:8.0pt;margin-left:0in;line-height:107%;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;'>Transaction Summary</p>
<p style='margin-top:0in;margin-right:0in;margin-bottom:8.0pt;margin-left:0in;line-height:107%;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;'><span style="font-size:12px;line-height:107%;color:#AFABAB;">Amount</span></p>
<p style='margin-top:0in;margin-right:0in;margin-bottom:8.0pt;margin-left:0in;line-height:107%;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;'><span style="font-size:11px;line-height:107%;color:#AFABAB;">LKR </span><strong><span style="font-size:16px;line-height:107%;color:#0070C0;">2,000.00</span></strong></p>
<p style='margin-top:0in;margin-right:0in;margin-bottom:8.0pt;margin-left:0in;line-height:107%;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;'><span style="font-size:12px;line-height:107%;">Commercial Bank</span></p>
<p style='margin-top:0in;margin-right:0in;margin-bottom:8.0pt;margin-left:0in;line-height:107%;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;'><span style="font-size:12px;line-height:107%;"> </span></p>
<div style="width: 80%; margin: auto;border: 1px solid #eee;display: flex;justify-content: space-between; margin-bottom: 0.30em; padding: 10px; border-radius: 8px;">
<div>Payment type</div>
<div>Fund Transfer</div>
</div>
<div style="width: 80%; margin: auto;border: 1px solid #eee;display: flex;justify-content: space-between; margin-bottom: 0.30em; padding: 10px; border-radius: 8px;">
<div>Paid to</div>
<div>1234567</div>
</div>
<div style="width: 80%; margin: auto;border: 1px solid #eee;display: flex;justify-content: space-between; margin-bottom: 0.30em; padding: 10px; border-radius: 8px;">
<div>Bank</div>
<div>Rdb Bank</div>
</div>
<div style="width: 80%; margin: auto;border: 1px solid #eee;display: flex;justify-content: space-between; margin-bottom: 0.30em; padding: 10px; border-radius: 8px;">
<div>Date of time</div>
<div>16-Aug-2021 11:50</div>
</div>
<div style="width: 80%; margin: auto;border: 1px solid #eee;display: flex;justify-content: space-between; margin-bottom: 0.30em; padding: 10px; border-radius: 8px;">
<div>Payment Status</div>
<div>Success</div>
</div>
<div style="width: 80%; margin: auto;border: 1px solid #eee;display: flex;justify-content: space-between; margin-bottom: 0.30em; padding: 10px; border-radius: 8px;">
<div>Reference number</div>
<div>32322</div>
</div>
<div style="width: 80%; margin: auto;border: 1px solid #eee;display: flex;justify-content: space-between; margin-bottom: 0.30em; padding: 10px; border-radius: 8px;">
<div>Remark</div>
<div>Monthly bonus</div>
</div>
<p style='margin-top:0in;margin-right:0in;margin-bottom:8.0pt;margin-left:0in;line-height:107%;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;'><span style="color:#2E75B6;"> </span></p>
<p style='margin-top:0in;margin-right:0in;margin-bottom:8.0pt;margin-left:0in;line-height:107%;font-size:15px;font-family:"Calibri",sans-serif;text-align:center;'><span style="color:#2E75B6;"> </span></p>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/419627.html
標籤：