کد کوئری برای مقادیر 1،4،7،10،13،15 و بدینصورت پله ای

کد کوئری برای مقادیر 1،4،7،10،13،15 و بدینصورت پله ای

با توجه به اینکه سوال دقیقاً مشخص نیست که از چه نوع پله‌ای استفاده شود، چندین راه برای پاسخ به این سوال وجود دارد. در زیر یکی از راه‌های ممکن برای پاسخ به این سوال آورده شده است:

HTML:
“`
<div class=”steps”>
<div class=”step”>1</div>
<div class=”step”>4</div>
<div class=”step”>7</div>
<div class=”step”>10</div>
<div class=”step”>13</div>
<div class=”step”>15</div>
</div>
“`

CSS:
“`
.steps {
display: flex;
}

.step {
width: calc(100% / 6);
height: 50px;
background-color: #ccc;
}

.step:nth-child(odd) {
background-color: #eee;
}

.step:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

.step:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
“`

توضیحات:

– در HTML، از دو عنصر `div` استفاده شده است. عنصر اول با کلاس `steps`، حاوی تمام مراحل (پله‌ها) است. عنصر دوم با کلاس `step`، هر پله را نمایش می‌دهد.
– در CSS، از `display: flex` برای نمایش پله‌ها در یک خط استفاده شده است.
– با استفاده از `width: calc(100% / 6)`، عرض هر پله به صورت دقیق تعیین شده است. به دلیل وجود 6 پله، از `calc(100% / 6)` برای تعیین عرض هر کدام استفاده شده است.
– با استفاده از `background-color`، رنگ پس زمینه هر پله تعیین شده است. برای پله‌های فرد، از رنگ خاکستری روشن (`#eee`) و برای پله‌های زوج، از رنگ خاکستری متوسط (`#ccc`) استفاده شده است.
– با استفاده از `border-radius`، گوشواره‌ای (radius) به چپ و راست پل‌ها داده شده تا ظاهر آن‌ها بهتر شود.