Я сделяль: главная страница Яндекса

Давай­те попро­бу­ем экс­пе­ри­мент: повто­рим вёрст­ку извест­ных сай­тов, исполь­зуя мини­мум HTML- и CSS-команд. Для стар­та мы взя­ли внешне доволь­но про­стую стра­ни­цу — ya.ru. Наша зада­ча — повто­рить внеш­ний вид стра­ни­цы, но на совре­мен­ном CSS.

Внешний вид страницы

Что внутри

Если мы загля­нем в исход­ный код этой стра­ни­цы в бра­у­зе­ре, то уви­дим 10 стра­ниц со скрип­том, а в кон­це — код, кото­рый отве­ча­ет за саму вёрстку:

Исходный код

По тегу <table> мы пони­ма­ем, что стра­ни­ца свёр­ста­на на таб­ли­цах. При про­смот­ре DOM-структуры стра­ни­цы в инспек­то­ре вид­но, что в таб­ли­це одна колон­ка и три строки:

  • с шап­кой, где сто­ят ссыл­ки на почту и на профиль
  • с основ­ным содер­жи­мым — стро­кой поис­ка по центру
  • и с под­ва­лом, где нари­со­ван лого­тип Яндекса.

Попро­бу­ем сде­лать то же самое, исполь­зуя коман­ды из совре­мен­но­го CSS — недав­но мы рас­ска­зы­ва­ли, как одна такая коман­да может заме­нить деся­ток строк кода.

Используем команды из современного CSS

Разбиваем страницу на блоки

Из ста­тьи про корот­кие CSS-команды возь­мём коман­ду grid-template-rows и попра­вим «Шаб­лон „свер­ху вниз“»:

<!DOCTYPE html>
<html>

<head>
  <title>Делаем так же: главная страница Яндекса</title>
  <style>
    body {
      /*подключаем сетку*/
      display: grid;
      /*общий размер — вся высота экрана*/
      height: 100vh;
      /*разбиваем на три части — первая и последняя зависят от содержимого, а средняя занимает всё оставшееся место*/
      grid-template-rows: auto 1fr auto;
      margin: 0;

      /*настройки шрифта*/
        font-size: 0.8em;
        line-height: normal;
        font-family: Arial, Helvetica, sans-serif;
    }

    header {
      /*настройки шапки*/
    }

    main {
      /*настройки основной части*/
    }

    footer {
      /*настройки подвала*/
    }

  </style>
</head>

<body>
  <header>Сделать стартовой</header>
  <main>Тут будет поиск</main>
  <footer>Тут будет лого Яндекса</footer>
</body>
</html>
Настройки шрифта поставили как в оригинальной странице Настрой­ки шриф­та поста­ви­ли как в ори­ги­наль­ной странице 
Пока всё выглядит странно. Сейчас поправим и добавим красоты Пока всё выгля­дит стран­но. Сей­час попра­вим и доба­вим красоты 

Заполняем верхнюю часть

Мы не будем ста­вить ссыл­ки на раз­де­лы сер­ви­са, а про­сто доба­вим ссыл­ку на вход в почту. Един­ствен­ное, что нам для это­го пона­до­бит­ся, — настро­ить отсту­пы и сде­лать вырав­ни­ва­ние по пра­во­му краю. Там же в сти­лях отклю­чим под­чёр­ки­ва­ния у ссылок:

 header {

  /*настройки шапки*/

  margin: 10px;

  text-align: right;

 }

/*отключаем встроенное оформление для ссылок*/

      a{

        text-decoration: none;

      }

А этот код доба­вим в соот­вет­ству­ю­щий раз­дел страницы:

<header>
     <a href="https://mail.yandex.ru/">Войти в почту</a>
  </header>

Верстаем основной раздел

Вот что нам нуж­но сде­лать, что­бы полу­чить при­мер­но тот же дизайн, что и у Яндекса:

  1. Поста­вить по цен­тру поле вво­да и кноп­ку «Най­ти».
  2. Уве­ли­чить шрифт.
  3. Сде­лать поле вво­да жёл­то­го цвета.
  4. Покра­сить фон у кноп­ки в жёл­тый цвет.

Что­бы стро­ка поис­ка и кноп­ка ока­за­лись по цен­тру раз­де­ла, исполь­зу­ем полез­ную коман­ду place-items: center;

main {

      /*настройки основной части*/

      display: grid;

      place-items: center;

      font-size: 19px;

    }

Поста­вим на стра­ни­цу поле вво­да и тек­сто­вую кнопку:

<main> 

  <div>

    <!-- поле ввода -->

    <input id = "srch" type="text" size="20">

    <!-- кнопка «Найти» -->

    <button class="st" onclick="search()">Найти</button>

  </div>

</main>

Нам оста­лось настро­ить сти­ли, что­бы выде­лить жёл­тым оба эле­мен­та. Ещё нам нуж­но будет сде­лать кноп­ку со стре­лоч­кой, но сей­час мы это­го делать не будем, пото­му что, во-первых, лень; а во-вторых, это потре­бу­ет неко­то­рых ухищ­ре­ний, объ­яс­нять кото­рые сей­час неумест­но. Оста­но­вим­ся на более про­стом варианте:

/*делаем жёлтые рамки у поля ввода*/
input{
  border: 4px solid #ffdb4d;
  font-size: 30px;
}

.st{
  /*отключаем стандартное оформление*/
  appearance: none;
  border: 0;
  /*делаем кнопку жёлтой*/
  background-color: #ffdb4d;
  /*размер шрифта и кнопки*/
  font-size: 20px;
  width: 70px;
  height: 44px;
  /*настраиваем отступы*/
  padding: 9px;
  padding-top: 14px;
  padding-bottom: 10px;
  /*сдвигаем текст вплотную к кнопке*/
  margin-left: -6px;
}
В следующей итерации нарисуем стрелочку у кнопки. В сле­ду­ю­щей ите­ра­ции нари­су­ем стре­лоч­ку у кнопки. 

Добавляем скрипт поиска

Что­бы наш про­то­тип рабо­тал так же, как и ори­ги­нал, сде­ла­ем так:

  1. При нажа­тии на кноп­ку запус­ка­ем JavaScript-функцию search() — её вызов мы уже прописали.
  2. В этой функ­ции мы полу­ча­ем содер­жи­мое тек­сто­во­го поля и добав­ля­ем перед ним адрес с ори­ги­наль­ной стро­кой поиска.
  3. Пере­хо­дим по полу­чив­ше­му­ся адре­су и полу­ча­ем рабо­чий поиск.

Напи­шем это на JavaScript:

<!-- подключаем поиск в Яндексе по нажатию на кнопку -->
<script type="text/javascript">
  function search() {
    // получаем содержимое поля ввода
    var t = document.getElementById("srch").value;
    // формируем новый адрес со строкой поиска
    t = "https://yandex.ru/search/?text=" + t;
    // открываем страницу с результатами
    window.location.href = t;
  }  
</script>

Ставим логотип внизу страницы

Исполь­зу­ем ту же коман­ду для вырав­ни­ва­ния по цен­тру, что и в основ­ной части:

footer {
      /*настройки подвала*/
      display: grid;
      place-items: center;
    }

Нам оста­лось толь­ко доба­вить кар­тин­ку — что­бы не возить­ся со сме­ще­ни­я­ми и серым вари­ан­том, как в ори­ги­на­ле, возь­мём основ­ное лого с глав­но­го сайта:

<footer>

    <img src="https://yastatic.net/s3/home-static/_/x/Q/xk8YidkhGjIGOrFm_dL5781YA.svg" style="max-height: 50%;">

</footer>

Срав­ним ори­ги­нал и наш резуль­тат. Понят­но, что мы не смог­ли в точ­но­сти всё вос­про­из­ве­сти, но мы сде­ла­ли это быст­ро и оно рабо­та­ет. Будет вре­мя — допи­лим до идеала.

Оригинал Оригинал 
Наш результат Наш результат 
Готовый код

<!DOCTYPE html>
<html>

<head>
  <title>Делаем так же: главная страница Яндекса</title>
  <style>
    body {
      /*подключаем сетку*/
      display: grid;
      /*общий размер — вся высота экрана*/
      height: 100vh;
      /*разбиваем на три части — первая и последняя зависят от содержимого, а средняя занимает всё оставшееся место*/
      grid-template-rows: auto 1fr auto;
      margin: 0;

      /*настройки шрифта*/
      font-size: 0.8em;
      line-height: normal;
      font-family: Arial, Helvetica, sans-serif;
    }

    header {
      /*настройки шапки*/
      margin: 10px;
      text-align: right;
      
    }

    main {
      /*настройки основной части*/
      display: grid;
      place-items: center;
      font-size: 19px;
    }

    footer {
      /*настройки подвала*/
      display: grid;
      place-items: center;
    }

    /*делаем жёлтые рамки у поля ввода*/
    input{
      border: 4px solid #ffdb4d;
      font-size: 30px;
    }

    /*отключаем встроенное оформление для ссылок*/
    a{
      text-decoration: none;
    }

    .st{
      /*отключаем стандартное оформление*/
      appearance: none;
      border: 0;
      /*делаем кнопку жёлтой*/
      background-color: #ffdb4d;
      /*размер шрифта и кнопки*/
      font-size: 20px;
      width: 70px;
      height: 44px;
      /*настраиваем отступы*/
      padding: 9px;
      padding-top: 14px;
      padding-bottom: 10px;
      /*сдвигаем текст вплотную к кнопке*/
      margin-left: -6px;
    }

  </style>
</head>

<body>
  <!-- подключаем поиск в Яндексе по нажатию на кнопку -->
  <script type="text/javascript">
    function search() {
      // получаем содержимое поля ввода
      var t = document.getElementById("srch").value;
      // формируем новый адрес со строкой поиска
      t = "https://yandex.ru/search/?text=" + t;
      // открываем страницу с результатами
      window.location.href = t;
    }  
  </script>
  <header>
     <a href="https://mail.yandex.ru/">Войти в почту</a>
  </header>

<main> 
  <div>
    <!-- поле ввода -->
    <input id = "srch" type="text" size="20">
    <!-- кнопка «Найти» -->
    <button class="st" onclick="search()">Найти</button>
  </div>
</main>

  <footer>
    <!-- логотип -->
    <img src="https://yastatic.net/s3/home-static/_/x/Q/xk8YidkhGjIGOrFm_dL5781YA.svg" style="max-height: 50%;">
  </footer>
  
</body>
</html>