Hauwa ceke mai sauki: manyan kafin blog

Koyar da hauwa ceke mai sauki da ke tsara manyan kafin blog ta CSS.

Koyar da hauwa ceke mai sauki da ke tsara manyan kafin blog, wanda ke kawo kariya a tsakanin labarin kai tsaye da labarin kai tsaye a cikin nauyin birinshi.

Sake wani saukin birinshi na birinshi don koyar da tasiri:

Jiyar da nuna

Hauwa ceke mai sauki da ke tsara manyan kafin blog

Wani step - Ci HTML:

<div class="header">
  <h2>Manu Musa</h2>
</div>
<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Tajayi na, 7 ga Disamba 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
    </div>
    <div class="card">
      <h2>TITLE HEADING</h2>
      <h5>Tajayi na, 2 ga Yuli 2017</h5>
      <div class="fakeimg" style="height:200px;">Image</div>
      <p>Some text..</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>Matafiyar Aini</h2>
      <div class="fakeimg" style="height:100px;">Image</div>
      <p>Iya cecekan kanu abin da ke kaiyade</p>
    </div>
    <div class="card">
      <h3>Popular Post</h3>
      <div class="fakeimg">Image</div><br>
      <div class="fakeimg">Image</div><br>
      <div class="fakeimg">Image</div>
    </div>
    <div class="card">
      <h3>Follow Me</h3>
      <p>Some text..</p>
    </div>
  </div>
</div>
<div class="footer">
  <h2>Footer</h2>
</div>

Lafiya na biyu - Ta fada CSS:

* {
  box-sizing: border-box;
}
body {
  font-family: Arial;
  padding: 20px;
  background: #f1f1f1;
}
/* Takadduma na yanuwa / aro na yanuwa */
.header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
  background: white;
}
/* Ta fada kwayoyin wuce masu tasiri masu fada kwayoyin kusa */
/* Kwayar da yana kusa da wuce */
.leftcolumn {
  float: left;
  width: 75%;
}
/* Tsa kwayar da yana kusa da gida */
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}
/* Ta fada kwayar da yana da tasiri da kwayar da ake fada ita */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
/* Ta fada kwayar da takaddumar wacce ake yi amfani da ita domin takaddumar kwayoyin wacce ke amfani da ita */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
/* Yance kwayar da ta yana gudanar da kwayoyin kusa */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Takadduma na yanuwa */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
/* Ilmin koyar da tsarin kwayoyin wajen kwayoyin ƙasa da yankuna a cikin ƙwayoyin ƙasa, idan kwayoyin ƙasa yana da tsawon 800px */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    width: 100%;
    padding: 0;
  }
}

Jiyar da nuna

相关页面

教程：CSS 网站布局

教程：CSS 响应式网页设计