Вертикални ЦСС мени: уради то сами

Неки вебмастери не желе да изгубе време развијајући се од једноставних једноставних елемената који већ постоје. Они верују да нема смисла губити време на ономе што је већ било тамо. Заправо, за оне који само упознају ХТМЛ и ЦСС, важно је учинити многе ствари самима да добро разуме свој рад. Ово се односи на мени. Креирајте вертикални ЦСС мени. Биће заснован само на ХТМЛ-у и ЦСС-у, без коришћења Јавасцрипт-а и ЈКуери-а. Сваки мени је листа повезивања која воде до страница сајта.

Основни кораци

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

1. Прво, одредите листу линкова (користећи ХТМЛ код) из које ће се састојати мени. Дајте им имена, на пример:

1. Хоме.
2. Наша историја.
3. Лидерство.
4. Услуге.
5. Контакти.

2. Затим ћемо стилизовати линкове по жељи са ЦСС-ом.

Напишемо ХТМЛ код, сачувајмо га у ми_Вмену.хтмл и видети како ће то изгледати у прегледачу:

Ово је основа (скелет) нашег менија. # 1, # 2, итд. Мора се заменити везама. Погледајте како ствари изгледају у прегледачу. Неће вам се свидјети слика. Сада морамо почети описивање стилова елемената како би направили потпун вертикални ЦСС мени.

Опис стилова

Креирајте датотеку под називом ми_Вмену.цсс, у којој можете подесити оно што желите побољшати изглед таквог важног елемента сајта. Испод је шифра, чија имплементација ће оживети вертикални ЦСС мени. Напишите га у креирану датотеку, а затим ћемо детаљније погледати шта значе главне линије које су овде наведене.

Детаљан опис употребљених стилова

Сада детаљно размотримо ЦСС вертикални мени:

Тип стила листе омогућава уклањање маркера листе. Користећи подешавање "0" за маргину и паддинг, уклоните додатну увезу са листе. Као што видите из ХТМЛ кода, наш мени је листа, а ЦСС поставља стилове.

Ул # ми_Вмену - општи стил читаве листе.

Ул # ми_Вмену ли а - стил везе између ли тагова.

Ул # ми_Вмену ли а: ховер је опис врсте ставки у менију у тренутку када један од мушкараца показује на курсор.

Ул # ми_Вмену ли спан - опис текста (имена менија).

Запамтите да су датотеке ми_Вмену.цсс и ми_Вмену.хтмл морају бити сачуване у једном директоријуму. Међутим, могу се наћи у различитим директоријима, али онда је важно додијелити пут до ми_Вмену.цсс у фајлу ми_Вмену.хтмл. Будите опрезни, будући да новинари често имају проблема са овим.

Стил би требао бити повезан између ознака главе у хтмл-датотеки. Мену_1.пнг и мену_2.пнг су слике за приказ ставке менија у нормалном стању и када се крећете преко курсора.

Боље је да слике сачувате у посебном фолдеру за цртеже, назовите га ми_имагес, а затим исправите ЦСС код. Пишите где су ове слике означене, да су у овом директорију: урл (ми_имагес / мену_1.пнг) и урл (ми_имагес / мену_2.пнг).

Остала својства описана у ЦСС коду су лако разумјети. Поставили су изглед нашег менија. Лако се види да су ширина и висина тачака постављени на исти начин за тачке у нормалном стању и када надмашите миш преко њих. Величина фонта је 18пк, паддинг одређује инденте са различитих страна имена имена. Својство дисплеја вам омогућава да поставите приказ помоћу блокова како бисте одредили ширину и алате.

Наш Вертикални мени

Као што видите, вертикални ЦСС мени је једноставан за креирање. На основу знања, можете га учинити лијепим и атрактивним за посетиоце вашег онлине ресурса! Користите своју машту, а онда ће вам стилски мени украсити вашу веб локацију.