10.1 Двухколоночный макет

Создание сложных макетов на веб-страницах требует глубокого понимания различных методов позиционирования и их сочетания. В этой лекции рассмотрим несколько практических примеров создания сложных макетов с использованием различных техник CSS, таких как Flexbox, Grid и традиционное позиционирование.

Макет блога с фиксированной навигацией

Этот макет включает заголовок, фиксированную навигационную панель, основное содержимое и боковую панель.

Пример:

CSS 
    
      body {
        margin: 0;
        font-family: Arial, sans-serif;
      }

      .header {
        background-color: #333;
        color: white;
        padding: 20px;
        margin-top: 40px;
        text-align: center;
      }

      .navbar {
        position: fixed;
        top: 0;
        width: 100%;
        background-color: #444;
        color: white;
        padding: 10px;
        box-sizing: border-box;
        z-index: 2;
      }

      .container {
        display: flex;
        margin-top: 60px; /* Высота фиксированной навигации */
      }

      .main-content {
        flex: 3;
        padding: 20px;
      }

      .sidebar {
        flex: 1;
        padding: 20px;
        background-color: #f4f4f4;
      }

      .footer {
        background-color: #333;
        color: white;
        padding: 20px;
        text-align: center;
        position: relative;
        margin-top: auto;
      }
HTML 
    
      <div class="header">My Blog</div>
      <div class="navbar">Navigation</div>
      <div class="container">
        <div class="main-content">
          <h1>Main Content</h1>
          <p>Here is the main content of the blog.</p>
        </div>

        <div class="sidebar">
          <h2>Sidebar</h2>
          <p>Links and other content.</p>
        </div>
      </div>
      <div class="footer">Footer</div>

В этом примере фиксированная навигационная панель остается на месте при прокрутке страницы благодаря position: fixed. Основное содержимое и боковая панель располагаются в двух колонках с помощью Flexbox.

10.2 Одностраничный сайт

Одностраничный сайт с закрепленным заголовком и подвалом

Этот макет включает заголовок, основное содержимое и подвал. Заголовок и подвал остаются видимыми при прокрутке страницы.

Пример:

CSS 
    
      body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif;
      }

      .header {
        background-color: #333;
        color: white;
        padding: 20px;
        text-align: center;
        position: sticky;
        top: 0;
        z-index: 12;
      }

      .main {
        flex: 1;
        padding: 20px;
        background-color: #f4f4f4;
      }

      .footer {
        background-color: #333;
        color: white;
        padding: 20px;
        text-align: center;
        position: sticky;
        bottom: 0;
        z-index: 12;
      }
HTML 
    
      <div class="header">Sticky Header</div>
      <div class="main">
        <h1>Main Content</h1>
        <p>Here is the main content of the page. Scroll to see the sticky header and footer in action.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque luctus lectus eu tortor vehicula, et convallis lacus varius. Integer at orci in nisl faucibus placerat.</p>
      </div>
      <div class="footer">Sticky Footer</div>

В этом примере заголовок и подвал остаются видимыми при прокрутке страницы благодаря position: sticky.

10.3 Многоуровневый навигационный бар

Этот макет включает многоуровневую навигационную панель, которая использует вложенные списки и псевдоклассы для создания выпадающих меню.

Пример:

CSS 
    
        body {
          margin: 0;
          font-family: Arial, sans-serif;
        }
            
        .navbar {
          background-color: #333; 
          width: 100%;
          display: inline-block;
        }
    
        .navbar ul {
          list-style-type: none;
          padding: 0;
          margin: 0;
         }
            
        .navbar > ul > li {
          float: left;
          position: relative; 
        }
            
        .navbar li a {
          display: block;
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          background-color: #333;
        }
                
        .navbar li a:hover {
          background-color: #111;
        }
                
        .navbar li ul {
          display: none;
          position: absolute;
          top: 100%;
          left: 0;
          min-width: 160px;
          background-color: #333;
          z-index: 3;
        }
                
        .navbar li:hover > ul {
          display: block;
        }
                
        .navbar li ul li {
          float: none;
          list-style-type: none;
        }
                
        .navbar li ul li a {
          text-align: left;
          background-color: #333; 
        }
HTML 
    
      <div class="navbar">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Services</a>
            <ul>
              <li><a href="#">Web Design</a></li>
              <li><a href="#">SEO</a></li>
              <li><a href="#">Marketing</a></li>
            </ul>
          </li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>