设为首页收藏本站
切换到窄版

爬行的蜗牛

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: golang Linux PHP
爬行的蜗牛»论坛 › 个人专用 › 其他相关知识 › HTML+CSS › HTML+CSS实现简易的价格表“新手存”！！附源码！！ ...
返回列表 发新帖
查看: 90|回复: 0

HTML+CSS实现简易的价格表“新手存”！！附源码！！

[复制链接]
yycvip

152

主题

48

回帖

1137

积分

管理员

积分
1137
发表于 2024-12-22 20:21:58 | 显示全部楼层 |阅读模式
640.gif
HTML部分
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <link rel="stylesheet" href="css/style.css"/>
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <div class="price-table">
  11.       <div class="price-card">
  12.         <h2 class="price-card__title">Basic</h2>
  13.         <div class="price-card__ribbon">
  14.           <span class="price-card__ribbon-text"
  15.           >¥3.</span class="price-card__ribbon-text-highlight">99</span>
  16.           </span>
  17.           </div>
  18.           <div class="price-card__info">
  19.             <p> 1 User</p>
  20.             <p> 1 Project</p>
  21.             <p> 2GB Disk Space</p>
  22.             <p> Standard Support</p>
  23.         </div>
  24.       </div>
  25.       <div class="price-card price-card--highlight">
  26.         <h2 class="price-card__title">Advanced</h2>
  27.         <div class="price-card__ribbon">
  28.           <span class="price-card__ribbon-text"
  29.           >¥8.<span class="price-card__ribbon-text-highlight">99</span>
  30.           </span>
  31.         </div>
  32.         <div class="price-card__info">
  33.           <p>25 Users</p>
  34.           <p>Unlimited Projects</p>
  35.           <p>10GB Disk Space</p>
  36.           <p>Standard Support</p>
  37.         </div>
  38.       </div>
  39.       
  40.       <div class="price-card">
  41.         <h2 class="price-card__title">Premium</h2>
  42.         <div class="price-card__ribbon">
  43.           <span class="price-card__ribbon-text"></span>
  44.           ¥15.<span class="price-card__ribbon-text-highlight"
  45.           >99</span
  46.           ></span
  47.           >
  48.         </div>
  49.         <div class="price-card__info">
  50.           <p>100 Users</p>
  51.           <p>Unlimited Projects</p>
  52.           <p>50GB Disk Space</p>
  53.           <p>Premium Support</p>
  54.         </div>
  55.       </div>
  56.     </div>
  57.   </body>
  58. </html>
复制代码
CSS部分
  1. *{
  2.   margin: 0;
  3.   padding: 0;
  4.   box-sizing: border-box;
  5. }

  7. :root {
  8.   --c-ribbon: #2f2f2f;
  9.   --c-ribbon-shadow: #666;
  10.   --c-ribbon-text: #efefef;
  11.   --c-title :#2f2f2f;
  12. }

  14. body {
  15.   display: flex;
  16.   justify-content: center;
  17.   align-items: center;
  18.   min-height: 100vh;
  19.   background: #ddd;
  20. }

  22. .price-table {
  23.   position: relative;
  24.   display: flex;
  25.   justify-content: center;
  26.   align-items: center;
  27.   user-select: none;
  28. }

  30. .price-card {
  31.   color: #555;
  32.   background-color: #fff;
  33.   width: 25%;
  34.   aspect-ratio: 9/14.5;
  35.   min-width: 12rem;
  36.   max-width: 15rem;
  37.   text-align: center;
  38.   margin: 0 2rem;
  39.   margin: 0.5rem 0 1rem;
  40.   box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
  41.   transition: 0.5s;
  42.   cursor: pointer;
  43. }

  45. .price-card:hover {
  46.   transform: translateY(-20px);
  47. }
  48. .price-card__ribbon {
  49.   position: relative;
  50.   padding: 2rem 1rem;
  51.   margin: 2rem --0.8rem 2rem;
  52.   background-color: var(--c-ribbon);
  53.   transform: skew(0, -10deg);
  54.   border-radius: 3px 0;
  55.   box-shadow: 0 2rem 1.2rem -2rem var(--c-ribbon-shadow);
  56. }

  58. .price-card__ribbon::before,
  59. .price-card__ribbon::after {
  60.   position: absolute;
  61.   content: "";
  62.   width: 0;
  63.   height: 0;
  64.   border-style: solid;
  65. }

  67. .price-card__ribbon::before {
  68.   border-width: 0 0.8rem 0.8rem 0;
  69.   border-color: transparent var(--c-ribbon-shadow) transparent transparent;
  70.   left: 0;
  71.   bottom: 0;
  72.   transform: translateY(100%);
  73. }

  75. .price-card__ribbon::after {
  76.   border-width: 0.8rem 0 0 0.8rem;
  77.   border-color: transparent transparent transparent var(--c-ribbon-shadow);
  78.   right: 0;
  79.   top: 0;
  80.   transform: translateY(-100%);
  81. }

  83. .price-card__ribbon-text {
  84.   color: var(--c-ribbon-text);
  85.   font-size: 2rem;
  86.   line-height: 1.4;
  87.   font-weight: 700;
  88.   display: block;
  89.   transform: skew(0, 10deg);
  90. }

  92. .price-card__ribbon-text-highlight {
  93.   color: yellow;
  94.   font-size: 0.5em;
  95. }

  97. .price-card__title {
  98.   color: var(--c-title);
  99. }

  101. .price-card--highlight {
  102.   --c-ribbon: #f94289;
  103.   --c-ribbon-text: #fff;
  104.   --c-ribbon-shadow: #ff619b;
  105.   --c-title: #f94289;
  106.   box-shadow: 0 0 3rem -1.5rem rgba(0, 0, 0, 0.5);
  107. }

  109. .price-card__info {
  110.   display: flex;
  111.   flex-direction: column;
  112.   gap: 10px;
  113. }

  115. .price-card__info p {
  116.   font-size: 0.4em;
  117. }
复制代码

回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表