Html lista vízszintes vagy a vízszintes menü segítségével css
Üdvözlet, kedves olvasók webcodius blog! Kötelező eleme szinte minden honlap a menüben. Ezért, ha a webhely több mint egy oldal, akkor valószínűleg nem tud anélkül, hogy a navigációs menü. Végtére is, anélkül, hogy a felhasználói menü nehéz lesz megtalálni a megfelelő oldalak neki.
Mivel minden menüt lista a linkek, melyek a belső oldalakon az oldalon. általában használ felsorolások létrehozására menüket. amelyek segítségével létrehozott html tag
- és
- . De mint tudjuk az elemek a lista alapértelmezés függőlegesen egymás fölött, és ha kell, hogy egy vízszintes menü. A CSS nem egy nagy probléma.
Először hozzon létre egy szabályos, felsorolás, elemeket tartalmazó étlapunkról:
Annak érdekében, hogy azonosítsa a listán, és kérjen tőle a szükséges css stílusokat, én hozzá egy id attribútumot egy „menü” azonosítót.
Alapértelmezésben nélkül CSS szabályokat, ő lesz a következő:
Mint látható, a lista elemeinek sorakoznak függőlegesen egymás alatt, és ha szükségünk van egy függőleges menü ha szükséges, hivatkozásokat stílus (add háttérszín, határok, margók, módosíthatja a betűtípust) lehet vonzó navigációs sáv.
Ha azt szeretnénk, hogy egy vízszintes menü, akkor csak meg kell, hogy gondoskodjon elemek a vízszintes listán. Ebből a célból, LI választó kell hozzá stilisztikai display tulajdonság értéke inline vagy inline-block. Fogom használni szabály display: inline-block. Így annak érdekében, hogy felsorolni tételek sorakoznak vízszintesen egyszerűen vegye fel a CSS kód:
Most a lista elemei vízszintes:
Mint látható, a menüpontok sorakoznak egy vízszintes sorban. De míg a menü nem tűnik nagyon. Most, hogy egy teljes értékű navigációs sáv, gondoskodjon menük segítségével css stílusokat. Először adjon hozzá egy hátteret a panel linkeket, hogy nyúlik a lényeg
li, távolítsa el a aláhúzás linkek létrehozott margók stb.:Hogy lesz egy ilyen vonzó menü:
Általános megjelenése az alábbi menüben csak attól függ, a képzelet és jellemzőinek ismerete css. Továbbmenve, például, itt van egy pár lehetőség a menüben.
Vízszintes középre menü
Ismerje meg, hogyan hozhat létre professzionális motor PHP és MySQL
Igazítsa a központ a menü, akkor:
Vízszintes menü tételei azonos szélességű
Ismerje meg, hogyan hozhat létre professzionális motor PHP és MySQL
Ahhoz, hogy az összes elemet az azonos méretű menüben adja meg a kívánt méretet a számukra. Csak a lényeg, hogy az összeg a tételek nem haladja meg a mérete a teljes panel. Ezt megteheti:
Ha hozzá egy kis átalakítás:
A menü lesz lesarkított sarkok: