Vijë e bukur horizontale në html. Linjat horizontale dhe vertikale në HTML
Në thelb, linjat horizontale përdoren për të dekoruar faqet HTML të një faqe interneti, duke u dhënë atyre një pamje më tërheqëse. Por ata gjithashtu mund të dallojnë vizualisht informacionin nga seksionet ngjitur, duke i shtuar lehtësi lexuesve kur e studiojnë atë. Në thelb, vizatoni vija horizontale aty ku ju nevojiten, kjo është e gjitha.
Si të vizatoni një vijë horizontale?
Ekziston një etiketë e veçantë për vizatimin e vijave horizontale në HTML
. Dhe ai është bllok etiketë, domethënë krijon ndërprerje të linjës para dhe pas vetes, kështu që rreshti përfundon gjithmonë në një rresht të veçantë. Prandaj, mund të specifikohet vetëm brenda etiketave që mund të përmbajnë elemente blloku, për shembull ose
. Por ja ku jam
nuk mund të ketë përmbajtje sepse thjesht nuk ka një etiketë mbyllëse, që do të thotë se është bosh.Shembull i vizatimit të vijave horizontale në HTML
Vizatimi i vijave horizontale
Paragraf.
Paragraf.
Paragraf.
Rezultati në shfletues
Paragraf.
Paragraf.
Paragraf.
Siç mund ta shihni, linjat rezultojnë të jenë shumë të holla, jo tërheqëse dhe të tërhequra në gjerësinë e plotë të disponueshme, kështu që tani do të mësojmë se si t'i ndryshojmë ato për t'i bërë ato të duken më tërheqëse.
Si të ndryshoni ngjyrën, trashësinë dhe gjerësinë e vijave horizontale?
Në versionet më të vjetra të HTML, etiketa
kishte atribute të veçanta me të cilat mund të ndryshonit ngjyrën, trashësinë dhe gjerësinë e vijave horizontale. Këto janë përkatësisht ngjyra, madhësia dhe gjerësia. Por në versionet e reja ato u braktisën në favor të Cascading Style Sheets (CSS), kështu që, siç mund ta keni marrë me mend, ne do të përdorim përsëri atributin tonë të stilit të preferuar. Sintaksa e përgjithshme është:
style="background:color" >- ngjyra e linjës (ose më mirë sfondi i saj).
style="lartësi:madhësi" >- trashësia e vijës.
style="width:size" >- gjerësia e vijës.
stil= "sfondi: ngjyra; lartësia: madhësia; gjerësia: madhësia"> - ose mund të specifikoni të gjithë parametrat menjëherë, thjesht mos harroni për pikëpresjen (;).Një ngjyrë mund të specifikohet nga emri i saj në anglisht ose nga kodi HEX i ngjyrës i paraprirë nga një hash (#). Epo, ju tashmë e dini për këtë nga mësimi në vazhdim ndryshoni ngjyrën e tekstit dhe sfondit.
Por ne do të flasim më shumë për ndryshimin e madhësisë. Siç ju kujtohet nga mësim mbi ndryshimin e shkronjave, ka rreth dhjetë njësi matëse në CSS, por gjerësia e vijës mund të specifikohet vetëm në piksel (px) dhe përqindje (%), dhe trashësia përgjithësisht vetëm në pixel. Nëse vendosni njësi të tjera matëse, nuk do të jetë një gabim, por shfletuesit thjesht do t'i injorojnë ato.
Nëse specifikoni dimensionet në piksel, atëherë trashësia dhe gjerësia e linjës do të varen nga rezolucioni i monitorit në të cilin shihet faqja juaj (sa më e lartë të jetë rezolucioni i ekranit, aq më e hollë dhe më e ngushtë është linja).
Siç thashë tashmë, vetëm gjerësia e linjës mund të specifikohet si përqindje. Madhësitë e përqindjes varen gjithmonë dhe llogariten bazuar në madhësinë e elementit të kontejnerit mëmë brenda të cilit ndodhet etiketa
. Në këtë rast, dimensionet e prindit merren si 100%. Për shembull, nëse vendosim etiketën
style="width:50%" > element i brendshëm, atëherë pavarësisht se si e ndryshojmë madhësinë e dritares së shfletuesit ose rezolucionin e monitorit, gjerësia e linjës do të jetë gjithmonë gjysma e gjerësisë së bllokut.Një shembull i ndryshimit të ngjyrës, trashësisë dhe gjerësisë së vijave horizontale.
Ndryshoni ngjyrën, trashësinë dhe gjerësinë e vijave horizontale.
Rezultati në shfletues
Ndryshimi i pozicionit të vijave horizontale
Kur ndryshoni gjerësinë e vijës horizontale, mund të shihni qartë se shfletuesit e vendosin atë gjithmonë në qendër. Nëse dëshironi të ndryshoni pozicionin e tij, atëherë përdorni vetëm brenda
rreshtoni atributin me vlerat e mëposhtme:
- qendër- linja është rreshtuar në qendër (vlera e parazgjedhur).
- majtas- shtyp në skajin e majtë.
- drejtë- shtyp në skajin e djathtë.
Shembull i shtrirjes së vijës horizontale.
Ndryshoni pozicionin e vijave horizontale.
Rezultati në shfletues
Si të hiqni kornizën rreth një linje?
Shikoni shembullin e parë të këtij mësimi. Çfarë ngjyre mendoni se janë këto linja? Por kjo nuk është e vërtetë. Ato janë transparente, ashtu si çdo element i faqes që nuk ka një ngjyrë të specifikuar të sfondit! Nuk më besoni? Pastaj shikoni shembullin ku ndryshuam ngjyrën e vijave. Për të parën, nuk vendosëm ngjyrën, por vetëm e rritëm madhësinë e saj, dhe a nuk është transparente kjo linjë? Kështu që!
Tani do të shpjegoj. Si parazgjedhje, shfletuesit vizatojnë korniza rreth vijave, të cilat krijojnë një efekt tredimensional. Pra, kur nuk e rrisim trashësinë e vijave horizontale, shfletuesit na tregojnë vetëm këto korniza, pasi vetë trashësia e vijës është 0px.
Për të hequr kufirin rreth vijës, e cila shpesh prish pamjen, ne do të aplikojmë përsëri atributin stil. Dhe shkruhet kështu:
Detyre shtepie.
- Krijoni titujt e artikujve, seksioneve dhe nënseksioneve. Vendosini të gjitha në qendër.
- Vendosni fontin në Arial për të gjithë faqen dhe Courier për titujt.
- Lëreni madhësinë e shkronjave në të gjithë faqen të jetë 85% e madhësisë së parazgjedhur të shfletuesit. Dhe titujt kanë përkatësisht 145%, 125% dhe 110%, të madhësisë së shkronjave në faqe.
- Shkruani një paragraf nën titullin e parë, një citim të gjatë nën të dytin dhe një poezi nën titullin e tretë. Dhe le të jetë poezia e vendosur në qendër të faqes.
- Tre fjalë të theksuara në citat.
- Nën titullin e artikullit, vizatoni një vijë të kuqe horizontale me trashësi tre pikselë në të gjithë gjerësinë e faqes.
- Në krye dhe në fund të poezisë, vizatoni vija të trasha një piksel në të zezë. Lëreni gjerësinë e vijës së sipërme të jetë afërsisht e barabartë me gjerësinë e vargut, dhe pjesa e poshtme - gjysma.
- Hiqni kornizat e panevojshme nga linjat.
Duket, pse mund të nevojiten katër metoda? Në fund të fundit, pothuajse çdo person përdor një metodë me të cilën është mësuar. Për shembull, kam shtypur Shift dhe butonin dash disa herë, dhe kështu kam marrë një vijë horizontale.
Por, çka nëse kjo rezulton në një vijë me pika, por ju nevojitet një vijë e fortë?
- Me shumë mundësi, tasti Shift në tastierë është i gabuar. Metoda të tjera do të vijnë në shpëtim këtu.3.
4.
5.Ndoshta mënyra më e zakonshme për të krijuar një rresht në Word është përdorimi i disa tasteve në tastierë.
I Linjë e hollë, e trashë, e dyfishtë, me pika duke përdorur tastierën
Më poshtë është një foto e një tastierë me një paraqitje angleze, por pa një plan urbanistik, por kjo nuk ka rëndësi, sepse ne jemi të interesuar vetëm për tre çelësa: Shift, dash dhe Enter.
Oriz. 1. Tre taste në tastierë: Shift, dash dhe Enter për një vijë të vazhdueshme horizontale në Word
Me këta tre çelësa mund të vizatoni një vijë të vazhdueshme horizontale në Word: me pika ose të ngurta, të hollë ose të trashë, të gjatë ose të shkurtër.
1) Kur shtypni tastin "-" (dash) disa herë në redaktuesin Word, ju merrni një vijë me pika të çdo gjatësie.
Për të bërë i hollë një rresht i gjatë në të gjithë gjerësinë e faqes:
- Ne gjejmë tastin "dash" në tastierë (në të djathtë të tastit "zero", në kornizën e gjelbër në Fig. 1).
- Nga një rresht i ri (!) në Word, shtypni këtë çelës disa herë: -
- Dhe më pas shtypni tastin "Enter" (). Disa vija të shtypura do të kthehen papritur në një vijë të hollë horizontale të vazhdueshme në të gjithë gjerësinë e faqes.
2) Kur shtypni njëkohësisht Shift dhe "-" (dash), NUK shtypet një vizë, por një nënvizim _________. Në këtë mënyrë ju mund të bëni një vijë të vazhdueshme me gjatësi arbitrare kudo në dokument.
Oriz. 2. Vijë e hollë dhe e trashë horizontale në Word
Tani le të printojmë yndyrë vijë horizontale në të gjithë gjerësinë e faqes:
- Përsëri gjejmë të njëjtin çelës "dash", si dhe tastin Shift (në të majtë ose në të djathtë, sipas dëshirës). Shtypni Shift, mbajeni dhe mos e lini të shkojë.
- Dhe tani, nga një rresht i ri (!), klikoni në vizë disa herë (për shembull, 3-4 herë) (ndërsa nuk e lëshoni Shift): ___. Lësho Shift.
- Tani shtypni tastin Enter. Do të shihni një vijë të trashë horizontale.
Le të përmbledhim disa rezultate në formën e një tabele:
(Kliko për ta zmadhuar) Linjat në Word duke përdorur tastierën
II Rreshti në Word duke përdorur një tabelë
Një vijë horizontale mund të merret duke përdorur një tabelë me një qelizë (1x1), në të cilën vetëm kufiri i sipërm ose i poshtëm është i ngjyrosur (do të jetë i dukshëm), dhe tre anët e tjera të tabelës kanë kufij të pangjyrosur (ato do të jenë të padukshëm) .
Vendoseni kursorin në vendin ku duhet të jetë vija. Në menunë e sipërme të Word, klikoni:
- Insert (1 në Fig. 3),
- Tabela (2 në Fig. 3),
- Një qelizë (3 në Fig. 3).
Oriz. 3. Si të futni një tabelë 1x1 (nga një qelizë) në Word
Rezultati do të jetë një tabelë me një qelizë të madhe (1x1):
Mbetet vetëm të hiqni kufijtë nga tre anët në tabelën 1x1. Për këtë
- shkoni te skeda "Home" (1 në Fig. 4),
- pastaj pranë "Font" gjejmë "Paragraf" dhe kufijtë (2 në Fig. 4),
- hiqni të gjithë kufijtë duke klikuar "Pa kufi" (3 në Fig. 4),
- zgjidhni “Upper border” ose “Lower border” (4 në Fig. 4).
Oriz. 4. Si të hiqni përzgjedhjen e kufirit nga një tabelë Word (i bëni kufijtë të padukshëm)
Këtë e tregoj qartë në video (në fund të artikullit).
Nga rruga, në Fig. 3 është e qartë se ka një mënyrë më të lehtë. Mund ta vendosni kursorin në fillim të rreshtit në Word dhe të klikoni "Vija horizontale" (5 në Fig. 4):
III Rreshti në Word duke përdorur vizatim
Insert (1 në Fig. 5) - Shapes (2 në Fig. 5) - kjo është një mënyrë tjetër për të marrë një vijë horizontale në Word.
Për ta mbajtur vijën në mënyrë strikte horizontale, mbani të shtypur tastin Shift dhe vizatoni vijën në të njëjtën kohë.
Oriz. 5. Si të vizatoni një vijë në Word
Rreshti IV në Word duke përdorur tastierën në ekran
Për të gjetur tastierën në ekran, futni frazën "tastierë në ekran" në "Kërko", më shumë detaje për Windows 7 dhe për Windows 8.
Për Windows 10, mund të gjeni gjithashtu tastierën në ekran duke shtypur "tastierë në ekran" në shiritin e kërkimit.
Oriz. 6. Tastiera në ekran
Ne do të krijojmë një vijë horizontale në të njëjtën mënyrë si në opsionin e parë me një tastierë të rregullt. Do t'ju duhen tre butona në tastierën në ekran: dash, Shift dhe Enter.
1 Dash dhe Enter
Nga një rresht i ri në Word, klikoni në vizë (1 në Fig. 6) disa herë dhe shtypni Enter. Do të merrni një vijë të hollë horizontale.
2 Shift, vizë dhe Enter
Nga një rresht i ri në Word, së pari kliko Shift (2 në Fig. 6), pastaj Dash (1 në Fig. 6). Do të merrni një nënvizim. Këtë do ta përsërisim edhe 2 herë të tjera dhe më pas shtypim Enter. Si rezultat, ne do të shohim një vijë të trashë horizontale.
Përshëndetje për të gjithë lexuesit. Herë pas here, zejtarët përballen me problemin se si të bëjnë një vijë horizontale ose vertikale duke përdorur HTML ose CSS. Kjo është ajo që do t'ju tregoj sot.
Linjat në CSS
Ka disa mënyra për të bërë linja. Një mënyrë e tillë është përdorimi i CSS. Ose më mirë, duke përdorur Border. Le të shohim një shembull.
Dhe kjo është ajo që do të ndodhë si rezultat.
Linja horizontale dhe vertikale duke përdorur css.
Linjat mund të vizatohen në CSS duke përdorur operatorin Border. Nëse ju nevojitet vetëm një drejtkëndësh me një gjerësi fikse të kornizës, atëherë thjesht mund ta përdorni këtë operator dhe t'i jepni një vlerë. Për shembull kufiri: 5px solid #000000; do të thotë që kufijtë e bllokut kanë një gjerësi të barabartë me 5 piksel me ngjyrë të zezë.
Sidoqoftë, nëse duhet të vendosni jo të gjithë kufijtë, por vetëm disa, atëherë duhet të specifikoni se cilët kufij nevojiten dhe çfarë vlere do të ketë secili prej tyre. Këta janë operatorët:
- border-top – vendos vlerën e kufirit të sipërm
- border-bottom – vendos vlerën e kufirit të poshtëm
- border-left – vendos vlerën e kufirit të majtë
- border-right – vendos vlerën e kufirit të djathtë.
Vija vertikale dhe horizontale në HTML
Ju mund të krijoni rreshta në vetë HTML. Për ta bërë këtë, mund të përdorni etiketën hr.
Në këtë rast, do të vizatohet një vijë horizontale, një piksel e lartë dhe gjerësi e plotë.
Por kësaj etikete mund t'i jepen edhe disa vlera.
- Gjerësia– vendos vlerën e gjerësisë së linjës.
- Ngjyrë– vendos ngjyrën e vijës.
- Rreshtoni– vendos shtrirjen majtas, qendër, djathtas
- Madhësia– vendos vlerën e trashësisë së linjës në piksel.
Duke përdorur etiketën hr, mund të vendosni gjithashtu një vijë vertikale. Por në këtë rast, do t'ju duhet t'i drejtoheni përsëri stileve.
Në këtë rast, një vijë vertikale do të vizatohet njëqind piksel e lartë, një piksel e trashë dhe pesë piksel e futur.
konkluzioni.
Epo, tani e dini se si mund të vendosni një vijë vertikale dhe horizontale. Linjat mund të vendosen si në sajte të zakonshme duke përdorur HTML, ashtu edhe në një sajt që përdor një CMS, për shembull, WordPress, por në këtë rast, do t'ju duhet të kaloni në modalitetin HTML.
Epo, nëse keni ndonjë pyetje tjetër, pyesni ato në komente.
Nga autori: ju pershendes. Nevoja për të paraqitur disa blloqe në një faqe interneti në një rresht është një detyrë shumë e zakonshme me të cilën përballen dizajnerët e faqosjes. Ndodh gjatë paraqitjes së pothuajse çdo shablloni, kështu që në çdo rast, të gjithë duhet të njohim dhe zbatojmë metodat bazë të ndryshimit të sjelljes së blloqeve.
Para se të shohim teknikat më të zakonshme, do të doja të kujtoja një teori të vogël. Elementet e faqes së internetit ndahen në elemente bllok dhe inline. Dhe ndryshimi midis tyre është shumë i thjeshtë - ato me shkronja të vogla mund të vendosen në një rresht, por ato në bllok jo. Sigurisht, dallimet nuk mbarojnë me kaq, por ky është ndryshimi kryesor. Blloqet tashmë mund të kenë mbushje në krye dhe në fund (ato të vogla nuk kanë), dhe mund të aplikohen më shumë veçori për to.
Mënyrat themelore për të rreshtuar blloqet në CSS
Ne nuk do të komplikojmë asgjë, ka 3 mënyra kryesore:
Shndërroni blloqet në elementë të linjës. Në këtë rast, vetitë e bllokut humbasin, kështu që ky opsion pothuajse nuk përdoret kurrë
Bëni elementet e nevojshme bllok-line. Ky është një lloj i veçantë në të cilin elementi ruan vetitë e tij, por në të njëjtën kohë lejon që blloqet e tjera të vendosen afër.
Bëni elementët të notojnë duke përdorur veçorinë float.
Le të përqendrohemi në këto opsione. Ne nuk do të marrim parasysh Flexbox, shfaqjen e tabelës dhe aspekte të tjera. Pra, le të themi se kemi 3 nëntituj.
Kreu 1
Kreu 2
Kreu 3
Natyrisht, të gjitha vetitë css duhet të shkruhen në një skedar të veçantë (style.css), i cili duhet të lidhet me dokumentin html. Në këtë skedar do të shkruaj një stil minimal në mënyrë që nëntitujt tanë të jenë thjesht të dukshëm.
h3 ( sfond: #EEDDCD; )
h3 (
sfond : #EEDDCD;
Këtu janë ato në faqe:
Ata sillen si blloqe. Secili ndodhet në vijën e vet, ka dhëmbëza midis tyre. Nëse dëshironi, mund të vendosni gjithashtu çdo mbushje të brendshme dhe të bëni çfarë të dëshironi.
Le ta kthejmë atë në rreshta dhe menjëherë të shtojmë dhëmbëzimet. Për ta bërë këtë, zgjedhësi h3 duhet të shtojë vetitë e mëposhtme:
shfaqja: inline; mbushje: 30 px;
Ka 2 probleme kryesore që lindin gjatë përdorimit të kësaj teknike. E para është dhëmbëzimi minimal. Formohet për faktin se në kod ka një hapësirë midis blloqeve, e cila formon këtë dhëmbëzim. Nëse ky problem ka nevojë për zgjidhje, ekzistojnë 2 opsione kryesore:
Në html, vendosni kodin e blloqeve të kërkuara në një rresht pa hapësira
Shtoni një diferencë negative në të djathtë prej -4 pikselësh. Kaq zë një hapësirë.
Problemi i dytë është se nëse elementët kanë lartësi të ndryshme, mund të shfaqen probleme me ekranin. Në përgjithësi, opsioni më i mirë është blloqet lundruese. Në vend të shfaqjes: blloku inline shkruajmë këtë:
Bllokon në një rresht duke përdorur kornizën
Unë do të them menjëherë se nëse do të përdorni ndonjë kornizë normale CSS (për shembull, Bootstrap), atëherë gjithçka është akoma shumë më e thjeshtë. I gjithë kodi CSS përgjegjës për rregullimin e elementeve tashmë është shkruar dhe gjithçka që duhet të bëni është të vendosni klasat e sakta. Për ta bërë këtë, thjesht mësoni sistemin e rrjetit dhe do të jeni në gjendje të krijoni shabllone të përgjegjshme me shumë kolona pa shumë vështirësi. Të paktën do të jetë shumë më e lehtë sesa të shkruani css nga e para.
Një sfidë tjetër e shkrimit të kodit nga e para vjen kur keni nevojë për dizajn të përgjegjshëm. Sigurisht, mund ta zbatoni vetë duke zotëruar pyetje mediatike, por do të jetë shumë më e vështirë nëse keni një shabllon kompleks.
Për shembull, kur duhet të keni 4 kolona në ekrane të mëdha, 3 në ekrane të mesme dhe 2 në celularë. Me ndihmën e kornizave të tilla si Bootstrap, ose më mirë me ndihmën e rrjetit të tij, zbatimi i kësaj mund të zgjasë vetëm disa minuta. .
Duke e përkthyer pa probleme temën në kornizën e Bootstrap, unë do të vërej edhe një herë se nëse përballeni me detyrën e shtrimit të një modeli kompleks adaptiv, atëherë është thjesht mëkat të mos përdorni rrjetin. Për ta bërë këtë, as nuk duhet të lidhni versionin e plotë të kornizës - mund ta personalizoni atë dhe të ndaloni atje vetëm atë që ju nevojitet vërtet.
Ju mund të mësoni se si të punoni me kornizën duke përdorur . Teoria shpjegohet atje, por më e rëndësishmja, ka praktikë. Do të krijoni 3 shabllone përshtatës dhe do të merrni një përvojë të shkëlqyer që do t'ju lejojë të krijoni faqe interneti me porosi ose për veten tuaj. Dhe nëse doni të njiheni falas me avantazhet dhe aftësitë e kornizës, ju sugjeroj të shikoni serinë tonë të artikujve në Bootstrap, si dhe në dizajnin e thjeshtë të paraqitjes. Ju uroj suksese në paraqitjen dhe ndërtimin e faqes në përgjithësi.
Detyrë
Bëni një vijë horizontale në faqe.
Zgjidhje
Linjat horizontale janë të mira për të ndarë një bllok teksti nga një tjetër. Teksti i vogël me vija horizontale në krye dhe në fund tërheq më shumë vëmendjen e lexuesit sesa teksti i zakonshëm.
Duke përdorur një etiketë
mund të vizatoni një vijë horizontale, pamja e së cilës varet nga atributet e përdorura, si dhe nga shfletuesi. Etiketa i referohet elementeve të bllokut, kështu që rreshti gjithmonë fillon në një rresht të ri, dhe pas tij të gjithë elementët shfaqen në rreshtin tjetër. Falë shumë atributeve të etiketës
linja e krijuar përmes kësaj etikete është e lehtë për t'u menaxhuar. Nëse lidhni gjithashtu fuqinë e stileve, atëherë shtimi i një rreshti në një dokument bëhet një detyrë e thjeshtë.Linja e parazgjedhur
shfaqur në ngjyrë gri dhe me një efekt volum. Ky lloj linje nuk i përshtatet gjithmonë dizajnit të faqes, kështu që dëshira e zhvilluesve për të ndryshuar ngjyrën dhe parametrat e tjerë të linjës përmes stileve është e kuptueshme. Sidoqoftë, shfletuesit kanë qasje të përziera për këtë çështje, kjo është arsyeja pse do t'ju duhet të përdorni disa veçori stili në të njëjtën kohë. Në veçanti, versionet më të vjetra të Internet Explorer përdorin veçorinë e ngjyrës për ngjyrën e linjës, ndërsa shfletuesit e tjerë përdorin ngjyrën e sfondit . Por kjo nuk është e gjitha, ju duhet të specifikoni trashësinë e linjës (vetinë e lartësisë) të jetë jo zero dhe të hiqni kornizën rreth vijës duke vendosur veçorinë kufitare në asnjë. Duke bashkuar të gjitha vetitë së bashku për përzgjedhësin hr, marrim një zgjidhje universale për shfletuesit e njohur (shembulli 1).Shembulli 1: Vija horizontale
HTML5 CSS 2.1 IE Cr Op Sa Fx
Ngjyra e vijës horizontale
Vargu i tekstit
Rezultati i këtij shembulli është paraqitur në Fig. 1.
Oriz. 1. Vijë horizontale me ngjyrë
Artikuj të ngjashëm
