Jak vytvořit transparentní navigační panel webových stránek

Vytvořením navigačního panelu určitým způsobem můžete posílit značku a design pro vaše podnikání. Pomocí kombinace kódu HTML a CSS (kaskádový stylový list), který diktuje vzhled navigačního panelu, můžete na svém webu vytvořit konzistentní vzhled. Pokud se rozhodnete, že navigační lišta bude transparentní, znamená to, že bude mít stejnou barvu jako pozadí nebo pozadí prvku, který jej obsahuje.

1.

Vytvořte sekci HTML pro navigační panel. V souboru HTML stránky, se kterou pracujete, vyhledejte sekci, do které chcete přidat navigační panel. Použijte prvek, který ho obsahuje:

Mezi značkami pro otevírání a zavírání můžete umístit navigační odkazy.

2.

Pro každou navigační linku, kterou potřebujete, vložte kotevní prvek. Uvnitř prvku "nav" přidejte prvek kotevního prvku pro každý odkaz, který chcete uživatelům procházet. Následuje ukázkový kotevní prvek odkazující na část webu:

O

To odkazuje na část webu, která se nachází ve složce s názvem "about", která je ve stejném adresáři jako stránka, v níž se tento kód zobrazuje. Chcete-li odkazovat na stránku spíše než na složku, značka by se měla zobrazit jako HTML :

O

3.

Přidejte do stránky stránku stylu. Chcete-li stylovat navigační panel, potřebujete sekci pro kód CSS. V hlavičkové části vaší stránky přidejte před závěrečnou značku následující:

Uvnitř můžete přidávat deklarace ke stylování prvků na vaší stránce.

4.

Styčte kotvy. V sekci CSS stránky přidejte deklarace ke stylu kotvy na navigačním panelu. Například pro stylování všech prvků kotvy uvnitř s "nav" jako jeho ID atribut, můžete použít následující voliče:

nav a: odkaz, #nav a: navštívil, #nav a: hover {

/ deklarace stylu /

}}

Označuje kotvy ve všech stavech. V této sekci můžete přidat jakákoli prohlášení o stylu, která chcete uplatnit, například:

textová výzdoba: žádná; šířka: 100px; zobrazení: blok; plavat vlevo;

Jedná se o standardní vlastnosti pro zobrazení kotvy vedle sebe na vodorovné čáře. Chcete-li stylovat samotný prvek, použijte následující syntaxi:

nav {

šířka: 800px; }}

5.

Styl pozadí. Pokud do navigačního panelu v CSS nepoužíváte vlastnost pozadí, zobrazí se ve výchozím nastavení s transparentním pozadím. Může se však zobrazit za pozadí stránky nebo jiného prvku obsahujícího. Například následující deklarace CSS prvku tělesa způsobí, že se obrázek pozadí zobrazí za navigační čárou:

tělo {background-image: url ("bgpic.jpg"); }}

Pokud nezadáte obrázek nebo barvu pozadí navigačního panelu, měl by se zobrazit s průhledným pozadím.

Tip

  • Se vznikajícím vývojem v CSS3 můžete ve svých stránkách používat opacitu i průhlednost.

Varování

  • I když v navigačních lištách nenaznačujete vlastnost pozadí v CSS, jiný kód CSS může určit jeden, například pozadí všech prvků na stránce.
 

Zanechte Svůj Komentář