كيف - تخطيط المدونة
تعرف على كيفية إنشاء تخطيط مدونة سريع الاستجابة باستخدام CSS.
تعرف على كيفية إنشاء تخطيط مدونة سريع الاستجابة يختلف بين عمودين وعرضين كاملين حسب عرض الشاشة.
قم بتغيير حجم نافذة المتصفح لرؤية التأثير سريع الاستجابة:
كيفية إنشاء تخطيط مدونة
الخطوة 1) أضف HTML:
مثال
<div class="header">
<h2>Blog Name</h2>
</div>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title
description, Dec 7, 2017</h5>
<div class="fakeimg"
style="height:200px;">Image</div>
<p>Some
text..</p>
</div>
<div
class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div
class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me</h2>
<div class="fakeimg"
style="height:100px;">Image</div>
<p>Some
text about me in culpa qui officia deserunt mollit anim..</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>
الخطوة 2) أضف CSS:
مثال
body {
font-family: Arial;
padding: 20px;
background: #f1f1f1;
}
/* Header/Blog Title */
.header {
padding: 30px;
font-size: 40px;
text-align: center;
background: white;
}
/* Create two unequal
columns that floats next to each other */
/* Left column */
.leftcolumn
{
float: left;
width: 75%;
}
/* Right column */
.rightcolumn
{
float: left;
width: 25%;
padding-left: 20px;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Add a
card effect for articles */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear:
both;
}
/*
Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* Responsive layout - when the screen
is less than 800px wide, make the two columns stack on top of each other
instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
}
نصيحة: انتقل إلى البرنامج التعليمي الخاص بتخطيط موقع ويب CSS لمعرفة المزيد حول تخطيطات مواقع الويب.
نصيحة: انتقل إلى البرنامج التعليمي لتصميم الويب سريع الاستجابة الخاص بـ CSS لمعرفة المزيد حول تصميم الويب سريع الاستجابة والشبكات.