Hogyan kell hozzáadni egy vízszintes vonalat a HTML

Ebből a cikkből megtanulja, hogyan kell hozzáadni egy vízszintes vonalat a HTML-ben. A vízszintes vonal használható a tartalom megosztására a helyszínen. A vonal létrehozásának kódja meglehetősen egyszerű. Mindazonáltal HTML 4.01 A vonaltervezést belső parancsokkal módosíthatja. HTML5 A vonal kialakításához a CSS-t kell használnia.

Lépések

1. módszer: 2:

Munka html 4.01

egy. Nyissa meg a meglévő vagy új HTML dokumentum létrehozását. A HTML-dokumentumok szerkeszthetők egy szövegszerkesztőben, például a "Notepad", vagy egy speciális kódszerkesztőben, például az Adobe Dreamweaver programban. Kövesse az alábbi lépéseket a HTML dokumentum megnyitásához a kiválasztott programban:

Nyissa meg a jegyzettömböt vagy más szövegszerkesztőt / kódszerkesztőt.
Nyissa meg a menüt Fájl.
Kattintás Nyisd ki.
Válassza a HTML fájl lehetőséget.
Kattintás Nyisd ki

2. Válasszon egy olyan helyet, ahol egy vonalat szeretne beilleszteni. Görgessen lefelé, amíg meg nem talál egy olyan karakterláncot, amelyen megjelenik a vonal, majd mozgassa a kurzort közvetlenül a vonal kezdetére, ha a szélsőséges balra kattintva van.

3. Adjon hozzá egy üres karakterláncot. Kétszer kattintva ↵ Írja be a szöveget, amelyet be kell illeszteni a vonalat, majd helyezze a kurzort az üres karakterláncra.

4. Címke hozzáadása
. Belép Egy üres helyen a vonal elején. Címke
Lehetővé teszi, hogy vízszintes vonalat rajzoljon az egész oldalon.

öt. Mozgassa a kurzort a "HR" címke után egy új karakterláncra kattintva ↵ Enter. Most címke
külön sorban kell lennie.

6. Adjon hozzá attribútumokat a vízszintes vonalhoz (opcionális). Adjon hozzá attribútumokat, például hossz, vastagság, szín és igazítás. A "HR" után a göndör zárójelben zárja be őket. Több attribútum hozzáadása, oszd meg őket egy térben.

Belép , A vonal vastagságának megváltoztatása. Cserélje ki a "#" numerikus vastagságot (például méret ="10").

Belép , A vonal szélességének megváltoztatása. Cserélje ki a "#" helyett a képpontok számát vagy az oldal szélességének százalékos arányát (például szélesség ="200" vagy szélesség ="75%").

Belép , A színvonal megváltoztatása. Cserélje ki a "#" helyett a szín vagy annak hexadecimális kódja (például színes ="piros" vagy szín ="# FF0000").

Belép , A vonal igazítása. Cserélje ki a "#" -t "jobbra" (a jobb szélen), a "bal oldali" (a bal szélen) vagy a "Center" (középen) (például, ).

7. Mentse el a HTML fájlt. A szövegfájl HTML-dokumentumként történő mentéséhez módosítani kell a fájlkiterjesztést (.Txt, .Docx) on ".Html ». A HTML dokumentum mentéséhez kövesse az alábbi lépéseket:

Nyissa meg a menüt Fájl.

Kattintás Mentés másként.

Adja meg a fájl nevét a "Fájlnév" mezőbe.

Hozzáad .Html A fájl neve után.

Kattintás Mentés.

nyolc. Ellenőrizze a HTML dokumentumot. A HTML-fájl ellenőrzéséhez kattintson jobb gombbal arra, és válassza a "Megnyitás" lehetőséget. Ezután válassza a Web böngészőt. Ahol behelyezte a "HR" címkét, megjelennie kell egy szilárd vonalat. A HTML-kód valami ilyesmit fog kinézni:

Fejléc mérete ="6" Szélesség ="ötven%" Align ="Bal" Szín ="Zöld">Ezt a karakterláncot elválasztani kell a vonalfejtől.

2. módszer 2:

Munka a CSS / HTML5-ben

egy. Nyissa meg a meglévő vagy új HTML dokumentum létrehozását. A HTML dokumentumok szerkeszthetők egy szövegszerkesztőben, például a jegyzettömbön vagy egy speciális kódszerkesztőben, például az Adobe Dreamweaverben. Kövesse az alábbi lépéseket a HTML dokumentum megnyitásához a kiválasztott programban:

Nyissa meg a jegyzettömböt vagy más szövegszerkesztőt / kódszerkesztőt.
Nyissa meg a menüt Fájl.
Kattintás Nyisd ki.
Válassza a HTML fájl lehetőséget.
Kattintás Nyisd ki

2. Adjon hozzá egy címet a HTML dokumentumhoz. Ha nincs fejléc a HTML dokumentumban, kövesse az alábbi lépéseket a hozzáadáshoz. A címnek a címke után kell mennie És a címke előtt .

Belép A dokumentum tetején.

Kétszer kattintva ↵ Enter két új vonal hozzáadásához.

Belép , A cím bezárásához.

3. Belép fejlécben. A "Stílus" címke két fejléccímke között van elhelyezve egy olyan hely létrehozásához, ahol a HTML-design CSS-kóddal módosítható.

Alternatív módon használhat külső stílusú táblázatot. Olvasd el a cikket "Hogyan kell beilleszteni a CSS fájlt a HTML-ben", Ha meg szeretné tudni, hogyan csatlakozhat egy külső CSS fájlt HTML fájllal.

4. Belép Hr {.Ez egy CSS-címke a vízszintes vonal kialakításához. Adja hozzá a "stílus" címke után a fejlécben vagy a külső CSS fájlban.

öt. Add Stílusok CSS-t a címkéhez
.A "hr {" címke után kell mennie.A vízszintes vonal számos módon adható ki. Az alábbiakban néhány közülük.

Belép Szélesség: ## px-, A vonal szélességének konfigurálása. Cserélje ki a "##" érték szélességét képpontokban. A pixelek helyett (px) a százalékos arányt (%) használhatja.

Belép Magasság: ## px-, A vonal vastagságának beállítása. Cserélje ki a "##" a vonal vastagságát képpontokban.

Belép Háttérszín: ##-, A vonal színének megadása. Cserélje ki a "##" szöveget a szín vagy a rács (#) nevével, miután a hexadecimális színes kód megy.

Belép Margin-Jobb: ## px-, A jobb szélen lévő képpontok számának megadása. Cserélje ki a "##" -t egy számú képponttal vagy az "Auto" kóddal. Írja be az "auto" -t, hogy igazítsa a vonalat a bal szélén vagy a központban.

Belép Margó-balra: ## px-, A bal szélen lévő pixelek számának megadása. Cserélje ki a "##" -t egy számú képponttal vagy az "Auto" kóddal.Adja meg az "Auto" -t, hogy igazítsa a vonalat a jobb szélén vagy a központban.

Belép Margin-Top: ## px- , A vonal tetejére történő megadásához. Cserélje ki a "##" -t a pixelben lévő fázis szélességének megfelelő számmal.

Belép Margó alsó: ## px-, Az alsó hátsó francia bekezdés megadásához. Cserélje ki a "##" -t a pixelben lévő fázis szélességének megfelelő számmal.

Belép Határszélesség: ## px-, A vonal körül a vonal körül (opcionális). Cserélje ki a "##" -t a képpontok vastagságának megfelelő számmal.

Belép Határ szín: ##-, A keret színének megadása (opcionális). Cserélje ki a "##" szöveget a szín vagy a rács (#) nevével, miután a hexadecimális színes kód megy.

6. Belép } A stílusos attribútumok után a címke stílusának befejezéséhez
.

7. Belép bárhol a HTML dokumentum testében, hogy hozzáadjon egy vízszintes vonalat. A CSS stílus beállításait a címke minden használata után alkalmazzák

A HTML dokumentumban.A kódnak megközelítőleg a következőképpen kell lennie:

 Típus ="Szöveg / CSS"> HR {szélesség: 50% -HEIGHT: 20PX-háttér-szín: piros-margin-jobb: Auto-margó - balra: Auto-margó-top: 5px-margó-alsó: 5px-határ szélesség: Szín: Green-}Cím
Ezt a karakterláncot elválasztani kell a vízszintes vonal fejlécétől