Давайте как всегда посмотрим код и поймём структуру:
Եկեք նայենք կոդը, ինչպես միշտ և հասկանանք կառուցվածքը.
У нас есть фотография(логотип), блок нижней навигации, блок flex и сами иконки. Давайте начнём c логотипа.
Մենք ունենք լուսանկար (լոգո), ներքևի նավիգացիոն բլոկ, flex բլոկ և հենց պատկերակները: Սկսենք տարբերանշանից։
Сперва мы задали размер для блока, покрасили и центрировали через свойство flex. Теперь нужно то же самое сделать для навигации:
Նախ, մենք սահմանում ենք բլոկի չափը, գունավորումը և կենտրոնացումը flex հատկության միջոցով: Այժմ դուք պետք է նույնն անեք նավիգացիայի համար.
Теперь добавим блок иконок:
Հիմա եկեք ավելացնենք պատկերակի բլոկ.
Теперь перейдём к очень интересной и новой части для вас. Тег <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-ով:
Мы использовали спрайты и взяли из одной большой картинки маленькие картинки. Это будет считаться не большая оптимизация для сайта чтобы скорость было получше. Сейчас сайт выглядит уже готовым но у нас нету мобильной оптимизации. А как вы помните это очень важно и нужно сделать чтобы гугл не ругался 😜.
Մենք օգտագործեցինք սփրայթներ և փոքր նկարներ սարքեցինք մեկ մեծ նկարից: Սա կհամարվի կայքի փոքր օպտիմիզացիա արագությունը բարելավելու համար։ Այժմ կայքը պատրաստ է թվում, բայց մենք չունենք բջջային օպտիմիզացիա։ Եվ ինչպես հիշում եք, սա շատ կարևոր է, և դուք պետք է համոզվեք, որ Google-ը չի հայհոյում 😜։