Hogyan készítsünk navigációs navigációt a CSS és a képek nélkül?

A weboldalakon történő navigáció egy lista egy formája, és a füles navigáció olyan, mint egy vízszintes lista. Könnyen létrehozható a horizontális navigáció a CSS-sel, de a CSS 3 még néhány eszközt kínál nekünk, hogy még szebbé tegyük őket.

Ez a bemutató átveszi Önt a CSS-lapkakészlet létrehozásához szükséges HTML és CSS-en. Kattints rá a linkre, hogy lássuk, hogyan néz ki.

Ez a lapozott menü használhatónincsenek képek, csak HTML és CSS2 és CSS3. Könnyen szerkeszthető, ha további lapokat szeretne hozzáadni, vagy megváltoztathatja a szöveget.

Böngésző támogatás

Ez a lap menü fog működniminden nagyobb böngésző. Az Internet Explorer nem fogja megjeleníteni a lekerekített sarkokat, de különben megjelenik a fülek, mint a Firefox, a Safari, az Opera és a Chrome.

Írja le a menülistáját

Minden navigációs menü és fülek valójában csak egy rendezetlen lista. Tehát az első dolog, amit meg akarsz csinálni, írj egy rendezetlen listát a linkekre, ahová a füles navigációt szeretnéd.

Ez a bemutató azt feltételezi, hogy a HTML-kódot szövegszerkesztőben írja, és tudja, hogy hova kell elhelyeznie a HTML-kódot a weboldalán.

Írd le a nem rendezett listáját így:

• class = "tablist">
  • CSS 3
  • id = "aktuális"> Fülek
  • mert
  • menük
  Észre fogod venni, hogy a kód két dolgot szólít fel: class = "tablist" és id = "aktuális". Az első az kívánt. Ha nem teszed a tablist osztály a rendezetlen listán, a fülek nem fognak működni. A második opcionális. Tedd a id = "aktuális" melyik lapon szeretné kiemelni az adott oldalon. Általában ezt használjuk arra, hogy kiemeljük az oldalat, amelyen vagyunk, de a legfontosabb lap kiemelésére használhatja. Vagy teljesen eltávolíthatja.

Indítsa el a stíluslap szerkesztését

Használhat külső stíluslapot vagy belső stíluslapot is. A minta menüoldal belső stíluslapot használ a a dokumentumot.

Először meg fogjuk állapítani az UL-t

Itt használjuk az osztályttablist a HTML-ben. Ahelyett, hogy megformálná az UL-címkét, amely az oldalán lévő összes rendezetlen listát állítaná össze, csak az UL-osztályt kell stílusosítania.tablist Tehát az első bejegyzés a CSS-ben:

.tablist {}

Szeretjük a lejáró gömbölyget (}} feltölteni, ezért nem szabad elfelejtenünk később.

Míg a fül menü listájának rendezetlen listatagját használjuk, de nem akarunk semmilyen golyót vagy számot kúszni. Tehát az első stílus, amelyet hozzá kell adni.list-style: none; Ez azt mondja a böngészőnek, hogy míg ez egy lista, ez egy olyan lista, amelyen nincs előre meghatározott stílus (pl. Szám vagy szám).

Ezután beállíthatja a listájának magasságát, hogy megfeleljen a kívánt mezőnek. 2em-t választottunk magasságunkra, mert ez kétszer akkora, mint a szabványos betűméret, és körülbelül fél em a fül szövege felett és alatt.magasság: 2em; De beállíthatja a szélességet bármilyen mérethez. Az UL címkék automatikusan a szélesség 100% -át fogják felvenni, ezért ha nem szeretné, hogy kisebb legyen az aktuális konténernél, akkor hagyja el a szélességet.

Végül, ha a mester stíluslapján nincsenek előbeállítások az UL és OL címkék számára, akkor be kívánja helyezni őket. Ez azt jelenti, hogy kikapcsolja a határokat, margókat és a kitöltést az UL-jén. padding: 0; margin: 0; határ: nincs; Ha már visszaállította az UL-címkét, akkor módosíthatja a margókat, a párnázottságot vagy a határokat oly módon, hogy megfeleljen a tervének.

Az utolsó .tablist osztálynak így kell kinéznie:

.tablist {list-style: none; magasság: 2em; padding: 0; margin: 0; határ: nincs; }

Az LI listaelemek szerkesztése

Miután megalkotta a rendezetlen listáját, meg kell határoznia a benne lévő LI címkéket. Ellenkező esetben normál listaként fognak működni, és minden lépés a következő sorhoz, anélkül, hogy a lapokat helyesen elhelyezné.

Először állítsa be a stílus tulajdonságát:

.tablist li {}

Aztán le akarod lefedni a lapjaidat úgy, hogy a vízszintes síkon álljanak. balra lebeg;

És ne felejtsd el, hogy adj hozzá egy kis különbséget a lapok között, így nem összefésülnek egymással. margin-right: 0.13em;

Az Ön stílusainak így kell kinéznie:

.tablist li {float: left; margin-right: 0.13em; }

A lapok kinézete a CSS 3-mal

A nehéz emelés nagy részét ebben a stíluslapban elvégezzük, a rendezetlen listán szereplő linkeket célozzuk meg. A böngészők felismerik, hogy a hivatkozások többet tartalmaznak a weboldalon, mint a többi címkék, így könnyebb a régebbi böngészők betartani olyan dolgokat, mint a lebegő állapotok, ha csatolja őket a horgonycímkéhez (linkekhez). Tehát először írja be a stílus tulajdonságait:

.tablist li a {} .tablist li a: ugrás {}

Mivel ezek a lapok úgy működnek, mint egy alkalmazás fülei, akkor a lap teljes területét kattinthatjuk, nem csak a hivatkozott szöveget. Ehhez az A címkét a normál "inline" állapotból át kell alakítani egy blokkelemnek. display: block; (Ha többet szeretne tudni a különbségről, olvassa el a Blokkszintű és az Inline Elemeket.)

Ezután egy egyszerű mód arra kényszeríteni a lapokat, hogy szimmetrikusak legyenek egymással, de még mindig rugalmasan illeszkednek a szöveg szélességéhez, hogy a jobb és a bal padding ugyanaz legyen. A párnázási gyorsító tulajdonságot a felső és az alsó értéket 0-ra, a jobbra és a balra 1em-re állítottuk be. párnázottság: 0 1em;

Azt is választottuk, hogy eltávolítsuk a linket, hogy a lapok kevésbé hasonlíthatók a linkekhez.De ha a közönség összetévesztheti, hagyja ki ezt a sort. link-decoration: none;

A lapok körüli vékony szegély elhelyezése miatt ezek úgy tűnnek, mint fülek. A határoló gyorsaságot használtuk, hogy a határt mind a négy oldal köré tesszük határ: 0.06em szilárd # 000; Ezután a szegély-alsó tulajdonságot használta, hogy eltávolítsa alulról. border-bottom: 0;

Ezután elvégeztünk néhány módosítást a fülek betűtípusának, színének és háttérszínének. Állítsa be ezeket a stílusokhoz, amelyek megfelelnek webhelyének. font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; background-color: #ccc;

A fenti stílusok mindegyikének a választóban kell lennie.tablist li a, hogy szabályozzák általában a horgonycímkéket. Ezután a fülek kikutathatóbb megjelenítéséhez hozzá kell adni néhány állami szabályt.tablist li a: lebeg.

Szeretnénk megváltoztatni a szöveg és a háttér színeit, hogy a fül felugrik, amikor egeret rajzol. háttér: # 3CF; szín: #fff;

És még egy emlékeztetőt is felhoztunk a böngészőkre, hogy a linket továbbra is aláhúzzuk. text-decoration: none; Egy másik gyakori módszer az aláhúzás visszaállítása, amikor az egérrel a lap fölé kattint. Ha ezt meg akarja tenni, változtassa meg text-dekoráció: kiemelik;

De Hol van a CSS 3?

Ha figyelmet szentel, valószínűleg észrevette, hogy a stíluslapban nem létezett CSS 3 stílus. Ennek az az előnye, hogy bármely modern böngészőben, például az Internet Explorerben dolgozik. De ez nem teszi a füleket úgy, mintha csak négyzetes dobozok lennének. CSS 3 stílusú hívás határ-sugár hozzáadásával (és ehhez társított böngésző-specifikus hívásokkal) a széleit lekerekítetté teheti, és jobban hasonlíthat a manila mappák füleire.

A stílusok, amelyeket hozzá kell adni a .tablist li a szabály: -webkit-border-top-right-sugár: 0.50em; -webkit-border-top-bal-sugár: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-balfelső: 0.50em; border-top-right-sugár: 0.50em; border-top-bal sugár: 0.50em;

Ezek a végleges stílusú szabályok, amelyeket írtunk:

.tablist li a {display: blokk; párnázottság: 0 1em; text-decoration: none; határ: 0.06em szilárd # 000; border-bottom: 0; font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; color: # 000; background-color: #ccc; / * CSS 3 elem * / webkit-border-top-right-radius: 0.50em; -webkit-border-top-bal-sugár: 0.50em; -moz-border-radius-topright: 0.50em; -moz-border-radius-balfelső: 0.50em; border-top-right-sugár: 0.50em; border-top-bal sugár: 0.50em; } .tablist li a: ugrás (háttér: # 3cf; szín: #fff; text-decoration: none; }

Ezekkel a stílusokkal van egy füles menü, amely minden nagyobb böngészőben működik, és jól néz ki, mint a CSS 3-kompatibilis böngészőkben jól nyomtatott fülek. A következő oldal még egy lehetőséget kínál, amelyet még jobban felöltözhet.

Jelölje ki az Aktuális fület

Az általunk létrehozott HTML-ben az UL egy listanevet tartalmaz egy azonosítóval. Ez lehetővé teszi, hogy egy LI egy másik stílust adjon a többitől. A legáltalánosabb helyzet az, hogy az aktuális fül valamilyen módon kiemelkedjen. Egy másik mód arra, hogy elgondolkodzunk, az, hogy szürkületet szeretne kihozni a nem élõ fülekbõl. Ezután megváltoztathatja, ahol a id a különböző oldalakon található.

Mind a #current A címkét, mind az #current A-t úgy állítjuk be, hogy mindkettő kissé eltérő. Megváltoztathatja az adott elem színét, háttérszínét, magasságát, szélességét és párnázását. Csinálj bármilyen változást a tervedben.

.tablist li # current a {háttérszín: # 777; szín: #fff; } .tablist li # current a: ugrás {háttér: # 39C; }

És kész vagy! Most hoztál létre egy lapozott menüt a webhelyedhez.