چگونه ایجاد شود: گالری نمونه کارها

آموزش ایجاد گالری نمونه کارهای واکنش‌دار با استفاده از CSS.

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

قدم اول - HTML اضافه کنید:

<!-- محتوای اصلی (سایت مرکزی) -->
<div class="main">
<h1>MYLOGO.COM</h1>
<hr>
<h2>گالری نمونه کارها</h2>
<p>سایز پنجره مرورگر را تغییر دهید تا تأثیر واکنش نشان دهد.</p>
<!-- 作品集画廊网格 -->
<div class="row">
  <div class="column">
    <div class="content">
      <img src="beijing.jpg" alt="Beijing" style="width:100%">
      <h3>کارهای من</h3>
      <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="hangzhou.jpg" alt="Hangzhou" style="width:100%">
      <h3>کارهای من</h3>
      <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="chongqing.jpg" alt="Chongqing" style="عرض:100%">
      <h3>کارهای من</h3>
      <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="shenzhen.jpg" alt="Shenzhen" style="عرض:100%">
      <h3>کارهای من</h3>
      <p>Lorem ipsum..</p>
    </div>
  </div>
</div>
<div class="content">
  <img src="bear.jpg" alt="Bear" style="عرض:100%">
  <h3>کارهای دیگری</h3>
  <p>Lorem ipsum..</p>
</div>
<!-- پایان محتوای اصلی -->
</div>

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

* {
  حاشیه‌کشی: جعبه‌ای;
}
body {
  رنگ پس‌زمینه: #f1f1f1;
  پادشاهی: 20px;
  خانواده فونت: Arial;
}
/* قرارگیری مرکزی وب‌سایت */
.main {
  حداکثر عرض: 1000px;
  مarge: خود;
}
h1 {
  اندازه فونت: 50px;
  شکنندگی کلمات: شکستن کلمات;
}
.row {
  مarge: 8px -16px;
}
/* اضافه کردن فضای داخلی بین ستون‌ها (اگر نیاز باشد) */
.row,
.row > .column {
  پادشاهی: 8px;
}
/* ایجاد چهار ستون به صورت عمودی و هم اندازه. */
.column {
  شناور: چپ;
  عرض: 25%;
}
/* پاکسازی شناور پس از خط */
.row:after {
  محتوا: "";
  نمایش: table;
  clear: both;
}
/* محتوا */
.content {
  رنگ پس‌زمینه: سفید;
  پادشاهی: 10px;
}
/* طراحی پاسخگو - دو ستون را به جای چهار ستون قرار دهید */
@media screen and (max-width: 900px) {
  .column {
    عرض: 50%;
  }
}
/* طراحی پاسخگو - دو ستون را به جای دو ستون به صورت پشت سر هم قرار دهید */
@media screen and (max-width: 600px) {
  .column {
    عرض: 100%;
  }
}

تست شخصی انجام دهید

صفحات مرتبط

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