Редактор кода W3Schools - Tryit

<!DOCTYPE html>
<html lang="ru">
<head>
<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;
  width: 33.33%;
  padding: 15px;
}

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

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

<div class="column">
    <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>
  </div>

</body>
</html>

​x
 
<!DOCTYPE html><html lang="ru"><head><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;  width: 33.33%;  padding: 15px;}​/* Очистить float после столбцов */.row:after {  content: "";  display: table;  clear: both;}​/* Адаптивный макет: три столбца располагаются друг над другом, а не рядом друг с другом */@media screen and (max-width:600px) {  .column {    width: 100%;  }}</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">    <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>  </div>​  <div class="column">    <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>  </div>​  <div class="column">    <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>  </div></div>​</body></html>                