چگونه ایجاد می‌شود: کتابخانه تصاویر قابل اسکرول افقی

آموزش نحوه استفاده از CSS برای ایجاد کتابخانه تصاویر با اسکرول افقی.

ایجاد کتابخانه تصاویر با اسکرول افقی

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

<div class="scroll-container">
  <img src="img_5terre.jpg" alt="پنج شهر دریایی">
  <img src="img_forest.jpg" alt="جنگل">
  <img src="img_lights.jpg" alt="نورهای شمالی">
  <img src="img_mountains.jpg" alt="کوه">
</div>

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

div.scroll-container {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}
div.scroll-container img {
  padding: 10px;
}

به طور مستقیم امتحان کنید

صفحات مرتبط

تدریس:تصویر HTML

تدریس:تنظیمات CSS برای تصاویر