01/06
Hogyan készítsünk egy 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 füles menü nem tartalmaz képeket , csak a HTML-t, a CSS-2-t és a CSS-t. Ez 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ü minden nagyobb böngészőben fog működni. 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.
02. 06. sz
Í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 = "current"> Lapok
- mert
- menük
Észre fogod venni, hogy a kód két dolgot hív ki: class = "tab" és id = "current". Az első szükséges . Ha nem helyezi a tabulátorosztályt a rendezetlen listájára, a fülek nem fognak működni. A második opcionális. Adja meg az id = "aktuális" kifejezést mindegyik fülön, amelyre az adott oldalon ki szeretné emelni. Ezt általában arra használom, hogy kiemelje az oldalat, amelyen vagyok, de használhatod a legfontosabb lap kiemelésére. Vagy teljesen eltávolíthatja.
03/06
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
dokumentumban.Először meg fogjuk állapítani az UL-t
Itt használjuk az osztálylapot 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. tabulátor A CSS-ben az első bejegyzés a következő legyen:
.tablist {}Szeretem a lejáró gömbölyget (}} feltölteni), ezért nem szabad elfelejtenem 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álasztottam az én magasságomhoz, mert ez kétszer akkora, mint a szabványos betűméret, és kb. 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íluslapja nem rendelkezik az UL és OL címkékre vonatkozó előre beállított értékekkel, akkor be szeretné helyezni azokat. Ez azt jelenti, hogy le kell kapcsolnia 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; }04/06
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; }05/06
A lapok kinézete a CSS 3-mal
A nehéz felemelés legnagyobb részét ebben a stíluslapban a nem rendezett listán szereplő linkekre célozom. 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 rövidített tulajdonságot a felső és az alsó értéket 0-ra, a jobbra és a balra 1em-re állítottam. párnázottság: 0 1em;
Úgy döntöttem, hogy eltávolítom a hivatkozást, hogy a fülek kevésbé hasonlítanak 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. Használtam a határ gyorsbetűs ingatlanokat, hogy a határ mind a négy oldal körül legyen: 0.06em szilárd # 000; Ezután a szegély-alsó tulajdonságot használta az alsó rész eltávolításához. border-bottom: 0;
Ezután módosítottam a fülek betűtípusát, színét és háttérszínét. Á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;
Mindegyik fenti stílushoz a selector .tablist li a, a szabályt kell választani, hogy általában a horgonycímkéket befolyásolják. Ezután a fülek kikutathatóbb megjelenítéséhez hozzá kell adni néhány állami szabályt .tablist li a: hover.
Szeretem megváltoztatni a szöveg és a háttér színeit, hogy a fül elugorjon, amikor egérrel átmegy. háttér: # 3CF; szín: #fff;
És még egy emlékeztetőt is feltettem a böngészőkre, hogy a linket továbbra is aláhúzzam. 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-decoration: aláhúzással;
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 .tablist li szabályhoz hozzáadandó stílusok a következők: -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;
Ezek a végleges stílusú szabályok, amelyeket írtam:
.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.
06, 06
Jelölje ki az Aktuális fület
Az általam létrehozott HTML-ben az UL egy listaelemet 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ó.
Én mind a #current A tagot, mind a #current A-t úgy állíthatom be, hogy mindkettő kicsit más legyen. 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.