如何创建：博客布局

学习如何使用 CSS 创建响应式博客布局。

学习如何创建响应式博客布局，该布局根据屏幕宽度在两列和全宽列之间变化。

请调整浏览器窗口大小，以查看响应效果：

स्वयं प्रयोग करें

如何创建博客布局

第一步 - 添加 HTML：


  
Blog Name

</div>


  

    <div class="card">
      
TITLE HEADING

      
Title description, Dec 7, 2017

      
Image

      <p>कुछ पाठ..</p>
    </div>
    <div class="card">
      
TITLE HEADING

      
Title description, Sep 2, 2017

      
Image

      <p>कुछ पाठ..</p>
    </div>
  </div>
  

    <div class="card">
      
About Me

      
Image

      
Some text about me in culpa qui officia deserunt mollit anim..

    </div>
    <div class="card">
      <h3>लोकप्रिय पोस्ट</h3>
      <div class="fakeimg">Image</div><br>
      <div class="fakeimg">Image</div><br>
      <div class="fakeimg">Image</div>
    </div>
    <div class="card">
      <h3>मेरे साथ चलें</h3>
      <p>कुछ पाठ..</p>
    </div>
  </div>
</div>
<div class="footer">
  <h2>Footer</h2>
</div>

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

* {
  box-sizing: border-box;
}
body {
  font-family: Arial;
  padding: 20px;
  background: #f1f1f1;
}
/* पृष्ठ शीर्ष / ब्लॉग शीर्षक */
.header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
  background: white;
}
/* दो असमान स्तंभ बनाएं, एक दूसरे के साथ तैरें */
/* बाईं स्तंभ */
.leftcolumn {
  float: left;
  width: 75%;
}
/* दायां स्तंभ */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}
/* फैक इमेज */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
/* लेख को कार्ड प्रभाव दें */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
/* स्तंभ के बाद की तैरकता निकालें */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* पृष्ठ पाद */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
/* प्रतिक्रियात्मक व्यवस्था - जब स्क्रीन चौड़ाई 800px से कम हो तो दोनों स्तंभ एक साथ थाम जाएं, न कि साथ-साथ */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

स्वयं प्रयोग करें

相关页面

教程：CSS वेबसाइट लेआउट

教程：CSS 响应式网页设计