ЦСС - хоризонтални мени за почетне веб дизајнере

27. 2. 2019.

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

На ХТМЛ-у и ЦСС-у, хоризонтални мени за сајт је лак за изградњу, требало би да почнете писањем оквира.

Изградња оквира

Прво морате направити хтмл маркуп. Мени је најлакше направити листу са ознакама помоћу ознаке

    . Ознака је упарена тако да се мора затворити на крају листе.
. Боље је додати класи за даље обликовање. Елементи пара се додају ознаци.
  • по броју ставки са укљученим линковима.

    Пример:

    Тако се испостави да је основа, која се затим саставља у ЦСС-у у хоризонталном менију, фиксна или падајућа.

    Хоризонтални мени

    Када се код означи, време је да почнете да радите са стилом. Треба напоменути да су упарени тагови који се користе за подразумевани оквир блокирани, што значи да за креирање и регуларног и падајућег хоризонталног менија у ЦСС-у, потребно је да промените тип елемента у мала слова. Ово се може извршити помоћу својства приказа. Додаје се елементу:

    .мену ли { т

    дисплаи: инлине;

    }

    Тако се претвара у хоризонталну. Ако постоји много под-ставки, онда се они могу премјестити на нову линију без додатних специфицираних својстава. У овом случају, користите својство за приказ простора и пренос текста. Новрап спрема текст у потпуности, без раздвајања, а пре-врап чува размаке из ХТМЛ-а и додаје аутоматске.

    .мену ли { т

    дисплаи: инлине;

    вхите-спаце: новрап;

    }

    хоризонтални цсс падајући мени

    Да не бисте забележили ред у чврстом тексту, можете распоредити информације у групе и креирати додатни подмени који ће тачно приказати све што вам је потребно. Подменији могу бити падајући или отворени.

    Падајући мени

    Након савладавања основе изградње хоризонталног менија на ЦСС-у, подмени који испада из њега може се распоредити у вертикалној листи. Листа у маркупу мора бити направљена на више нивоа, додати додатне ознаке за листе са ознакама унутар жељене ставке. Ознака мора да садржи следеће ставке листе:

    У цсс .мену, ли се замењује са ".мену> ли", тако да унутрашњи елементи постају вертикални. Релативно позиционирање се додаје родитељском селектору, у коме се елемент помера од граница родитељског блока, а детету - апсолутном (потпуно се уклања из тока и координира из најближег елемента, а ако није, од граница претраживача). Елементи са релативним позиционирањем могу у себи садржавати подређене елементе са апсолутним позиционирањем. То значи да када се блок креће са положајем: релативним, фиксни дијелови ће остати на својим мјестима унутар њега.

    хоризонтални мени хтмл цсс

    Стандардно, падајући део увек остаје отворен, осим ако не додате екран елементу само када лебдите курсор. Да бисте то урадили, додатна листа је подразумевано скривена:

    .мену> ли { т

    дисплаи: инлине;

    позиција: релативна;

    }

    .мену .сецонд {

    позиција: апсолутна; (подмени везан за родитељску јединицу)

    дисплаи: ноне; (сакриј приказ)

    }

    .мену> ли: ховер .сецонд {(псеудо-класа ховер се користи да би се појавиле ховер листе)

    дисплаи: блоцк;

    }

    Резултат ће бити мали, уредан мени.

    Фиксни мени

    Да би се снимило у отвореној форми, својство приказа са блоком вредности користи се аналогијом са падајућим менијем, али без скривања екрана. Ако желите, можете да поправите не само отворену листу, већ и линију менија када померате страницу. Када корисник помери текст надоле, мени може увек да остане на врху, што олакшава кретање по сајту. Овај елемент има неколико функција. Веома је сличан апсолутном, али се везује само за претраживач, испада из потока. Погодно је координирати такав елемент користећи уобичајена својства горња / доња, лијева / десна. Пример хоризонталног менија са падајућим елементима фиксираним у прегледачу:

    .мену> ли { т

    дисплаи: инлине;

    позиција: фиксна;

    }

    .мену .сецонд {

    позиција: апсолутна;

    дисплаи: ноне;

    }

    .мену> ли: ховер .сецонд {

    дисплаи: блоцк;

    }

    фиксни хоризонтални цсс мени

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