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 felső és alsó vízszintes vonalakkal ellátott kis szöveg jobban felhívja az olvasó figyelmét, mint a normál szöveg.
A címke használata
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 ezzel kezdődik új sor, és utána minden elem megjelenik következő sor... A címke számos tulajdonságának köszönhetően
az ezen a címkén keresztül létrehozott vonal könnyen kezelhető. A stílusok erejével kombinálva egy sor hozzáadása a dokumentumhoz gyerekjáték lesz.
Alapértelmezett vonal
Megjelenik szürkeés a hangerő hatására. Ez a fajta vonal nem mindig illeszkedik az oldal kialakításához, így érthető a fejlesztők azon 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űek ebben a kérdésben, ezért egyszerre több stílustulajdonságot kell használnia. Különösen a böngésző régebbi verziói internet böngésző a vonalszínhez használja a color tulajdonságot, más böngészők pedig a background-color tulajdonságot. De ez még nem minden, ebben az esetben ügyeljen arra, hogy nullától eltérő vonalszélességet (height property) adjon meg, és távolítsa el a vonal körüli szegélyt úgy, hogy a border tulajdonságot none értékre állítja. Az összes tulajdonságot összerakva a óraválasztóhoz univerzális megoldást kapunk népszerű böngészők(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
A szerzőtől:Üdvözöllek. Az, hogy egy weboldalon több blokkot egy sorban kell bemutatni, nagyon gyakori feladat az elrendezéstervezők számára. Szinte minden sablon elrendezése során előfordul, így minden esetben mindenkinek ismernie kell és alkalmaznia kell a blokkok viselkedésének megváltoztatásának alapvető módszereit.
Mielőtt a leggyakoribb trükköket megnéznénk, felidéznék egy kis elméletet. A weboldal elemei blokkra és sorba 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 már most is rendelkezhetnek felső és alsó behúzással (a kisbetűsek nem), és több tulajdonság is alkalmazható rájuk.
A blokkok sorba rendezésének fő módjai css-ben
Nem bonyolítunk semmit, három fő módja van:
Blokkok konvertálása soron belüli elemekké. Ugyanakkor a blokktulajdonságok elvesznek, így 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 egy elem megőrzi tulajdonságait, ugyanakkor lehetővé teszi más blokkok egymás mellé helyezését.
Float elemek a float tulajdonság használatával.
Maradjunk ezeken a lehetőségeken. 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 be kell írni külön fájl(style.css), amelyet a html dokumentumhoz kell kapcsolni. Ebben a fájlban egy minimál stílust írok, hogy alcímeink jól 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 akarja, beállíthat bármilyen belső behúzást, és általában azt tehet, amit akar.
Konvertálja vonalakká, és azonnal adjon hozzá párnázást. Ehhez adja hozzá a következő tulajdonságokat a h3 választóhoz:
kijelző: inline; padding: 30px;
Ezzel a technikával 2 fő probléma van. Az első a minimális párnázás. Ez annak köszönhető, hogy a kódban a blokkok között egy szóköz van, amely ezt a behúzást képezi. Ha ez a probléma megoldást igényel, két fő lehetőség közül választhat:
A html-ben a szükséges blokkok kódját szóközök nélkül egy sorban rendezze
Tedd le a negatívumot külső párnázás jobb oldalon -4 pixel. Ennyit foglal egy hely.
A második probléma az, hogy megjelenítési problémák léphetnek fel különböző magasságú elemek esetén. Általában a lebegő blokkok a legjobb megoldás. A display: inline-block helyett ezt írjuk:
Blokkolás a sorban keret segítségével
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. Az elemek elrendezéséért felelős összes css-kód már meg van írva, és csak a megfelelő osztályokat kell beállítani. Mindössze annyit kell tennie, hogy megtanulja a rácsrendszert, és minden nehézség nélkül létrehozhat érzékeny többoszlopos sablonokat. Legalább sokkal könnyebb lesz, mint a css-t a semmiből írni.
Egy másik kihívás a kód írása a semmiből, amikor szükség van reszponzív tervezésre. 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 van nagy képernyők 4 oszlopnak kell lennie, a közepén - 3 és tovább mobiltelefonok- 2. Az olyan keretrendszerek segítségével, mint a Bootstrap, vagy inkább annak gridje segítségével egy ilyen dolog megvalósítása szó szerint néhány perc kérdése.
A téma zökkenőmentes fordítása nyelvre Bootstrap keretrendszer, még egyszer megjegyzem, ha egy összetett adaptív sablon elkészítésének feladatával áll szemben, akkor egyszerűen bűn nem használni a rácsot. Ehhez még csatlakoztatni sem kell teljes verzió keretrendszer – testreszabhatja, és csak azt állíthatja meg, amire valóban szüksége van.
Megtanulhatja, hogyan kell a kerettel dolgozni. Megmagyarázza az elméletet is, de a legfontosabb, hogy van gyakorlat. Impozáns vagy 3 reszponzív sablonés kiváló élményben lesz része, amely lehetővé teszi, hogy megrendelésre vagy saját magának készítsen weboldalakat. Ha pedig ingyenesen szeretné áttekinteni a keretrendszer előnyeit és funkcióit, azt javaslom, tekintse meg cikksorozatunkat a Bootstrapről és az egyszerű elrendezésről. Sok sikert kívánok az elrendezéshez és általában az oldalépítéshez.
Üdv mindenkinek! 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 meg lehet tenni css használatával... Ehhez a div tag segítségével bezárom a kívánt szövegterületet egy blokkba, majd a style.css fájlban vagy közvetlenül a html kódban a border segítségével írunk tulajdonságokat ehhez a blokkhoz a felső vagy az alsó szegélyhez. -felső és szegély-alsó. Íme egy példa:
Ebben az esetben a stílust css-sel közvetlenül a html kódból állítottam be, és a felső szegélyt szilárdra tettem, az alsót pedig szaggatott vonal.
Így fog kinézni az oldalon:
Vízszintes vonal css használatával.
Ennek a módszernek megvannak a maga előnyei:
- A beállítások széles skálája, amely lehetővé teszi szinte bármilyen nézet beállítását a vonalhoz;
- Létrehozhat vízszintes és függőleges vonalak... Függőleges vonalak készítéséhez a szegélyt felül szegély-balra, a szegély-alul pedig szegély-jobbra kell módosítani.
A hátrányok közé tartozik a kód viszonylagos nehézkessége.
Azonban, mint kiderült, html segítségével vízszintes sort is beszúrhatunk a szövegbe. Ugyanakkor a css-be sem kell belemenni. Ehhez használja a címkét
.
Vízszintes vonal html címkével
Ennek a címkének az első jellemzője, hogy nincs megfelelő zárócí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 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 jobbra - jobbra, balra - balra, középre - középre;
- Méret- vonalszélesség pixelben.
Itt html példa- kód.
Alapvetően vízszintes vonalak díszítik az oldal 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.
Hogyan rajzolhatok vízszintes vonalat?
Van egy speciális címke vízszintes vonalak rajzolására a HTML-ben
... Ráadásul ő 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 magamat
nem lehet tartalma, mivel egyszerűen nincs végcímke, vagyis üres.Példa vízszintes vonalak rajzolására HTML-ben
Rajzolj vízszintes vonalakat
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 teljes elérhető szélességre húzódnak, ezért most megtanuljuk, hogyan változtassuk meg őket, hogy vonzóbbá tegyék őket.
Hogyan változtathatom meg a vízszintes vonalak színét, vastagságát és szélességét?
A HTML régebbi verzióiban a címke
voltak speciális attribútumok, amelyekkel megváltoztatható volt a vízszintes vonalak színe, vastagsága és szélessége. Ezek színe, mérete és szélessége. Az újabb verziókban azonban lemondtak róluk a Cascading Style Sheets (CSS) javára, így, gondoltad, ismét a kedvenc stílusattribútumunkat fogjuk használni. Az általános szintaxis a következő:
style = "háttér: szín">- vonal színe (vagy inkább a háttere).
style = "magasság: méret">- vonalvastagság.
style = "szélesség: méret">- vonalvastagság.
stílus = "háttér: szín; magasság: méret; szélesség: méret"> - de megadhatja az összes paramétert egyszerre, csak ne felejtse el a pontosvesszőt (;).Egy szín megadható az angol nevével vagy a szín HEX-kódjával, amelyet egy hash (#) előz meg. Nos, erről már a leckétől fogva tudsz a szöveg és a háttér színének megváltoztatása.
De az átméretezésről részletesebben fogunk beszélni. Emlékszel a 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, ill 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 azokat.
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 az Ön webhelye látható (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ő tárolóelem méretétől függenek, és az alapján számítják ki, amelyen belül a címke található.
... Ebben az esetben a szülő méretét 100%-nak vesszük. Például ha elhelyezzük a címkét
style = "szélesség: 50%"> belső elem, 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.Példa a vízszintes vonalak színének, vastagságának és szélességének megváltoztatására.
Módosítsa a vízszintes vonalak színét, vastagságát és szélességét.
Eredmény a böngészőben
A vízszintes vonalak helyzetének megváltoztatása
Ha módosítja egy vízszintes vonal szélességét, jól láthatóvá válik, hogy a böngészők mindig a közepére helyezik. Ha meg szeretné változtatni a helyzetét, akkor csak használja belül
igazítsa az attribútumot a következő értékekkel:
- központ- a vonal középre van állítva (alapértelmezett érték).
- bal- a bal széléhez nyomva.
- jobb- a jobb széléhez nyomva.
Példa a vízszintes vonalak igazítására.
Változtassa meg a vízszintes vonalak helyzetét.
Eredmény a böngészőben
Hogyan távolíthatom el a szegélyt a vonal körül?
Vessen egy pillantást ennek az oktatóanyagnak a legelső példájára. Szerinted milyen színűek ezek a vonalak? És itt ez tévedés. Átlátszóak, mint minden olyan oldalelem, amely nincs megadva. háttérszín! Ne higgy nekem? Ezután nézzünk meg egy 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 kereteket rajzolnak a vonalak köré, ami háromdimenziós hatást kelt. Tehát ha 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ára, amely gyakran csak elrontja megjelenés, újra alkalmazzuk a style attribútumot. És így van leírva:
Házi feladat.
- Hozzon létre cikk-, szakasz- és alszakaszcímeket. Középre állítsa őket.
- Állítsa a teljes oldalt Arial és Courier értékre a fejlécekhez.
- Legyen a teljes oldal betűmérete az alapértelmezett böngészőméret 85%-a. A címek betűméretének 145%-a, 125%-a és 110%-a van az oldalon.
- Írj egy bekezdést az első cím alá, egy hosszú idézetet a második alá, és egy verset a harmadik alá. És legyen a vers középpontjában az oldal.
- Kiemel kiemelten három szó egy idézetben.
- A cikk címsora alatt húzzon egy három pixeles piros vízszintes vonalat az oldal teljes szélességében.
- A vers tetején és alján húzzon egy pixel fekete vonalat. Legyen a felső sor szélessége megközelítőleg egyenlő a vers szélességével, az alsó pedig feleannyi.
- Távolítsa el a felesleges kereteket a vonalakról.
