कैसे बनाएं: संग्रह गैलरी

संग्रह गैलरी ग्रिड को प्रतिक्रियाशील बनाने के लिए CSS का उपयोग कैसे करें।

संग्रह साइट बनाना कैसे ?

पहला कदम - HTML जोड़ेंः

<!-- मुख्य सामग्री (मध्यस्थ वेबसाइट) -->
<div class="main">
<h1>मायलोगो.कॉम</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="width:100%">
      <h3>मेरा काम</h3>
      <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="column">
    <div class="content">
      <img src="shenzhen.jpg" alt="Shenzhen" style="width:100%">
      <h3>मेरा काम</h3>
      <p>Lorem ipsum..</p>
    </div>
  </div>
</div>
<div class="content">
  <img src="bear.jpg" alt="Bear" style="width:100%">
  <h3>कुछ अन्य काम</h3>
  <p>Lorem ipsum..</p>
</div>
<!-- मुख्य सामग्री समाप्त -->
</div>

दूसरा कदम - CSS जोड़ें:

* {
  box-sizing: border-box;
}
body {
  background-color: #f1f1f1;
  padding: 20px;
  font-family: Arial;
}
/* वेबसाइट को मध्यस्थ स्थिति में रखा जाए */
.main {
  max-width: 1000px;
  margin: auto;
}
h1 {
  font-size: 50px;
  word-break: break-all;
}
.row {
  margin: 8px -16px;
}
/* प्रत्येक स्तम्भ के बीच आंतरिक घनत्व (अगर आवश्यक हो) जोड़ें */
.row,
.row > .column {
  padding: 8px;
}
/* चार बराबर फैली साथ में स्थित स्तम्भ बनाया जाए */
.column {
  float: left;
  width: 25%;
}
/* रवाना के बाद की फ्लॉट को साफ करना */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* सामग्री */
.content {
  background-color: white;
  padding: 10px;
}
/* प्रतिक्रियासारण रचना - दो स्तम्भ रचना बनाया जाए, नहीं कि चार स्तम्भ */
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}
/* प्रतिक्रियासारण रचना - दो स्तम्भ गुच्छे के स्थान पर बढ़ाया जाए, नहीं कि साथ में */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

स्वयं प्रयास करें

संबंधित पृष्ठ

पाठ्यक्रम:कैसे बनाएं: फ़िल्टरिंग के साथ कॉलेजीयम गैलरी