Съвет 1: Как да направите изскачащо меню
Съвет 1: Как да направите изскачащо меню
С помощта на компетентен HTML код и прости правила за CSS можете да създадете добър изскачащ прозорец меню, които могат лесно да бъдат променени и допълнени. Когато използвате инструментите за маркиране и каскадни стилови листове, можете да осигурите правилна работа меню във всички браузъри.
инструкция
1
Първо, изграждане на основната структура на вашия меню, Отворете текстов редактор и създайте номериран списък отдолуменю, който действа като елемент от списъка на родителите. Например:
Първият елемент Елемент за отпадане Падащ елемент2
2
Запазете създадения списък в отделен html файл. След това създайте файл с разширение Css и въведете всички параметри на стиловия лист.
3
Премахнете всички отстъпи и маркери, които се използват в неописания списък, и задайте ширината меню използвайки CSS инструменти: ul {style-style: none; width: 200px; }
4
Задайте относителната позиция на всички елементи от списъка, като използвате атрибута за положение: ul li {position: relative; }
5
Освен това е необходимо да се издаде подменю, всеки от чиито елементи ще се появи отдясно на родителя меню в момента, когато показалецът ще бъде в точката: li ul {position: absolute; left: 199px; top: 0; display: none; } Левият атрибут има стойност един пиксел по - малък от ширината на меню, Това ви позволява правилно да поставите изскачащите точки без да създавате двойни граници. Атрибутът на дисплея се използва за скриване наменю когато отворите страницата.
6
Задайте желаните стилове за връзки, като използвате подходящите опции за CSS. Включете параметъра на дисплея: блокирайте, така че всяка връзка да заема цялото разпределено пространство.
7
че меню се появи в момента, когато курсорът е над него (hover), трябва да въведете кода: li: hover ul {display: block; }
8
Посочете, ако желаете, допълнителни опции за показване на връзки и елементи от списъка.
9
изскачащ прозорец меню готов. Сега е необходимо да включите атрибута в .html файла: Изскачащ прозорец меню
Съвет 2: Как да направите изскачаща страница
Когато създавате сайтове, често се използватизскачащи прозорци като менюта, рекламни текстове и т.н. Освен това компактната форма ви позволява да спестите място на страницата. Всичко, от което се нуждаете, е да напишете правилния код.
инструкция
1
Създаването на изскачащи страници може да бъде направеновъз основа на javascript. Обаче има по-проста опция - използвайки HTML маркиращ език и CSS език. Удобството е, че прозорците, създадени по този начин, ще бъдат поддържани от повечето браузъри, независимо дали поддържат javascript.
2
Такъв код се поставя в два термина, в първияред съдържа линк, който е отговорен за отваряне на прозореца на втория ред - в действителност, изскачащ прозорец, поставяне на показалеца атрибут казва, че ще се отрази на стандарта, когато мишката върху линията свързва вида на курсора, за OnClick точките на факта, че когато кликнете скрит прозорец ще видим: <на поставяне на показалеца = "this.style.cursor =" указател "" onfocus = "this.blur ();" OnClick = "document.getElementById (" PopUp ") style.display =." блок ""> <педя стил = "текст-украса: подчертае;"> Кликнете тук </ педя> </a>!
3
Ще трябва да посочите размера на прозореца, цвета иразмера на текста, фона и рамката. Можете да посочите всички тези параметри в атрибута за стила. Цветът се обозначава с кодовата таблица rgb. Стандартна Paint инструмент в "смяна на цветовете" може да намери в кода на желания цвят, където R - червено, Г - зелен, B - синьо (циан). Така че черното е RGB код (0,0,0), бяло RGB (255,255,255), сив RGB (126,126,126) <DIV ИД = стил "PopUp" = "дисплей: няма; позиция :. Absolute; лява: 50px; върха: 50px; граница: плътно черно 1px; подложка: 10px; фон-цвят: RGB (255,255,225); текст-приравни: обоснове; размер на шрифта: 12px; ширина: 135px; "> публикувате или текст в изскачащ прозорец </ DIV> селектор дисплеят с посочената стойност на никой не прави прозореца ви невидим.
4
Сега трябва да поставите тези два реда между маркерите на вашата страница <body> и </ body>. След това изскачащият прозорец е готов за работа.
5
Въпреки това, с този комплект ще получите постоянствоотворен прозорец. Така че, ако трябва да затворите изскачащия прозорец, добавете връзката, която ще отговаря за това действие, преди маркера </ div>: <br /> <div style = "text-align: right; onmouseover = "this.style.cursor =" показалец "" style = "шрифт-размер: 12px;" onfocus = "this.blur ();" onclick = "document.getElementById (" PopUp ") style.display =" none ""> <span style = "text-decoration: underline"> close </ span>
6
Вероятно искате да направите изскачащ прозорецНе кликване, както е описано по-горе, и когато курсора. След първия ред трябва да бъде написано, както следва: <на поставяне на показалеца = "document.getElementById (" PopUp ") Style.display =." Блок "" onmouseout = "document.getElementById (" PopUp ") style.display =" никой "." onfocus = "this.blur ();"> <педя стил = "текст-украса: подчертае;"> с мишката си тук </ педя> </a>!
7
Така че HTML кодът на изскачащия прозорец е типолучен и запознат със структурата на изготвянето му. Всичко останало е да украсите външния вид и съдържанието, което естествено ще зависи от вашите умения, цел и въображение. Но трябва да помним, че това е най-простият вариант за създаване на изскачащ прозорец. Ако имате достатъчно умения за програмиране в javascript (MooTools, jQuery, Prototype и др.), Можете да създадете по-красива и интересна страница.
