Css tervezése szeszélyes listák - elrendezés

előző ◈ a következő

Azért nem regisztráljuk őket listákként, hogy nem szeretnénk látni egy jelzőt a menü minden linkje előtt. Az előző cikkben a CSS használatával beszéltem az oldalelrendezés egyes módszereiről. Az egyik ilyen technikában megtanultuk, hogyan nyomtassunk ki sorokat egy sorban, és ne függőlegesen.

Ebben a cikkben megmutatom neked, hogyan lehet megszégyeníteni ezeket a csúnya és könyörtelen listákat a CSS használatával. Ez elég ahhoz, hogy a weboldalain keresztül tévelyegjenek. Itt az ideje, hogy elmondja nekik, hogyan viselkedjenek.

Az aréna előkészítése

A képzés témaként egyszerű nem rendezett listákat választottam. Az itt említett összes CSS-szabály az azonos eredményű számozott listákra alkalmazható. A példákban (kivéve a kifejezetten meghatározott eseteket) az alábbi lista kerül felhasználásra:

Minden lista egyszerűen egy különálló elem belsejébe kerül

, és a lista viselkedését a DIV segítségével határozzák meg. Az összes DIV-re vonatkozó alapszabály:

További stílusszabályok nélkül az alapvető DIV-e listája így fog kinézni:

  • 1. pont
  • 2. tétel
  • 3. pont
  • 4. pont
  • Az 5. pont kicsit hosszabb ideig teszi ezt az elemet, így a következő sorra megy

helymeghatározás

A következő példában az UL elem baloldali bal és padding-left tulajdonságai 0:

  • 1. pont
  • 2. tétel
  • 3. pont
  • 4. pont
  • Az 5. pont kicsit hosszabb ideig teszi ezt az elemet, így a következő sorra megy

Vegye figyelembe, hogy a jelölők a DIV határán kívül esnek. Ha a tartály nem DIV, de dokumentum, a jelölők a böngészőablakon kívül maradnak, azaz eltűnt volna a szeme elől. Ha szeretné, hogy a markerek sorakoznak benne a DIV-határok mentén bal oldalon, meg vagyon bal padding vagy tulajdon bal margó értéke „1em”.

  • 1. pont
  • 2. tétel
  • 3. pont
  • 4. pont
  • Az 5. pont kicsit hosszabb ideig teszi ezt az elemet, így a következő sorra megy

Tegyük fel, hogy speciális jegyzékekkel kell rendelkezned. Hogyan csináltál korábban? Egy táblázatot hoztak létre, egy oszlopban egy marker gif-képét helyezték el, és jobbra és jobbra mozgatták a cellában. A másik oszlopban a szöveg lett elhelyezve, ami az elemek között szerepelt

  • . Most a CSS lehetővé teszi, hogy a képet jelzőként használja. Ha a böngésző nem támogatja ezt a CSS funkciót (vagy nem támogatja a rajz kimenetét), akkor az alapértelmezett jelölő (vagy az adott esetre megadott érték) kerül felhasználásra.

    A stílus szabály így néz ki:

    A böngésző így megmutatja a listát:

    • 1. pont
    • 2. tétel
    • 3. pont
    • 4. pont
    • Az 5. pont kicsit hosszabb ideig teszi ezt az elemet, így a következő sorra megy

    Azoknál a böngészőknél, amelyek nem támogatják a rajz kimenetét, adja hozzá a következő sort a szabályokhoz:

    A megjelölésként kiválasztott képek "kúszhatnak" a listából. Ennek elkerülése érdekében helyezze a képet a blokk belsejébe

  • . Ehhez adja hozzá a következő sort:

    Mindhárom kijelentés egyetlen rövid szabályba illeszthető:

    Az így kapott lista így fog kinézni:

    • 1. pont
    • 2. tétel
    • 3. pont
    • 4. pont
    • Az 5. pont kicsit hosszabb ideig teszi ezt az elemet, így a következő sorra megy

    Előfordul, hogy van egy listája, de nincsenek jelölők, vagy jelzőként más szimbólumot akarsz használni. A CSS ismét siet, hogy segítsen neked. Adja hozzá a szabálylista-stílusát: none; és készítsd el az elemeket

  • "Nadvisayuschimi". Az egész szabály így fog kinézni:

    Vagy az ingatlan bal padding. vagy a bal margó tulajdonságot 0-ra kell állítani, és a másik tulajdonságnak 1em-nek kell lennie. Ennek a tulajdonságnak a megváltoztatásával beállíthatja az ujjméret méretét a jelölőből az elfogadható értékre. A szöveges szöveget tartalmazó tulajdonság negatív értéke azt eredményezi, hogy a lista minden egyes elemének első sorai balra tolódnak, és a "többi" a szöveg többi részén.

    A következő lista normális lesz, például csak egy szabványos HML-szimbólumot használunk markerként. " amely megfelel a záró tipográfiai idézőjelnek: ".

    • »1. pont
    • »2. tétel
    • »3. pont
    • »4. pont
    • "Az 5. pont kicsit hosszabb ideig teszi ezt a pontot, így a következő sorra megy

    Meg kell jegyezni, hogy Netscape6 / 7 / Mozilla (és más származékai Gecko-böngészőt) és az Opera képes generálni tartalmi elem a pszeudo: mielőtt a szabványos CSS2. Mi ezt automatikusan generálja a szimbólum „, vagy más jellegű, mint a marker. Így nem kell kézzel beírja minden LI elem. Ha az Opera vagy a családdal böngészők, a Gecko, a következő CSS hoz létre a lista azonos és az előzőt, de nem kell semmit hozzáadnia a listához.

    A tartalom tulajdonsága szövegszöveghez, URL-hez vagy máshoz rendelhető, beleértve a speciális karaktereket is. Ha a típusszimbólumot választotta, meg kell adnia a karakter hexadecimális kódját. A megfelelő tipográfiai idézőjel a kód \ 00BB (a másik karakter \ 0020 az esztétikai okokból hozzáadott szóköz). A végeredmény az alábbiakban látható (lásd az Opera böngészőt vagy a Mozilla / Netscape programot):

    • 1. pont
    • 2. tétel
    • 3. pont
    • 4. pont
    • Az 5. pont kicsit hosszabb ideig teszi ezt az elemet, így a következő sorra megy

    Létrehozunk egy listát egy sorban

    Ki mondta, hogy a listáknak függőlegesen kell haladniuk, és a markereknek balra kell formálniuk? Például szükséged lesz a hivatkozások számozott listájára, de vizuálisan azt szeretné, hogy az oldal ezen listája úgy nézzen ki, mint egy függőleges navigációs sáv. Vagy azt mondja, hogy a linkeket vízszintesen kell elhelyezni az oldal felső szélén.

    Ez nem csak a referenciák listájára vonatkozik. Előfordulhat, hogy több bekezdést kell felsorolni egy bekezdésen belül (például könyvek listáját). Szerkezetileg - ez a lista, de előtte, ha ezt tetted, ez a lista megtöri a bekezdésedet. A CSS ismét jön a mentéshez!

    Mivel ez a lista nem jelenik meg az oldalon, mint valami különálló, a korábbi listákban nem teszem meg az alap DIV-ben. Ezúttal a jelölés így fog kinézni: bekezdés, lista, következő bekezdés.

    Már hallottam a sikolyokat: "Doodle, azt hittük, megtanít minket, hogyan tegyük a listákat egy bekezdésbe, nem két bekezdés között."

    És ezt én választ: „Igen, igazad van sajnos (X) HTML nem teszi lehetővé, hogy a lista egy bekezdés, de a stílus, akkor ezt ...”

    Először itt a stílus szabályai:

    Minden kód be van helyezve

    . Tartalmaz egy bekezdést, aztán a szabványos UL listát, majd egy másik bekezdést. Az UL listát úgy szerkesztettük, hogy minden tétel után vessző volt, és az utolsó pont után pont volt.

    Az eredmény így néz ki (a lista kiemelve kék színű):

    Néhány szöveg jelenik meg a lista előtt. Talán a kontextus egy olyan férfinak, aki felhívja a feleségét, hogy vegyen fel néhány dolgot otthonról a munkából. Nem számít, hogy a mi célunkra csak egy korábbi szövegre van szükségünk a lista előtt:

    • 1. pont,
    • 2. pont,
    • 3. pont,
    • 4. pont,
    • Az 5. pont kicsit hosszabb ideig teszi ezt az elemet, így a következő sorra megy.

    És ott van a szöveg, amely a bekezdésben szereplő listát követi. Egy vagy két mondat elegendő a példához.

    Mint a fenti példában egy jelölővel, automatikusan generálhatunk vesszőket és időszakokat a CSS használatával. Ha a látogatók csak az Opera és a Gecko böngészőket használják, nem kell aggódnia. A stílusszabályok így fognak kinézni:

    Itt használjuk a pseudo-elem: miután vesszőt követően lista elemeit, és a beállított egy class class = „utolsó”. Az eredmény ez lesz (ne felejtsd el, csak Opera vagy Mozilla / Netscape):

    Néhány szöveg jelenik meg a lista előtt. Talán a kontextus egy olyan férfinak, aki felhívja a feleségét, hogy vegyen fel néhány dolgot otthonról a munkából. Nem számít, hogy a mi célunkra csak egy korábbi szövegre van szükségünk a lista előtt:

    • 1. pont
    • 2. tétel
    • 3. pont
    • 4. pont
    • Az 5. pont kicsit hosszabb ideig teszi ezt az elemet, így a következő sorra megy

    És ott van a szöveg, amely a bekezdésben szereplő listát követi. Egy vagy két mondat elegendő a példához.

    Amint azt a linkek menü elején említettem, melyeket minden oldalon látunk, azokat listáknak kell összeállítaniuk, amelyek lényegében és lényegében. Mivel nem szeretnénk látni ezt a listát, ahogy a böngésző alapértelmezés szerint megjeleníti, a CSS használatával kozmetikai változtatásokat hajthatunk végre. Már tudjuk, hogy a listák speciálisan horizontálisan (egy sorban), és nem csak függőlegesen jelennek meg (alapértelmezés szerint). A stílusok markerek lehet távolítani, és a kezedben van egy széles körű lehetőségeket, hogy vizuálisan megkülönböztetni egy elemet egy másik listát.

    Íme néhány példa a vízszintes listákra, amelyeket ugyanabba a DIV bázisba helyezünk az alábbi szabályok szerint.

    Az alábbi két példa ugyanazt az UL-t használja, csak az utolsó bekezdés hosszú szövege nélkül. Hozzáadott egy további osztály is, amely lehetővé teszi, hogy külön dolgozhasson az egyik LI-ben a listában.

    A szimbólum | Gyakran használják a különböző választási lehetőségeket. Természetes, hogy a menüben használja. Ezt a szimbólumot LI határok segítségével szimuláljuk.

    Hozzáadtunk egy osztály osztályt "első" az első LI-hez, hogy nincs bal oldali felesleges határa.

    A szabályok megváltoztathatók a könyvjelzők listájának megadásához:

    Ebben a példában hozzáadtuk az class class = "here" értéket az LI valamelyikéhez, így a listaelem alsó szegélyének színe megegyezik a háttérrel. Így a menüben a felhasználó jelenlegi helyzetét jelöljük a webhelyen.

    Megjegyzés: ezt a technikát Randal Rust javasolta, majd a levelezőlisták előfizetői javították. Css-discuss

    Linkek-lánc

    Egy másik típusú linkek, amelyek általában vízszintesen helyezkednek el egy weboldalon, mindegyikünk számára ismert kenyérhúzás. Ezek a linkek világosan megmutatják, hogy hol helyezkednek el a webhely hierarchiájában - a főoldalról az aktuális szakaszra vagy oldalra. Ha igazán szeretné, hogy az oldal kódja szemantikailag helyes legyen, az ilyen típusú kapcsolatokat úgy kell kialakítani, mint egy sorba ágyazott listát, mivel minden egyes rész az előző szakasz része:

    • otthon
      • amp "termékek
        • amp "Számítógépek
          • amp "szoftvert

    az eredmény:

    Az alábbi szabályok alkalmazása:

    ezt kapjuk:

    Ismét a "" szimbólum (vagy bármely más megfelelő szimbólum) automatikusan létrehozható: a pszeudo-elem előtt az "első" osztály osztályával kombinálva. így az első LI pont nem rendelkezik ezzel a szimbólummal.

    A valóság világa

    Elemezzük a stíluslap szabályát szabály szerint, és megmagyarázom, miért van szükségük mindegyikre.

    Végül eljutottam a linkekhez. Az eredeti kivitelben 10 pixel volt bal és jobb oldalán. Ezek a határok megváltoztatták színüket a háttérrel együtt, miközben az egeret lebegették. Ez a viselkedés meglehetősen könnyű elérni az ál-osztály használatával: lebeg. így a szegély és a háttér színeinek módosítása hatással van az elemekre .

    Itt használtam egy trükket: a linkek viselkedését a teljes blokkra (szélességre és magasságra) kiterjesztve hozzárendeltem a kijelzőt: blokk, szabály. Ez minden böngészőben működött, kivéve az IE for Windows programot. Ha kifejezetten megadja a 100% -os szélességet, az IE for Windows mindent meg fog érteni. De ugyanakkor problémákat okoz az IE5 böngészőkben a Mac és a Netscape / Mozilla esetében. Így becsaptam: a gyermekválasztó ">" használatával a szélességet "automatikus" -ra állítottam. Mivel a Windows IE böngészője nem ismeri a gyermekszelektort, figyelmen kívül hagyja ezt a szabályt. Az IE5 Mac, az Opera és a Netscape / Mozilla megértette ezt a szabályt, és mindenki boldog volt.

    A pszeudosztályra vonatkozó szabály: a lebegés megváltoztatja a háttér és a szegélyek színét, amikor az egeret az összeköttetés felett lebeg.

    A jéghegy csúcsa

    Mark Newhouse (Mark Newhouse) vezeti a gnuhaus.com blogot. működik a noao.edu. és cikkeket ír a realworldstyle.com-ra.

    előző ◈ a következő