Направи хоризонталну мени за сами сајту

Хоризонтална мени немају скоро никакав сајт - то је важан део, као што се може својим изгледом и употребљивост да се привуку или, обрнуто, уплашити посетилаца. Хајде да науче како да направите основну хоризонтални мени: да је "костур" у ХТМЛ, да савладају основне вештине за стварање. Можете сигурно наћи спремну мени, али много лепше да науче како да га развијају се. То је веома забавно.

Научите да мени

Трудимо се да одступа од семантике, који држе водећих фигура распореда. Прво морате да направите "костур" за наше менија у ХТМЛ, науче основне вештине да своје хоризонталне меније. А онда ће украсити, користећи стилски. Нека наша хоризонтални мени садржи 5 ставки. Прва ставка ће бити преусмерени на почетну страницу. Друга ствар - "О нама". Трећи - "Наши награде". Четврто - "То је забавно." Пети - "Контакт".

ХТМЛ код изгледа овако:

Ко не зна:: ул ознака се користи за метак, њени елементи почињу са ли. Ли ознаке наследити стилове који се примењују у ул.

Ул - блок елемент листе, она ће бити простирала на ширину. Ли је такође блок.

Дакле, направите индек.хтмл. Ми прикупљамо наш код. У овом тренутку, претраживач приказује вертикални него хоризонтални мени. Али са иоу циљем - да се направи хоризонталну мени за сајт. За то нам је потребно ЦСС.

Шта је ЦСС?

Ако тек треба да савладају развој сајтова, неопходно је да се упознају са концептом Цасцадинг Стиле Схеетс. У ствари, ово су правила за обликовање, прераду, које се примењују у различитим елементима на страницама веб-сајта. Ако се описују својства елемената у стандардном ХТМЛ, мораћете да неколико пута поновите, добијате дуплирање истих делова кода. Паге лоад тиме на рачунару корисника ће расти. Да бисте то избегли, постоји ЦСС. Довољно је да се опише само једном одређени елемент, а онда једноставно показују где да користе својства одређеног стила. Могуће је направити опис не само у тексту саме странице, али и у другој датотеци. То ће омогућити да се пријаве опис различитих стилова на свим страницама сајта. Такође је погодан да измени неке странице, мењање ЦСС-фајл. Стиле листова омогућавају да радите са фонтовима на бољем нивоу него ХТМЛ, помажући да се избегне погоршање у графичке странице сајта.

Користећи Стиле Схеетс за развој менија

ЦСС код за мени:

1. # Ми_1мену {бордер-стиле: нормал; паддинг: 6; видтх: 800пк; фонт-сизе: Ауто;}
2. # Ми_1мену Ли {флоат: лефт; фонт: италиц 18пк Ариал;}
3. # Ми_1мену А {цолор: 756; дисплаи: блоцк; Висина: 55 ×; лине-хеигхт: 55 пиксела; паддинг: 0пк 15пк 0пк 15пк; бацкгроунд: #дфц; тект-децоратион: ноне}
4. # Ми_1мену а: ховер {цолор: # #фоа; бацкгроунд: # 788;}

Сада погледајмо настале хоризонталном менију ЦСС.

# Ми_1мену - тако да је стил задатак за ул- елемент са ид = ми_1мену, лист-стиле: ноне - Ова команда да се уклоне трагови заказаним ставкама.

Ширина: 800пк - ширина нашем менију је 800 пиксела.

паддинг: 0! - то уклања паддинг унутра.

фонт-сизе: Ауто - виравнивние хоризонталну мени у центру наше странице.

# Ми_1мену Ли - додељивање стилове Ли-елементе.

Висина: 55 × - висина мени.

# Ми_1мену а: ховер - додељивање стилове на елемента и када је индукована миша.

Нећемо описивати детаљно сваку линију, као сваки програмер може овде навести његове параметре. Ова основа за примену стилова у менију на сајту. Можете му дати више готових и леп изглед, користећи слике. Доделити елемент али, на пример, бацкгроунд: урл (имг1.пнг) репеат-к. Нека буде позадина: урл ( 'имг2.пнг) репеат-к за а: ховер.

Употребите своју машту, креативност преференције. Онда на основу тог знања о томе како да направите једноставну мени на сајту, можете развити страницу са својим јединственим дизајном.