A szerzőtől:Üdvözöllek. Az, hogy egy weboldalon több blokkot egy sorban kell bemutatni, nagyon gyakori feladat, amellyel az elrendezéstervezők szembesülnek. Szinte minden sablon elhelyezésekor előfordul, így mindannyiunknak ismernünk és alkalmazni kell a blokkok viselkedésének megváltoztatásának alapvető módjait.
Mielőtt a leggyakoribb trükköket megnéznénk, felidéznék egy kis elméletet. A weboldal elemei blokk és soron belüli elemekre vannak osztva. És a különbség köztük nagyon egyszerű - a kisbetűk egy sorban helyezkedhetnek el, de a blokkok nem. Természetesen a különbségek nem érnek véget, de ez a fő különbség. A blokkok tetején és alján már lehet behúzás (a soron belülieknél nincs), és több tulajdonság is alkalmazható rájuk.
A blokkok sorba rendezésének alapvető módjai css-ben
Nem bonyolítunk semmit, 3 fő módja van:
Blokkok konvertálása soron belüli elemekké. Ebben az esetben a blokk tulajdonságai elvesznek, ezért ezt az opciót szinte soha nem használják.
Készítse el a kívánt elemeket block-inline. Ez egy speciális típus, amelyben az elem megőrzi tulajdonságait, ugyanakkor lehetővé teszi más blokkok elhelyezését a közelben.
Az elemek lebegtetése a float tulajdonság segítségével.
Nézzük meg ezeket a lehetőségeket. Flexbox, táblázatos megjelenítés és egyéb szempontok nem kerülnek figyelembevételre. Tehát tegyük fel, hogy van 3 alcímünk.
1. címsor
2. címsor
3. címsor
Természetesen minden css tulajdonságot külön fájlba (style.css) kell írni, amelyet a html dokumentumhoz kell kötni. Ebben a fájlban egy minimális stílust írok, hogy az alcímeink egyszerűen láthatóak legyenek.
h3( háttér: #EEDDCD; )
h3 ( háttér : #EEDDCD; |
Itt vannak az oldalon:
Ott úgy viselkednek, mint a blokkok. Mindegyik a saját vonalán helyezkedik el, köztük vannak behúzások. Ha szeretné, beállíthat bármilyen belső behúzást, és általában bármit megtehet.
Konvertáljuk karakterláncokká, és azonnal adjunk hozzá behúzásokat. Ehhez a h3 választónak hozzá kell adnia a következő tulajdonságokat:
kijelző: inline; kitöltés: 30 képpont
Ennek a technikának a használatakor 2 fő probléma merül fel. Az első a minimális eltolás. Ez annak köszönhető, hogy a kódban a blokkok között van egy szóköz, amely ezt a behúzást képezi. Ha ezt a problémát orvosolni kell, két fő lehetőség van:
A html-ben a szükséges blokkok kódját szóközök nélkül egy sorba helyezzük
Tegyen le egy negatív margót a jobb oldali -4 pixelre. Ennyi ideig tart egy hely.
A második probléma az, hogy különböző magasságú elemek esetén megjelenítési problémák léphetnek fel. Általában a lebegő blokkok a legjobb megoldás. A display: inline-block helyett ezt írjuk:
Egy sorban blokkolja a keretrendszert
Azonnal meg kell mondanom, hogy ha bármilyen normál css keretrendszert (például Bootstrap) fog használni, akkor ott még mindig sokkal könnyebb. Minden css-kód, amely az elemek elrendezéséért felelős, már meg van írva, és csak a megfelelő osztályokat kell beállítania. Ehhez elég megtanulni a grid rendszert, és már különösebb nehézség nélkül készíthetünk több oszlopos reszponzív sablonokat. Legalább sokkal könnyebb lesz, mint a css-t a semmiből írni.
Egy másik probléma a nulláról való kódírással éppen akkor merül fel, amikor reszponzív tervezésre van szükség. Természetesen saját maga is megvalósíthatja a médialekérdezések birtokában, de sokkal nehezebb lesz, ha összetett sablonja van.
Például, amikor 4 oszlopra van szükség nagy képernyőkön, 3-ra a közepes képernyőkön és 2-re a mobiltelefonokon. Ha olyan keretrendszert használunk, mint a Bootstrap, vagy inkább a rácsát, ez szó szerint néhány perc kérdése.
Simán áthelyezve a témát a Bootstrap keretrendszerbe, még egyszer megjegyzem, hogy ha egy összetett adaptív sablon elrendezésével kell szembenéznie, akkor egyszerűen bűn nem használni a rácsot. Ehhez nem is szükséges a keretrendszer teljes verziójának csatlakoztatása - testreszabhatja, és csak azt állíthatja le, amire valóban szüksége van.
Megtanulhatja, hogyan kell dolgozni a keretrendszerrel a segítségével. Ott elmagyarázzák az elméletet, de a legfontosabb a gyakorlat. 3 adaptív sablont készít, és nagyszerű élményben lesz része, amely lehetővé teszi, hogy megrendelésre vagy saját magának készítsen weboldalakat. Ha pedig ingyenesen szeretne megismerkedni a keretrendszer előnyeivel és funkcióival, javaslom, hogy tekintse meg cikksorozatunkat a Bootstrapről, valamint az egyszerű elrendezésről. Sok sikert kívánok az elrendezéshez és általában az oldalépítéshez.
Feladat
Készítsen egy vízszintes vonalat az oldalon.
Megoldás
A vízszintes sorok alkalmasak az egyik szövegblokk elválasztására a másiktól. A vízszintes vonalakkal ellátott kis szövegek felül és alatt jobban felkeltik az olvasó figyelmét, mint a normál szöveg.
Címkével
vízszintes vonalat húzhatunk, amelynek megjelenése a használt attribútumoktól, valamint a böngészőtől függ. A címke blokkelemekre vonatkozik, így a sor mindig új sorban kezdődik, és utána az összes elem a következő sorban jelenik meg. Sok címke attribútummal
az ezen a címkén keresztül létrehozott vonal könnyen kezelhető. Ha a stílusok erejét is összekapcsolja, akkor egy sor hozzáadása a dokumentumhoz egyszerű feladattá válik.
Alapértelmezett vonal
szürkén és hangerő-effektussal jelenik meg. Ez a fajta vonal nem mindig illeszkedik az oldal kialakításához, így érthető a fejlesztők vágya, hogy stílusokon keresztül módosítsák a vonal színét és egyéb paramétereit. A böngészők azonban kétértelműen közelítik meg ezt a problémát, ezért egyszerre több stílustulajdonságot kell használnia. Különösen az Internet Explorer régebbi verziói használják a color tulajdonságot a vonalszínhez, míg más böngészők a háttérszínt. De ez még nem minden, ügyeljen arra, hogy nullától eltérő vonalvastagságot (height property) adjon meg, és távolítsa el a keretet a vonal körül úgy, hogy a border tulajdonságot none értékre állítja. Az összes tulajdonságot összegyűjtve a hr választóhoz, egy univerzális megoldást kapunk a népszerű böngészőkhöz (1. példa).
Példa 1. Vízszintes vonal
HTML5 CSS 2.1 IE Cr Op Sa Fx
Szövegkarakterlánc
Ennek a példának az eredménye az ábrán látható. 1.
Rizs. 1. Színes vízszintes vonal
Sziasztok! Ma elmondom, hogyan készítsünk vízszintes vonalat html segítségével.
Valójában elég gyakran felmerül a vízszintes vonal létrehozásának szükségessége, például amikor el kell választani a szöveg egyik részét a másiktól.
vízszintes és függőleges vonalak css-vel
Ezt css-el megteheted. Ehhez a div tag segítségével blokkba zárom a szükséges szövegrészt, majd a style.css fájlban vagy közvetlenül a html kódban a border-top segítségével a felső vagy az alsó szegélyre írunk elő tulajdonságokat ehhez a blokkhoz. és szegély-alsó. Íme egy példa:
Ebben az esetben css-sel stílusoztam közvetlenül a html kódból, és a felső szegélyt folytonos vonallal, az alsó szegélyt pedig pontozott vonallal alakítottam ki.
Így fog kinézni az oldalon:
Vízszintes vonal css-vel.
Ennek a módszernek megvannak a maga előnyei:
- A beállítások széles választéka, amelyek lehetővé teszik szinte bármilyen típusú vonal beállítását;
- Létrehozhat vízszintes és függőleges vonalakat is. Függőleges vonalak készítéséhez a szegélyt felül szegély-balra és a szegély-alulról szegély-jobbra kell változtatni.
A hátrányok közé tartozik a kód viszonylagos terjedelmessége.
Azonban, mint kiderült, html segítségével vízszintes sort is beszúrhatunk a szövegbe. Ugyanakkor nem is kell css-be mászni. A címkét erre használják.
.
vízszintes vonal html címkével
Ennek a címkének az első jellemzője, hogy nincs páros végcímkéje. Bárhol használható a html kódban a címkék között
És.
Ez a címke a következő attribútumokkal rendelkezik:
- Szélesség- meghatározza a vízszintes vonalunk hosszát pixelben vagy százalékban;
- szín– meghatározza a vonal színét;
- Igazítsa– beállítja a vonal igazítását a jobb szélre - jobbra, a bal szélre - balra, a középre - a középre;
- méret– vonalvastagság pixelben.
Itt van egy példa html kódra.
vízszintes vonalak párosítatlan (nem szükséges záró címke) címke alkotja
és egészen egyedi dizájnelemek lehetnek. A vízszintes HTML-sorokkal ellátott szövegelrendezés bizonyos logikát ad az oldalnak a szövegmegjelenítéshez, valamint megkönnyíti az olvasó számára, hogy kiemelje azokat az információblokkokat, amelyeket sorban kell tanulmányoznia. Címke
különböző színű, vastagságú és hosszúságú vízszintes vonalakat képezhet. És ez meglehetősen egyszerű, amint az az alábbi példákban látható.
Egyébként a blokk stílus tulajdonságait is használhatod A függőleges vonalak valójában ugyanazokban a blokkokban vannak kialakítva Íme egy példa egy piros függőleges vonalra a bal oldalon. Íme egy példa egy piros függőleges vonalra a jobb oldalon. Íme egy példa egy piros vízszintes vonalra a tetején. Íme egy példa egy piros vízszintes vonalra az alján. Íme egy példa a vízszintes és függőleges vonalakra. figyelje meg a stílus attribútumot Címke által generált kör Íme egy példa egy piros függőleges vonalra a bal oldalon. Íme egy példa egy piros függőleges vonalra a jobb oldalon. Íme egy példa egy piros vízszintes vonalra az alján. Íme egy példa a vízszintes és függőleges vonalakra. És ha ezeket a példákat elemezzük, akkor egy meglehetősen egyszerű következtetést vonhatunk le, hogy a függőleges vonalakat a legjobban a használatával lehet kialakítani, és a közbenső vonal opciókat a címke Alapvetően vízszintes vonalak díszítik a webhely HTML-oldalait, vonzóbb megjelenést kölcsönözve nekik. De vizuálisan is behatárolhatják a szomszédos szakaszok információit, kényelmesebbé téve az olvasókat a tanulmányozás során. Általában húzzon vízszintes vonalakat, ahol kell, ennyi. Van egy speciális címke vízszintes vonalak rajzolására a HTML-ben. Példa vízszintes vonalak rajzolására HTML-ben
Bekezdés. Bekezdés. Bekezdés. Eredmény a böngészőben Bekezdés. Bekezdés. Bekezdés. Amint látja, a vonalak nagyon vékonyak, nem leírhatóak és a rendelkezésre álló teljes szélességre húzódnak, ezért most megtanuljuk, hogyan változtassuk meg őket, hogy vonzóbbá tegyék őket. A HTML régebbi verzióiban a címke Egy szín megadható az angol nevével vagy a szín HEX kódjával, amelyet egy font jel (#) előz meg. Nos, már a leckétől fogva tudsz róla módosítsa a szöveg és a háttér színét. De beszéljünk az átméretezésről részletesebben. Ahogy emlékszel oktatóanyag a betűtípusok megváltoztatásához, körülbelül tíz egység van a CSS-ben, de vonalvastagság csak pixelben (px) és százalékban (%) adható meg, és vastagságáltalában csak pixelben. Ha más mértékegységeket ad meg, akkor ez nem hiba, hanem a böngészők egyszerűen figyelmen kívül hagyják őket. Ha a méreteket pixelben adja meg, akkor a vonal vastagsága és szélessége annak a monitornak a felbontásától függ, amelyen a webhelyet nézi (minél nagyobb a képernyő felbontása, annál vékonyabb és keskenyebb a vonal). Mint mondtam, csak a vonalszélesség adható meg százalékban. A százalékos méretek mindig a szülő elem-tároló méretétől függenek, és ennek alapján számítják ki, amelyben a címke található. Példa a vízszintes vonalak színének, vastagságának és szélességének megváltoztatására.
Eredmény a böngészőben Ha módosítja egy vízszintes vonal szélességét, jól látható, hogy a böngészők mindig középre állítják. Ha meg szeretné változtatni a helyzetét, akkor csak használja a belsejét Példa a vízszintes vonalak igazítására.
Eredmény a böngészőben Tekintse meg ennek az oktatóanyagnak a legelső példáját. Szerinted milyen színűek ezek a vonalak? És itt van a rossz. Átlátszóak, akárcsak minden olyan oldalelem, amelynek nincs megadva háttérszíne! Nem hiszed? Ezután nézze meg azt a példát, ahol megváltoztattuk a vonalak színét. A legelsőnél nem állítottuk be a színt, csak növeltük a méretét, és nem átlátszó ez a vonal? Szóval ez! Most elmagyarázom. Alapértelmezés szerint a böngészők szegélyvonalakat rajzolnak, amelyek 3D-s hatást hoznak létre. Tehát amikor nem növeljük a vízszintes vonalak vastagságát, akkor a böngészők csak ezeket a kereteket jelenítik meg, mivel maga a vonal vastagsága 0px. A vonal körüli szegély eltávolításához, amely gyakran csak a megjelenést rontja, ismét alkalmazzuk a style attribútumot. És így van leírva:
Házi feladat.
És
egy bizonyos helyen. Igaz, ez a lehetőség nem mindig kényelmes, például a színezés néha nem mindig indokolja magát, de sok esetben megoldható a probléma így. Például a kialakított vonalon belül címke
ne szúrjon be szöveget. És a blokkok belsejében - ez lehetséges és folyamatosan gyakorolható. Tehát a tervezési követelményektől függően kell kiválasztania az opciót.
Függőleges vonalak a HTML-ben.
És
Az egyetlen kellemetlenség az, hogy a címke nem érhető el minden böngészőben.
ugyanúgy működik, de itt meg kell próbálni
és módosítsa az oldalt, vagy használjon frissített böngészőket.
Vízszintes vonalak kialakítása:
Címke
vízszintes vonalat szúr be az oldalba, és a következő attribútumokkal rendelkezik:Címke szintaxisa
:Példák vízszintes vonalakra a HTML-ben:
Példák függőleges vonalakra a HTML-ben:
A HTML függőleges és vízszintes vonalainak példáinak szintaxisa a következő:
határ- bal (-jobb): 4px szilárd #FF0000;:
De minden a képzeleten és a kéréseken múlik. Tehát válassz és formálj.Hogyan rajzoljunk vízszintes vonalat?
. És ő az blokkcímke, vagyis önmaga előtt és után sortöréseket hoz létre, így a sort mindig külön sorban kapjuk meg. Ennek megfelelően csak olyan címkéken belül adható meg, amelyek például blokkelemeket tartalmazhatnak vagy . De magát
nem tartalmazhat tartalmat, mert egyszerűen nincs záró címkéje, azaz üres .
Hogyan lehet megváltoztatni a vízszintes vonalak színét, vastagságát és szélességét?
voltak speciális attribútumok, amelyekkel megváltoztathatja a vízszintes vonalak színét, vastagságát és szélességét. Ezek a színek, a méretek és a szélességek. De az újabb verziókban a Cascading Style Sheets (CSS) javára elavulttá váltak, így, sejtitek, ismét a kedvenc stílusattribútumunkat fogjuk használni. Az általános szintaxis a következő:
style="background:color" >- a vonal színe (vagy inkább a háttere).
style="height:size" >- vonalvastagság.
style="width:size" >- vonalvastagság.
stílus= "háttér: szín; magasság: méret; szélesség: méret">
- és megadhatja az összes paramétert egyszerre, csak ne felejtse el a pontosvesszőt (;).
. Ebben az esetben a szülő méreteit 100%-nak vesszük. Például ha elhelyezzük a címkét
style="width:50%"> az elem belsejében , akkor akárhogyan is méretezzük át a böngészőablakot vagy a monitor felbontását, a vonal szélessége mindig a blokk szélességének fele lesz
.
A vízszintes vonalak helyzetének megváltoztatása
igazítsa az attribútumot a következő értékekkel:
Hogyan lehet eltávolítani a szegélyt a vonal körül?
