چگونه ایجاد شود: امتیاز کاربر

چگونه کارت امتیاز امتیاز کاربر را ایجاد کنیم

قدم اول - افزودن HTML:

<!-- افزودن کتابخانه آیکون -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span class="heading">امتیاز کاربر</span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star checked"></span>
<span class="fa fa-star"></span>
<p>4.1 میانگین بر اساس 254 نقد.</p>
<hr style="border:3px solid #f1f1f1">
<div class="row"></div>
  <div class="side"></div>
    <div>5 ستار</div>
  </div>
  <div class="middle"></div>
    <div class="bar-container"></div>
      <div class="bar-5"></div>
    </div>
  </div>
  <div class="side right">
    <div>150</div>
  </div>
  <div class="side"></div>
    <div>4 ستار</div>
  </div>
  <div class="middle"></div>
    <div class="bar-container"></div>
      <div class="bar-4"></div>
    </div>
  </div>
  <div class="side right">
    <div>63</div>
  </div>
  <div class="side"></div>
    <div>3 ستار</div>
  </div>
  <div class="middle"></div>
    <div class="bar-container"></div>
      <div class="bar-3"></div>
    </div>
  </div>
  <div class="side right">
    <div>15</div>
  </div>
  <div class="side"></div>
    <div>2 ستار</div>
  </div>
  <div class="middle"></div>
    <div class="bar-container"></div>
      <div class="bar-2"></div>
    </div>
  </div>
  <div class="side right">
    <div>6</div>
  </div>
  <div class="side"></div>
    <div>1 ستار</div>
  </div>
  <div class="middle"></div>
    <div class="bar-container"></div>
      <div class="bar-1"></div>
    </div>
  </div>
  <div class="side right">
    <div>20</div>
  </div>
</div>

مرحله دوم - اضافه کردن CSS:

* {
  بستن جعبه: جعبه;
}
بدنه {
  خانواده خط: Arial;
  محدوده: 0 خودکار; /* مرکز وب‌سایت */
  قطر بیش از حد: 800px; /* قطر بیش از حد */
  پاداش: 20px;
}
.heading {
  اندازه خط: 25px;
  محدوده راست: 25px;
}
.fa {
  اندازه خط: 25px;
}
.checked {
  رنگ: نارنجی;
}
/* طرح سه ستونی */
.side {
  شناور: چپ;
  عرض: 15%;
  محدوده بالا: 10px;
}
.middle {
  شناور: چپ;
  عرض: 70%;
  محدوده بالا: 10px;
}
/* متن را در سمت راست قرار ده */
.right {
  جذب خط: راست;
}
/* پاکسازی شناور پس از ستون‌ها */
.row:after {
  محتوای: "";
  نمایش: میز;
  پاکسازی: هر دو;
}
/* محفظه ستون‌ها */
.bar-container {
  عرض: 100%;
  رنگ پس‌زمینه: #f1f1f1;
  جذب خط: وسط;
  رنگ: سفید;
}
/* ستون‌های جداگانه */
.bar-5 {عرض: 60%; ارتفاع: 18px; رنگ پس‌زمینه: #04AA6D;}
.bar-4 {عرض: 30%; ارتفاع: 18px; رنگ پس‌زمینه: #2196F3;}
.bar-3 {عرض: 10%; ارتفاع: 18px; رنگ پس‌زمینه: #00bcd4;}
.bar-2 {عرض: 4%; ارتفاع: 18px; رنگ پس‌زمینه: #ff9800;}
.bar-1 {عرض: 15%; ارتفاع: 18px; رنگ پس‌زمینه: #f44336;}
/* طرح پاسخگو - ستون‌ها را به جای قرار دادن به صورت موازی به صورت پشته‌ای قرار ده */
@media (قطر بیش از حد: 400px) {
  .side, .middle {
    عرض: 100%;
  }
  /* در صفحه‌های کوچک سمت راست را پنهان کن */
  .right {
    display: none;
  }
}

آموزش خود را امتحان كنيد