Tip 1: Jak vytvořit vyskakovací nabídku
Tip 1: Jak vytvořit vyskakovací nabídku
Pomocí kompetentního kódu HTML a jednoduchých pravidel CSS můžete vytvořit dobré vyskakovací okno menu, které lze snadno změnit a doplnit. Při použití nástrojů značkovacího jazyka a kaskádových stylových listů můžete zajistit správnou funkci menu ve všech prohlížečích.
Pokyny
1
Nejprve vytvořte základní strukturu svého menu. Otevřete textový editor a vytvořte číslovaný seznam podmenu, který funguje jako prvek nadřazeného seznamu. Například:
První prvek Rozbalovací prvek Rozbalovací prvek2
2
Uložený seznam uložte do samostatného html souboru. Dále vytvořte soubor s příponou Css a zadejte všechny parametry stylu.
3
Odstraňte všechny odrážky a značky, které se používají v seznamu bez čísel a nastavte šířku menu pomocí nástrojů CSS: ul {list-style: none; width: 200px; }}
4
Nastavte relativní pozici všech prvků seznamu pomocí atributu pozice: ul li {position: relative; }}
5
Dále je třeba vydávat podmenu, každý z jeho prvků se objeví napravo od rodiče menu v okamžiku, kdy bude ukazatel v bodě: li ul {pozice: absolutní; vlevo: 199px; horní: 0; zobrazení: žádné; } Levý atribut má hodnotu o jeden pixel menší než je šířka menu. To vám umožní správně umístit body vyskakovacích oken bez vytvoření dvojitých okrajů. Atribut zobrazení se používá k skrytímenu při otevření stránky.
6
Nastavte požadované styly pro odkazy pomocí příslušných možností css. Zahrňte parametr zobrazení: blokujte tak, aby každý odkaz zaujal veškerý přidělený prostor.
7
Chcete-li menu se objevil v okamžiku, kdy je kurzor nad ním (hover), musíte zadat kód: li: hover ul {display: block; }}
8
V případě potřeby zadejte další možnosti pro zobrazení odkazů a položek seznamu.
9
Pop-up menu připraven. Nyní je nutné zahrnout atribut do souboru .html: Pop-up menu
Tip 2: Jak vytvořit vyskakovací stránku
Při vytváření stránek se často používajívyskakovací okna jako nabídky, reklamní texty atd. Kompaktní formulář navíc umožňuje ušetřit místo na stránce. Vše, co potřebujete, je napsat správný kód.
Pokyny
1
Vytváření vyskakovacích stránek lze provéstzaložené na javascribu. Existuje však jednodušší možnost - pomocí jazyka HTML pro značkování a jazyka CSS. Pohodlí je, že takto vytvořená okna budou podporována většinou prohlížečů, bez ohledu na to, zda podporují javascript.
2
Tento kód je umístěn ve dvou termínech, v prvnímřádek obsahuje odkaz, který je odpovědný za otevření okna, druhý řádek - ve skutečnosti, pop-up okno, onmouseover atribut říká, že bude mít vliv na standard, když najedete na linii spojuje typ kurzoru, OnClick body k tomu, že po klepnutí na skryté okno bude viditelné: <a onmouseover = "this.style.cursor =" ukazatel "" onfocus = "this.blur ();" onclick = "document.getElementById (" PopUp ") style.display =." block ""> <span style = "text-decoration: zdůraznit;"> Klikněte zde </ span> </a>!
3
Budete potřebovat určit velikost okna, barvu avelikost textu, pozadí a rámeček. V atributu styl můžete zadat všechny tyto parametry. Barvy specifikované code tablitse RGB. Základní barevné nástrojem v „Změna barvy“ v najít kód požadovaného odstínu, kde R - červená, G - zelená, B - modrá (cyan). Takže černá je rgb kód (0,0,0), bílá rgb (255,255,255), šedá rgb (126126126) <div id = "PopUp" style = „display: none; pozice :. Absolute; left: 50 pixelů; top: 50 pixelů; border: sytě černý 1px; padding: 10px; background-color: rgb (255255225), text-align: ospravedlnit; font-size: 12px; šířka: 135px; „> Post nebo textu ve vyskakovacím okně </ div> voliče displej s určenou hodnotou nikdo je vaše okno neviditelné.
4
Nyní je třeba umístit tyto dva řádky mezi značky <body> a </ body>. Potom je vyskakovací okno připraveno pracovat.
5
S touto sadou však budete trvale přijímatotevřít okno. Pokud chcete zavřít vyskakovací okno, přidejte odkaz, který bude zodpovědný za tuto akci, před značkou </ div>: <br /> <div style = "text-align: right;"> onmouseover = "this.style.cursor =" ukazatel "" style = "velikost písma: 12px;" onfocus = "this.blur ();" onclick = "document.getElementById (" PopUp ") styl.display =" none ""> <span style = "text-decoration: underline"> close </ span>
6
Pravděpodobně chcete vytvořit vyskakovací oknoNení cvaknutí, jak bylo popsáno výše, a když se kurzor. Pak se první řada by měla být zapsána následovně: <a onmouseover = "document.getElementById (" bublinkové ") Style.display =." Blok "" onmouseout = "document.getElementById (" bublinkové ") style.display =" none "". onfocus = "this.blur ();"> <span style = "text-decoration: zdůraznit;"> najetí zde </ span> </a>!
7
Takže HTML kód vyskakovacího okna jste vyobdržel a seznámil se s jeho strukturou. Zbývá jen zdobit vzhled a obsah, který samozřejmě bude záviset na vašich schopnostech, účelu a představivosti. Ale musíme si uvědomit, že toto je nejjednodušší volba pro vytváření vyskakovacího okna. Pokud máte dostatek programovacích dovedností v javascriptu (MooTools, jQuery, Prototype atd.), Můžete vytvořit krásnější a zajímavější stránku.
