المثال الأول على تقسيم الصفحة باستخدام css

في هذا المثال ، لدينا عنصر div بفئة "container" تحتوي على عنصرين قسم:
أحدهما به فئة "main-section" والآخر به فئة "sidebar". يحتوي القسم الرئيسي على عنوان وفقرة ، بينما يحتوي الشريط الجانبي على عنوان وقائمة غير مرتبة من روابط التنقل. في كود CSS ، نستخدم display: flex property على الحاوية لإنشاء تخطيط flexboxو flex-wrap: التفاف لالتفاف العناصر الفرعية عندما تتجاوز عرض الحاوية.
قمنا بتعيين العرض ولون الخلفية لكل قسم وإضافة بعض المساحة المتروكة لإنشاء بعض المساحة حول المحتوى. نقوم أيضًا بإزالة الهوامش الافتراضية والمساحةالمتروكة للعناوين وعناصر القائمة ونمط الروابط بدون تسطير ولون غامق.

كود صفحة HTML

<div class="container">
  <section class="main-section">
    <h1>Welcome to my website</h1>
    <p>This is the main section of my website.</p>
  </section>
  <section class="sidebar">
    <h2>Navigation</h2>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </section>
</div>

كود صفحة CSS

.container {
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.main-section {
  width: 70%;
  padding: 20px;
  background-color: #f5f5f5;
}

.sidebar {
  width: 30%;
  padding: 20px;
  background-color: #ddd;
}

h1, h2 {
  margin-top: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

a {
  text-decoration: none;
  color: #333;
}