製作卡片塊的側邊絲帶樣式的方法
P粉381463780
2023-08-13 18:35:45
<p>根據下面的截圖，我需要協助新增「已完成」狀態的區塊。 </p>
<p>點選查看範例截圖</p>
<p>目前只是一個有以下配置的div。 </p>
<pre class="brush:php;toolbar:false;"><div style="display:flex; flex-direction:column; align-items: center; justify-content: center; ">
<img src="./PCIBT - Pacific Coast Institute of Business & Technology_files/marketing_essentials.jpg "><a href="# ">Marketing Essentials</a>
<img src="./PCIBT - Pacific Coast Institute of Business & Technology_files/human_resource_tile_pic.jpg "><a href="# ">Human Resource Management</a>
<img src="./PCIBT - Pacific Coast Institute of Business & Technology_files/pm_fundamentals.jpg "><a href="# ">Project Management Fundamentals</a>
</div></pre>
<p><br /></p>
不完美，但這是如何在卡片上完成的，
position: absolute在蝴蝶結上允許您將蝴蝶結定位在所需位置的卡片上。.card { display: flex; align-items: center; position: relative; width: 300px; height: 150px; border: 1px solid #ccc; border-radius: 8px; padding: 20px; background-color: #fff; } .ribbon { position: absolute; top: 10px; left: 0px; background-color: #e74c3c; color: #fff; padding: 5px 15px; }<div class="card"> <div class="ribbon">Side Offer</div> <h3>Card Content</h3> <p>This is some content inside the card.</p> </div>