Érdekes vonalak megjelenése a HR-címkékkel ellátott weboldalakon
Ha vízszintes, elválasztó-stílusú vonalakat kell felvennie a webhelyeire, akkor van néhány lehetősége. Az említett sorok aktuális képfájljait az oldalához hozzáadhatja, de ehhez a böngészőnek szüksége lehet a fájlok letöltésére és betöltésére, ami negatív hatással lehet a webhely teljesítményére.
Használhatja a CSS határoló tulajdonságot olyan szegélyek hozzáadásához, amelyek vonalaként működnek, akár az elem tetején vagy alján, hatékonyan létrehozva az elválasztó vonalat.
Végül használhatja a HTML elemet a vízszintes szabály - a
A vízszintes szabályelem
Ha valaha is feltöltött egy elemet egy weboldalon, akkor valószínűleg felfedezte, hogy az ilyen sorok megjelenítésének alapértelmezett módja nem ideális. Ez azt jelenti, hogy a CSS-hez kell kapcsolódnia ahhoz, hogy beállíthassa az elemek vizuális megjelenését ahhoz, hogy összhangban legyen a webhely megjelenésének módjával.
Egy alap HR címke megjelenik a böngésző megjelenítéséhez. A modern böngészők jellemzően 100% szélességű, 2px magasságú, és fekete vonalú 3D szegélyt mutatnak a vonal létrehozásához.
Íme egy példa egy szabványos HR elemre, vagy ebben a képben láthatjuk, hogyan néz ki egy szokatlan HR a modern böngészőkben.
A szélesség és a magasság konzisztens a böngészők között
Az egyetlen olyan stílus, amely az internetes böngészők között konzisztens, a szélesség és a stílusok. Ezek meghatározzák, mekkora lesz a vonal. Ha nem határozza meg a szélességet és a magasságot, az alapértelmezett szélesség 100%, az alapértelmezett magasság pedig 2px.
Ebben a példában a szélesség 50% -a a szülőelemnek (vegye figyelembe, hogy ezek az alábbi példák magukban foglalják az inline stílusokat.) Egy termelési környezetben ezeket a stílusokat egy külső stíluslapban írják le, így könnyebben kezelhetők az összes oldalán:
style = "szélesség: 50%;">
És ebben a példában a magasság 2em:
style = "height: 2em;">
A határok megváltoztatása kihívást jelenthet
A modern böngészőkben a böngésző a határ beállításával állítja fel a vonalat. Tehát ha eltávolítja a határt a stílus tulajdonságával, a sor eltűnik az oldalon. Amint láthatja (nos, nem látsz semmit, mivel a vonalak láthatatlanok lesznek) ebben a példában:
style = "border: none;">
A szegély méretének, színének és stílusának módosításával a vonal másképp néz ki, és ugyanolyan hatást gyakorol minden modern böngészőben. Például ebben a bemutatóban a határ piros, szaggatott és 1px széles:
style = "border: 1px szaggatott # 000;">
De ha módosítja a határt és a magasságot, a stílusok kissé eltérnek a nagyon elavult böngészőkben, mint a modern böngészőkben. Ahogyan ez a példában látható, ha az IE7-ben és az alatt (böngésző, amely szomorúan elavult és már nem támogatja a Microsoft böngészőjét), megjelenik egy bontott belső vonal, amely nem jelenik meg a többi böngészőben (beleértve az IE8-at és az előzőeket is) :
style = "magasság: 1.5em; szélesség: 25em; határ: 1px szilárd # 000;">
Ezek a régimódi böngészők valóban nem jelentenek komoly aggodalmat a webes tervezésben, mivel nagyrészt korszerűbb lehetőségeket váltottak fel.
Készítsen egy dekoratív vonalat háttérképgel
A szín helyett egy háttérképet definiálhat a HR számára, hogy pontosan úgy nézzen ki, ahogy akarja, de szemantikailag is megjeleníti a jelölést.
Ebben a példában egy három hullámvonalú képet használtunk. Ha a háttérképet nem ismétléssel állítja be, akkor szünetet hoz létre a tartalomban, amely majdnem olyan, mint a könyvekben:
style = "magasság: 20px; háttér: #fff url (aa010307.gif) no-repeat scroll center; border: none;">
HR Elemek átalakítása
A CSS3 segítségével még vonzóbbá teheti a vonalakat. A HR elem hagyományosan egy vízszintes vonal, de a CSS-transzformációs tulajdonsággal megváltoztathatja a megjelenésüket. A HR elem kedvenc átalakítása a forgatás megváltoztatása.
A HR elemet elforgathatja, így kissé átlós:
hr {
-moz-transzformáció: forgatás (10deg);
-webkit-transzformáció: forgatás (10deg);
-o-transzformáció: forgatás (10deg);
-ms-transzformáció: forgatás (10deg);
transzformáció: forgatás (10deg);
}
Vagy forgathatja azt úgy, hogy teljesen függőleges legyen:
hr {
-moz-transzformáció: forgatás (90deg);
-webkit-transzformáció: forgatás (90deg);
-o-transzformáció: forgatás (90deg);
-ms-transzformáció: rotáció (90deg);
transzformáció: forgatás (90deg);
}
Ne felejtse el, hogy a dokumentumban a jelenlegi pozíciója alapján forgatja el a HR-t, ezért szükség lehet arra, hogy módosítsa a pozícionálást ott, ahol azt szeretné. Ezt nem javasoljuk függőleges vonalak hozzárendeléséhez a tervezéshez, de érdekes hatás elérése érdekében.
Egy másik módja annak, hogy vonalakat kapj az oldaladon
Az egyik dolog, hogy néhány ember a HR elem használata helyett más elemek határait használja. De néha a HR sokkal kényelmesebb és könnyebben használható, mint a határok felállítása. Bizonyos böngészők dobozmodell-kérdései még finomabbak lehetnek a határ beállításához.