کیا بنایا جاتا ہے: بلاگ کی بچت

بلاگ کی بچت کا رجحان

پہلے قدم - اچی کا اضافہ:

<div class="header">
  <h2>بلاگ کا نام</h2>
</div>
<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>تیتر کا عنوان</h2>
      <h5>تیتر کا توضیح، 7 دسمبر 2017</h5>
      <div class="fakeimg" style="height:200px;">تصویر</div>
      <p>کچھ متن..</p>
    </div>
    <div class="card">
      <h2>تیتر کا عنوان</h2>
      <h5>تیتر کا توضیح، 2 ستمبر 2017</h5>
      <div class="fakeimg" style="height:200px;">تصویر</div>
      <p>کچھ متن..</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>مجھ پر معلومات</h2>
      <div class="fakeimg" style="height:100px;">تصویر</div>
      <p>کچھ متنی درمورد خود میں جس میں مقصر کسی کا عہد یا دفعہ نافذ نہیں رکھنا چاہئیے، مولتی آپسی عدم تعاون، انسان کی جسمی حرکت نہیں چاہئیے..</p>
    </div>
    <div class="card">
      <h3>پرمشتمل پوسٹ</h3>
      <div class="fakeimg">تصویر</div><br>
      <div class="fakeimg">تصویر</div><br>
      <div class="fakeimg">تصویر</div>
    </div>
    <div class="card">
      <h3>میرے ساتھ رابط کریں</h3>
      <p>کچھ متن..</p>
    </div>
  </div>
</div>
<div class="footer">
  <h2>پیچ بندی</h2>
</div>

دوسری قدم - سی ایس ایس کا اضافہ:

* {
  بکسائزنگ: بورڈر کا حجم;
}
بدی:
  خاندان فونت: Arial;
  پیدائش: 20px;
  پس منظر: #f1f1f1;
}
/* سر پیچ بندی/بلاگ کا عنوان */
.header {
  پیدائش: 30px;
  حجم فونت: 40px;
  نوٹ: وسط;
  پس منظر: سفید;
}
/* دو نا مساوی کولم، کفالت میں بولن */
/* چپ کولم */
.leftcolumn {
  کفالت: چپ;
  وسیعت: 75%;
}
/* راست پارٹ */
.rightcolumn {
  کفالت: چپ;
  وسیعت: 25%;
  پیدائش چپ سمت: 20px;
}
/* غیر حقیقی تصویر */
.fakeimg {
  رنگ پس منظر: #aaa;
  وسیعت: 100%;
  پیدائش: 20px;
}
/* مضمون کی کارٹ نمائش */
.card {
  رنگ پس منظر: سفید;
  پیدائش: 20px;
  مجھب: 20px;
}
/* کولم کے بعد کی کفالت */
.row:after {
  مقصد: "";
  نمائش: میز;
  نظافت: دونوں سمتوں سے;
}
/* پیچ بندی */
.footer {
  پیدائش: 20px;
  نوٹ: وسط;
  پس منظر: #ddd;
  مجھب: 20px;
}
/* منجمدیتی کاری - جب اسکرین کی وسیعت 800px سے کم ہوتی ہے تو دو پارٹ ساتھ دامن میں ہوئی رہیں گے، نہ کہ کولم کی شکل میں */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {
    وسیعت: 100%;
    پیدائش: 0;
  }
}

پرسنل طور پر سعی کریں

صفحات مرتبط

آموزش:طرح وب CSS

آموزش:طرح واکنشگرا CSS