Создание макета сайта Пятая часть

Կայքի դասավորության ստեղծում Հինգերորդ մաս

Давайте как всегда посмотрим код и поймём структуру:

Եկեք նայենք կոդը, ինչպես միշտ և հասկանանք կառուցվածքը.

<footer>
  <img class="logo" src="/img/codenyx.png" alt="Логотип codenyx" width="325px" height="46px"/>
  <div class="footer-navigation">
    <a href="#">Домой</a>
    <a href="#">Про нас</a>
    <a href="#">Услуги</a>
    <a href="#">Статьи</a>
    <a href="#">Контакты</a>
  </div>
  <div class="flex-icons">
    <div class="icons">
      <i class="sprite sprite-Facebook"></i>
      <i class="sprite sprite-Github"></i>
      <i class="sprite sprite-Instagram"></i>
      <i class="sprite sprite-Telegram"></i>
      <i class="sprite sprite-google"></i>
    </div>
  </div>
</footer>

У нас есть фотография(логотип), блок нижней навигации, блок flex и сами иконки. Давайте начнём c логотипа.

Մենք ունենք լուսանկար (լոգո), ներքևի նավիգացիոն բլոկ, flex բլոկ և հենց պատկերակները: Սկսենք տարբերանշանից։

footer {
  width: 100%;
  height: 138px;
  background-color: #0a121f;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

Сперва мы задали размер для блока, покрасили и центрировали через свойство flex. Теперь нужно то же самое сделать для навигации:

Նախ, մենք սահմանում ենք բլոկի չափը, գունավորումը և կենտրոնացումը flex հատկության միջոցով: Այժմ դուք պետք է նույնն անեք նավիգացիայի համար.

.footer-navigation {
  max-width: 434px;
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

Теперь добавим блок иконок:

Հիմա եկեք ավելացնենք պատկերակի բլոկ.

.flex-icons {
  height: 100%;
  width: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.icons {
  height: 53px;
  width: 252px;
  background: rgba(217, 217, 217, 0.2);
  border-radius: 45px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

Теперь перейдём к очень интересной и новой части для вас. Тег <i/> - это самый короткий тег среди всех, что есть. Кроме прямого назначения "italic" он также ассоциируется с "icon". А классы на него можно навешать какие угодно, так же как и на <span>, <strong> или <div>. Как вы видите нам нужно добавить иконки, но нет тега <img>. Так как же добавить? Мы будем рассматривать интересную вещь такую как css спрайты и background-image с background-position:

Այժմ անցնենք ձեզ համար շատ հետաքրքիր և նոր մասի։ <i/> թեգը բոլորից ամենակարճ թեգն է: Բացի «italic» բառի անմիջական նշանակումից, այն կապված է նաև «icon»-ի հետ։ Եվ դուք կարող եք դրա վրա նշանակել ցանկացած թեգ, ինչպես <span>, <strong> կամ <div>. Ինչպես տեսնում եք, մենք պետք է պատկերակ ավելացնենք, բայց <img>. թեգ չկա: Այսպիսով, ինչպես եք ավելացնում? Մենք կդիտարկենք հետաքրքիր նյութեր, ինչպիսիք են css sprites-ը և background-image-ը background-position-ով:

.sprite {
  background-image: url('/img/spritesheet.png'); /*Путь к css спрайту*/
  background-repeat: no-repeat; /*Фотографии не повторялись*/
  display: block; /*Блочный элемент*/
}

.sprite-Facebook {
  width: 35px;
  height: 34px;
  background-position: -5px -5px; /*Позиция вырезания картинки*/
}

.sprite-Github {
  width: 39px;
  height: 39px;
  background-position: -50px -5px; /*Позиция вырезания картинки*/
}

.sprite-Instagram {
  width: 38px;
  height: 38px;
  background-position: -99px -5px; /*Позиция вырезания картинки*/
}

.sprite-Telegram {
  width: 41px;
  height: 41px;
  background-position: -147px -5px; /*Позиция вырезания картинки*/
}

.sprite-google {
  width: 35px;
  height: 36px;
  background-position: -198px -5px; /*Позиция вырезания картинки*/
}

.sprite {
  background-image: url('/img/spritesheet.png'); /*Ճանապարհ դեպի css sprite*/
  background-repeat: no-repeat; /*Լուսանկարը չկրկնվի*/
  display: block; /*Բլոկ տարր*/
}

.sprite-Facebook {
  width: 35px;
  height: 34px;
  background-position: -5px -5px; /*Կտրման դիրքը*/
}

.sprite-Github {
  width: 39px;
  height: 39px;
  background-position: -50px -5px; /*Կտրման դիրքը*/
}

.sprite-Instagram {
  width: 38px;
  height: 38px;
  background-position: -99px -5px; /*Կտրման դիրքը*/
}

.sprite-Telegram {
  width: 41px;
  height: 41px;
  background-position: -147px -5px; /*Կտրման դիրքը*/
}

.sprite-google {
  width: 35px;
  height: 36px;
  background-position: -198px -5px; /*Կտրման դիրքը*/
}

Мы использовали спрайты и взяли из одной большой картинки маленькие картинки. Это будет считаться не большая оптимизация для сайта чтобы скорость было получше. Сейчас сайт выглядит уже готовым но у нас нету мобильной оптимизации. А как вы помните это очень важно и нужно сделать чтобы гугл не ругался 😜.

Մենք օգտագործեցինք սփրայթներ և փոքր նկարներ սարքեցինք մեկ մեծ նկարից: Սա կհամարվի կայքի փոքր օպտիմիզացիա արագությունը բարելավելու համար։ Այժմ կայքը պատրաստ է թվում, բայց մենք չունենք բջջային օպտիմիզացիա։ Եվ ինչպես հիշում եք, սա շատ կարևոր է, և դուք պետք է համոզվեք, որ Google-ը չի հայհոյում 😜։