Gyönyörű design asztal - szkriptek honlapok
Fontolja meg, hogyan lehet szépen rendezni egy táblát CSS3. Hála az új választókat arra, hogy hozzon létre egy egyedi stílust anélkül, hogy extra jelölő osztályok.
Így fog kinézni a alapszerkezete táblázat:
Megvan minden olyan elemet, amely szükséges a táblázatba: fejlécet. szerv vagy lábléc.
Ebben a bemutató, akkor elkészíti az összehasonlító táblázatokat tarifák hosting. A példa lesz három különböző változatai asztaldísz. Alkalmazza az egyik vagy másik stílus is nagyon egyszerű, csak kell hozzá az asztalhoz tabla1 osztályban. 2. táblázat vagy Table3.
Style 1 - .table1
Az első táblázat lesz árnyalatú zöld gradiens leíró sejtek elmenty „én”.
Kezdjük az általános stílus az asztalra:
Szeretnénk a cellák között az asztal volt némi teret, ezért alkalmazzák az ingatlan border-collapse: külön;
A elemei „én” lesz sapka egy stílus:
A Firefox és Webkit böngésző szoktunk gradiens három színben. A border-radius zakrgulyaem bal felső és a jobb felső határ a sejteket.
Most az a része, „én”, amely üres:
A táblázat alján vagy lábléc iimet a következő stílus:
Csak adj egy árnyék a szöveg javítására.
Belső asztal sejtek halvány zöld háttérrel és fehér árnyék a szöveget:
Is hozzá egy kis sugarú, és a határ menti, csak 2px a sejtekhez. Ez létrehoz egy kis izzó hatást. Jól jönne box-shadow létrehozni egy hasonló hatást.
Most egy ikont az összes sejtek, amelyek a SPAN osztályú .Ellenőrizni. Ezt úgy érjük el, a mellett ez a stílus:
tartalom tulajdonság lehetővé teszi számunkra, hogy adjunk néhány tartalmi elem belsejében (ebben az esetben a kép). Azt is hozzá némi szöveget. Ebben az esetben tudjuk használni a pszeudo-osztályok vagy :: után :: előtt. a szöveget előtt vagy után a tartalmat.
Style 2 - .table2
A második táblázat egy kicsit elegáns. Fekete fejléc vagy lábléc. Ez a táblázat üres lesz sejtek közötti tér.
A felső és a táblázat alján (fejléc és lábléc) ugyanaz lesz a megjelenés, így határozza meg a közös stílus nekik:
th Element - leírás Lábjegyzet lesz a stílus:
Cell footer „és amelyre már létre a teljes sejt fejléc” és a stílus, akkor van egy másik ingatlan box-árnyék. Abban header árnyék esik ki az árnyékában a lábléc fog esni. És azt is, változtatni a színét a szöveg:
Térjünk vissza a Heder és rámutatunk arra, hogy ha a cella üres, akkor nem kell nem olyan stílusban, azaz rendelni a következő:
És az utolsó eleme a fejcellájára eltávolítja a megfelelő határ:
Az első cellája fejléc és az utolsó sejtek a test eltávolítja a határ:
Most adjuk hozzá stílusokat a sejtek egy leírást az asztal sejtek, azaz a belsejében a bal oldali oszlopban:
És ezek a stílusok a tábla sejtek a szervezetben:
És illessze be az ikont a span elem.
Style 3 - .table3
A döntő asztal ma, ahol a oszlopfejléceim lesz különböző színekben.
Az alap stílust a táblázat:
Az általános stílusa minden sejt th at héderben lenne:
Az üres cellák lesznek anélkül, hogy a háttér és a keret:
És most ki akar választani specifikus sejteket th at héderben és td sejtek a lábléc és mindegyiket egyedi megjelenés. Használja a választó: n-ed gyermek (szám):
Stílus minden sejt a lábléc lesz:
Add padding a sejteket:
Az az árakkal összhangban lesz egy nagyobb és merész:
oszlopában test lesz egy alternatív stílus, így fogjuk használni a választó újra: n-ed gyermek. de ezúttal az értékek páros és páratlan:
Adjuk hozzá a jobb szélét az utolsó td a sorban:
Leírás A bal oldalon van a stílus:
És hozzá az ikont:
Nos, ez mind a három lehetőség lebontották.
LETÖLTHETŐ Leap: 2112
13.57 Kb aki letöltött?