如何使用 Html 和 Css 創建計划列表？
[英]How to create Plans list using Html and Css?
問題描述
我正在嘗試制作這種計划列表。
但不知何故，我仍然無法實現這一點，我已經創建了這個基本結構，不知道如何使這個復雜的設計如圖所示？ 不知道如何在INFINITY之后創建跨邊界我想使用HTML OR CSS創建相同類型的結構。
這是我的代碼
<!doctype html> <html lang="en"> <head> <title>Price List</title> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS v5.0.2 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> </head> <style> .col-lg-2 { border: 1px solid black; background-color: red; } .col-lg-1 { background-color: red; border: 1px solid black; } div>.tx>p { margin-top: 19px; } </style> <div class="container"> <div class="row justify-content-center text-center"> <div class="col-lg-2 bg-dark"> <div> <h4>Random</h4> <br> </div> <div class="tx"> <p> <span class="text-light"> Speed</span></p> <p> <span class="text-light"> Unlimited Data</span></p> <p> <span class="text-light"> Monthly rental</span></p> <p><span class="text-light">Who is it for?</span></p> </div> </div> <div class="col-lg-2 bg-danger"> <div> <h5>INFINITY</h4> <br> </div> <div class="tx"> <p> <span class="text-light"> 1 Gbps</span></p> <p> <span class="text-light"> ✅ </span></p> <p> <span class="text-light"> ₹3999</span></p> <p><span class="text-light">Experts like <br>gamers,traders,<br>live streamers</span></p> </div> </div> <div class="col-lg-2 bg-danger"> <div> <h4>PROFESSIONAL</h4> <br> </div> <div class="tx"> <p> <span class="text-light"> 300 Mbps</span></p> <p> <span class="text-light">✅ </span></p> <p> <span class="text-light">₹1499 </span></p> <p><span class="text-light">Professionals <br>Working <br>from home</span></p> </div> </div> <div class="col-lg-2 bg-light "> <div> <h4>ENTERTAINMENT</h4> <br> </div> <div class="tx "> <p> <span class="text-dark"> 200 Mbps</span></p> <p> <span class="text-dark">✅ </span></p> <p> <span class="text-dark">₹999 </span></p> <p><span class="text-dark">Non-stop binge<br>watchers</span></p> </div> </div> <div class="col-lg-2" style="background-color: grey;"> <div> <h4>STANDARD</h4> <br> </div> <div class="tx"> <p> <span class="text-light"> 100 Mbps</span></p> <p> <span class="text-light">✅ </span></p> <p> <span class="text-light">₹799 </span></p> <p><span class="text-light">Small family with <br>light usage </span></p> </div> </div> <div class="col-lg-2" style="background-color: grey;"> <div> <h4>BASIC</h4> <br> </div> <div class="tx"> <p> <span class="text-light"> 40 Mbps</span></p> <p> <span class="text-light">✅ </span></p> <p> <span class="text-light">₹499 </span></p> <p><span class="text-light">Individuals<br>with light usage </span></p> </div> </div> <div class="col-2 text-light" style="background-color: grey;"> <br> <div> Streaing <br>apps</div> <br> </div> <div class="col-6 text-light" style="background-color: rgb(49, 49, 49);"> <br> <div>Amazon-prime + Disnep hotstar</div> <br> </div> <div class="col-2 text-light" style="background-color: rgb(49, 49, 49);"> <br> <span style="font-size: 21px;">X</span> <br> </div> <div class="col-2 text-light" style="background-color: rgb(49, 49, 49);"> <br> <span style="font-size: 21px;">X</span> <br> </div> </div> </div> <!-- Bootstrap JavaScript Libraries --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> </body> </html>
有人請幫我解決Source Code 。
謝謝你。
1 個解決方案
解決方案1
2 2021-11-10 18:29:00
這可能是一個好的開始...切換到整頁以顯示結果
信息：它僅使用Bootstrap 圖標和 BS 網格系統以及clip-path來獲取“特殊邊框”
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css"); .h-20 { height: 20%; } .shadow-lg { box-shadow: inset 0 1rem 3rem rgba(0, 0, 0, 1)!important } .path { clip-path: polygon(100% 0, 100% 100%, 27% 68%, 0 100%, 0 0); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 1)!important; }
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <div class="container-fluid bg-dark vh-100 text-center"> <div class="row h-75"> <div class="col-2 text-white"> <div class="row h-20"></div> <div class="row h-20 align-items-center"> <div class="col-12"> <i class="bi bi-speedometer2"></i> Speed </div> </div> <div class="row h-20 align-items-center"> <div class="col-12"> <i class="bi bi-bar-chart-fill"></i> Unlimited <br> data </div> </div> <div class="row h-20 align-items-center"> <div class="col-12"> <i class="bi bi-currency-exchange"></i> Monthly <br> rental </div> </div> <div class="row h-20 align-items-center"> <div class="col-12"> <i class="bi bi-people-fill"></i> Who is <br> it for ? </div> </div> </div> <div class="col-2 bg-danger shadow-lg"> <div class="row h-20 align-items-center bg-white path"> <div class="col-12"> INFINTY </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Speed </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Unlimited <br> data </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Monthly <br> rental </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Who is <br> it for ? </div> </div> </div> <div class="col-2 bg-danger shadow-lg"> <div class="row h-20 align-items-center bg-white path"> <div class="col-12"> PROFESSIONAL </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Speed </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Unlimited <br> data </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Monthly <br> rental </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Who is <br> it for ? </div> </div> </div> <div class="col-2 bg-white shadow-lg"> <div class="row h-20 align-items-center bg-danger path"> <div class="col-12 text-white"> ENTERTAINMENT </div> </div> <div class="row h-20 align-items-center"> <div class="col-12"> Speed </div> </div> <div class="row h-20 align-items-center"> <div class="col-12"> Unlimited <br> data </div> </div> <div class="row h-20 align-items-center"> <div class="col-12"> Monthly <br> rental </div> </div> <div class="row h-20 align-items-center"> <div class="col-12"> Who is <br> it for ? </div> </div> </div> <div class="col-2 shadow-lg"> <div class="row h-20 align-items-center bg-white path"> <div class="col-12"> STANDARD </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Speed </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Unlimited <br> data </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Monthly <br> rental </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Who is <br> it for ? </div> </div> </div> <div class="col-2 shadow-lg"> <div class="row h-20 align-items-center bg-white path"> <div class="col-12"> BASICS </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Who is <br> it for ? </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Who is <br> it for ? </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Who is <br> it for ? </div> </div> <div class="row h-20 align-items-center text-white"> <div class="col-12"> Who is <br> it for ? </div> </div> </div> </div> <div class="row h-25"> <div class="col-2 bg-secondary"></div> <div class="col-6 shadow-lg"></div> <div class="col-2 shadow-lg"></div> <div class="col-2 shdaow-lg"></div> </div> </div>
如何使用HTML，CSS或JavaScript創建循環倒數計時器？
[英]How to create a circular countdown timer using HTML, CSS or JavaScript?
如何使用HTML，CSS和JQuery在圓形設計中創建交互式導航
[英]How to create an interactive navigation, in a circular design, using HTML, CSS, and JQuery
如何創建時間延遲模態（最好使用HTML，JQuery，CSS）
[英]How to create a time delay modal (preferably using HTML, JQuery, CSS)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.