ЗАВДАННЯ: створити адаптивну навігаційну панель засобами модуля CSS Flexbox.

 

1.      Візьміть за основу навігаційну панель, розроблену в практичному завданні 3.

2.    Відкрийте в редакторі коду HTML-файл index.html. Призначте елементу ul клас контейнер.

            <nav>

            <ul class="container">

                    <li> <a  href="index.html">Home</a> </li>

                    <li> <a href="info.html">About</a> </li>

                    <li> <a href="gallery.html">Gallery</a> </li>

                    <li> <a href="form.html">Contacts</a> </li>

            </ul>

        </nav>

3.     Відкрийте в редакторі коду CSS-файл style.css. Оголосіть створений клас із наведеними атрибутами:

           .conrainer{

                    display:  flex;

                    flex-direction:  column;

                    border: 1px dashed white;

                    background-color: #ff5599;

                }

4. Призначте елементам списку атрибути (За­мість запропонованих кольорів виберіть на свій розсуд колір тла та колір межі.)

        .conraintr  li  {

            flex-grow:  1;

            margin-top:   5px;

            margin-bottom:  2px;

            margin-right:  8px;

            background-color:  #ff5555;

            list-style-type:   none;

            font-size:   50px;

        }

5.  Перегляньте браузером отриманий результат. Зробіть скріншот і роз­містіть його у висновку з відповідним записом значення модуля Flexbox. 

6.  Замініть значення атрибута flex-direction на column-reverse. Збережіть і оновіть сайт у браузері.  Зробіть скріншот і розмістіть його у наступному пункті висновку.

7.   Перегляньте сайт при  зміні значень атрибута flex-direction на row-reverse і row відповідно. Зробіть скріншоти, збережіть їх у висновку.

8.  Додайте атрибут justify-content. Надайте значення center, flex-start, flex-end, space-around. Зробіть скріншоти для кожного значення атрибута.

9. Збільшіть висоту контейнера (height: 200px або 300рх). Додайте атри­бут align-items. Перегляньте й зробіть скріншоти для значень center, flex-start, flex-end, stretch.

10. Зробіть висновок про природу значення  stretch  атрибута align-items і space-around атрибута justify-content.

11. Скористайтеся для  перевірки  браузером Google Chrome (сполучення клаіві Ctrl + Shift +1 або права кнопка миші).

12. Виберіть у контекстному меню команду Перевірити. Відкриється панель інспектора коду.

Виберіть у рядку меню команду Панель перемикачів девайсів (Toggle device toolbar) (а – панель перемикачів девайсів). Клацнувши цю команду, можна вибирати емуляцію девайса (б — вибір розміру екрана). Якщо девайса, який нас цікавить, у списку немає, то, клацнувши ко­манду Edit, можна пошукати в додатковому меню (в — додаткове меню).



14. Проаналізуйте збережені скріншоти й запишіть отримані результати.

Зробіть висновок: як змінився сайт після зміни коду; порівняйте отримані результати; сформулюйте і запи­шіть зміни, які ви помітили


Підписатися на: Дописи (Atom)