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 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 html példa- kód:

---

És így fog kinézni:

Amint látja, at ez a módszer vannak hátrányai:

• Kevesebb beállítás a vonalhoz;
• Nem készíthet függőleges vonalat.

De ez az út sokkal könnyebb.

Most már pontosan tudja, hogyan készítsen függőleges és vízszintes vonalakat a webhelyén. Kérdéseiket a megjegyzésekben tehetik fel. És ne felejts el előfizetni

A cikkben megismerheti a függőleges vonal létrehozását, amelyet HTML és CSS segítségével végezhetünk, ahol szöveget adunk hozzá. Ahhoz, hogy egy sort hozzon létre, több módszer is rendelkezésre áll, amellyel megjelenítheti. De itt tudnia kell, hogy nem minden böngésző képes megfelelően megjeleníteni, ezért a legegyszerűbb és legérthetőbb módot választjuk, ahol a függőleges vonal vizuálisan látható lesz.

Itt is azonnal szöveget adunk hozzá, hogy ki lehessen választani kulcsszavakat vagy a webhelyen található kategóriákat, és minden bizonnyal ki kell tűnniük a fő leírásból. Tehát erre a vonal tökéletes, amely bármilyen színskála alá beállítható, ami azt jelenti, hogy a design stílusához igazítható.

Ha teljesen figyelembe vesszük, akkor többféleképpen is létrehozhatunk ilyen vonalakat, hogy függőleges vonalakat helyezzünk el az oldalon. Itt 2 fő módszert fogunk megvizsgálni, ez a HTML és a CSS, de hogy melyik felel meg Önnek a legjobban, az az Ön igényeitől függ. Ha telepíted kezdőlap, akkor jobb mindent stílusokon keresztül csinálni. De különféle cikkekben is használják, mint design, akkor minden bizonnyal sokkal logikusabb lesz feltenni HTML-re.

A vonal létrehozásához számos módszer használható:

1 . Állítsa be a táblázat border-right vagy border-left tulajdonságát a kívánt szélességűre, hogy függőleges vonalként működjön.
2 . Állítsa be a DIV border-right vagy border-left tulajdonságát a kívánt szélességi típusnak.
3 . Hasonlóan, a stílus segítségével mindent használhatunk, ahol a CSS-ben minden paramétert előírunk.

Első módszer:

Ennél a metódusnál minden egyszerű, itt eleinte egy div tag-be csomagoljuk az oldalra, mindez az elem kiemelése érdekében. Ahol meglévő blokkkeretet is használhatsz, ahol adott oldalról állítod be a szegélyt. Ahol lehetségessé válik a stílus megadása a megadott címkében.

Ez lesz a kimenet:

Mindez a border-left tulajdonság segítségével történt, ahol kezdetben a blokkszegélyt balra állítottuk, majd ezt követően már lehet paramétereket beállítani mind a sor alatt, mind a csatolandó kulcskifejezés alatt.

Itt érdemes megjegyezni, mivel a border-top és border-bottom tulajdonságok hasonlóan használhatók vízszintes vonal beállítására.

Második módszer:

A megadott jelölés köré div karaktert kell elhelyezni, ez így történik, ahol úgy dönt, hogy a sor a következőképpen jelenik meg, amikor CSS használat.

A képeknek számos érdekes tulajdonsága van, amelyek egyszerű fizikai helyzetekben közvetlen transzformáció (18) alkalmazásával származtathatók. Jelen célunkhoz nincs szükségünk a (18) képlet teljes általánosságára; a megjeleníteni kívánt hatás akkor is kimutatható, ha a kamera pozícióját jellemző összes paraméter nullával egyenlő, kivéve egy dőlésszöget . Ennek megfelelően a (18) kifejezést egyszerűbb formára vesszük és átalakítjuk:

Egy függőleges vonal képének tulajdonságait vizsgáljuk. Egy objektum függőleges vonalát az objektum pontja húzza meg

ahol annak a pontnak a koordinátái, ahol az egyenes metszi az alapsíkot, és z egy szabad paraméter, amelynek értékét az összes valós számok. Ha behelyettesítjük v-t a (27) képletbe és kizárjuk a szabad z paramétert a két egyenletből, akkor a képsíkon egy egyenes egyenletét kapjuk

Ennek az egyszerű egyenletnek az elemzése ad egész sorérdekes megfigyelések. A legfontosabb, hogy a Z tengellyel való metszéspont független magának a függőleges vonalnak a helyzetétől; csak attól függ, hogy a vonal valóban függőleges-e. Így egy adott kamerageometria esetén az összes függőleges vonal képe átmegy a függőleges shofe egy pontján, amelynek koordinátái a képen egyenlők -vel.

Rizs. 10.4. Eltűnési pontok.

Rizs. A 10.4 ezt a hatást egyetlen téglalap alakú doboz képén szemlélteti, a kamera rögzítette, erősen lefelé hajló Az olvasó ellenőrizheti a (28) egyenlet egyéb tulajdonságait is, amelyek összhangban vannak az intuícióval. Például, ha nulláról 90°-ra növeljük, a függőleges eltűnési pont a képsík közepére kerül, és a vonal lejtése laposabb lesz. Hasonlóképpen, bármely adott kameraállásnál ez a hatás hangsúlyosabbá válik, ahogy a téma függőleges vonalai a látómező perifériája felé mozognak (vagyis amikor

-hoz képest nagy lesz). Tehát a függőleges eltűnési pont csak a kamera paraméterei alapján határozható meg, és ez egy egyszerű szükséges feltételt támaszt a függőleges vonalak képénél.

10.5.4. VÍZSZINTES VONALAK ÉS TÁVOLÁSI PONTOK

A perspektivikus transzformációk alkalmazásának utolsó példájaként vizsgáljuk meg a vízszintes vonal képének néhány tulajdonságát. Az egyszerűség kedvéért a globális koordináta-rendszer alapsíkján fekvő tárgyvonal képét tekintjük. Az objektum bármely pontján, amely egy ilyen vonalon fekszik, van hol és b - a vonal meredeksége és az ezzel a vonallal levágott szakasz hossza az Y koordinátatengelyen. Mivel egy olyan objektumról szeretnénk képet készíteni a padlón jobb, ha a kamerát a padló fölé kell emelni, és lefelé mutathat. Ennek megfelelően a kamera geometriai paramétereit formába vesszük, és legyen az érték pozitív és - negatív. Ezeknél a paramétereknél a közvetlen transzformáció (18) a következőképpen egyszerűsödik:

Miután behelyettesítettük a (29) képleteket, és kizártuk a szabad x paramétert a két egyenletből, megkapjuk a képsíkon lévő egyenes egyenletét.

Sem ennek a grafikus vonalnak a lejtésének, sem a koordinátatengelyekkel való metszéspontjainak nincsenek különösebben egyszerű tulajdonságai; vegye azonban figyelembe ennek a képvonalnak a metszéspontját a kép horizontvonalával. Bármely kép horizontvonala a képsík és a lencse közepén áthaladó, a padlóval párhuzamos sík metszéspontja. ábra oldalnézetében látható. A 10.5. ábrán a horizontvonal egyenlete (képkoordinátákkal) a következő alakú. Nyilvánvalóan a (30) képvonal és a horizontvonal metszéspontjának X koordinátáját úgy határozzuk meg, hogy a (30) kifejezést a - értékkel egyenlővé tesszük. A kapott egyenlet megoldása

a horizonttal való metszéspont koordinátája tekintetében azt találjuk

Ezt az eredményt úgy is megkaphatjuk, hogy behelyettesítjük a (29) kifejezést az első egyenletbe, és átlépünk a határértékre, mivel x a végtelenbe hajlik. Ezért a horizonttal való metszéspontot teljesen megérdemelten nevezik vízszintes eltűnési pontnak vagy egy adott egyenes képének horizontjával való eltűnési pontnak; ez az a határ, amelyre a kép pontja hajlik, miközben a tárgy pontja egy egyenes mentén a végtelenbe mozdul

Rizs. 10.5. A horizontvonal kiszámításához.

A kifejezéssel kapcsolatban számos érdekes megjegyzést tehetünk (31). Először is vegye figyelembe, hogy az eltűnési pont nem függ a kamera magasságától az objektum vonalát tartalmazó sík felett. Másodszor, az eltűnési pont nem függ az objektumvonal-egyenletben szereplő b átviteli paramétertől. Ezért levonhatjuk azt a fontos következtetést, hogy bármely két, az alapsíkkal párhuzamos egyenesnek akkor és csak akkor van azonos eltűnési pontja, ha párhuzamosak egymással. Végül tegyük fel, hogy két merőleges tárgyegyenesünk van a padlóval párhuzamos síkon. Lejtéseik legyenek, és eltűnő pontjaik a horizonttal legyenek koordinátáik; és Mivel ezek a vonalak merőlegesek, . Ezért közvetlenül a (31) képletből kapjuk

Két eltűnési pontot néha konjugált eltűnési pontnak neveznek, mivel a szorzatuk negatív, ezért mindig együtt fekszenek különböző oldalakábrán látható módon a kép középvonalától. 10.4. A konjugált eltűnési pontok példák arra, hogy egy adott objektumkényszer (nevezetesen az ortogonalitás) hogyan alakítható át egyszerű képkényszerré.

Üdvözlet minden olvasónak. A mesterek időről időre szembesülnek azzal a problémával, hogyan készítsenek vízszintes vagy függőleges vonalat HTML-lel vagy -val CSS használatával. Erről fogok ma mesélni.

Sorok a CSS-ben

Számos módja van a vonalak készítésének. Az egyik ilyen módszer a CSS használata. Pontosabban a Border segítségével. Nézzünk egy példát.

És itt az eredmény.

Vízszintes és függőleges vonal css-vel.

A CSS-ben vonalak rajzolhatók a Border operátorral. Ha csak egy rögzített szegélyszélességű téglalapot szeretne, akkor egyszerűen használhatja ezt az operátort, és megadhat egy értéket. Például border:5px solid #000000; azt jelenti, hogy a doboz szegélye 5 pixel széles fekete színben.

Ha azonban nem az összes határt kell beállítani, hanem csak néhányat, akkor pontosan meg kell adnia, hogy mely határokra van szükség, és mindegyiknek milyen értéke lesz. Ezek az operátorok:

• border-top – a felső szegély értékét állítja be
• border-bottom – az alsó szegély értékét állítja be
• border-left – a bal oldali szegély értékét állítja be
• border-right – a jobb oldali szegély értékét állítja be.

Függőleges és vízszintes vonal a HTML-ben

Magában a HTML-ben is létrehozhat sorokat. Ehhez használhatja a hr címkét.

Ebben az esetben sorsolásra kerül vízszintes vonal, egy pixel magas és teljes szélességű.

De ez a címke beállíthat néhány értéket.

• Szélesség– beállítja a vonalszélesség értékét.
• szín- beállítja a vonal színét.
• Igazítsa- balra, középre, jobbra igazítást állít be
• méret– beállítja a vonalvastagság értékét pixelben.

A hr címke használatával függőleges vonalat is beállíthat. De ebben az esetben újra a stílusokhoz kell folyamodnia.

Ebben az esetben egy függőleges vonal húzódik száz képpont magas, egy pixel vastagságú és öt képpont behúzással.

Következtetés.

Nos, most már tudja, hogyan állíthat be függőleges és vízszintes vonalat. A vonalak úgy állíthatók be, mint a normál oldalakon, -val HTML használatával, és olyan webhelyen állítsa be, amely CMS-t használ, például WordPress, de ebben az esetben át kell váltania HTML módra.

Nos, ha további kérdései vannak, tegye fel őket a megjegyzésekben.

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 szöveg vízszintes HTML-sorokkal történő díszítése egy bizonyos szövegmegjelenítési logikát ad az oldalnak, valamint megkönnyíti az olvasó számára, hogy kiemelje azokat az információblokkokat, amelyeket sorban kell tanulmányozni. 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

és és