W3Schools 代码 - Tryit

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="content-security-policy" content="script-src 'none'">
<title>CSS Макет веб-сайта</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

/* Стиль header */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

/* Стиль верхнего навбара */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Стиль ссылок верхней навигации */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Изменение цвета при наведении */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Создайте три неравных столбца, которые плавают рядом друг с другом */
.column {
  float: left;
  padding: 10px;
}

/* Левый и правый столбец */
.column.side {
  width: 25%;
}

/* Средний столбец */
.column.middle {
  width: 50%;
}

/* Очистить float после столбцов */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Адаптивный макет: три столбца располагаются друг над другом, а не рядом друг с другом */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

/* Стиль footer */
.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}
</style>
</head>
<body>

<div class="header">
  <h1>Header</h1>
  <p>Измените размер окна браузера, чтобы увидеть эффект реагирования.</p>
</div>

<div class="topnav">
  <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>
  <a href="#">Ссылка</a>
</div>

<div class="row">
  <div class="column side">
    <h2>Сторона</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
  </div>

<div class="column middle">
    <h2>Основной контент</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.</p>
  </div>

<div class="column side">
    <h2>Сторона</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
  </div>
</div>

<div class="footer">
  <p>Footer</p>
</div>

</body>
</html>