De la autor: Te salut. Necesitatea de a prezenta mai multe blocuri pe o pagină web într-o singură linie este o sarcină foarte comună cu care se confruntă designerii de layout. Apare atunci când așezați aproape fiecare șablon, așa că toți trebuie să cunoaștem și să aplicăm modalitățile de bază de a schimba comportamentul blocurilor oricum.
Înainte de a ne uita la cele mai comune trucuri, aș dori să reamintesc o mică teorie. Elementele paginii web sunt împărțite în elemente bloc și elemente inline. Și diferența dintre ele este foarte simplă - cele cu litere mici pot fi localizate pe o singură linie, dar cele blocate nu. Desigur, diferențele nu se termină aici, dar aceasta este principala diferență. Blocurile pot avea deja indentări în partea de sus și de jos (cele inline nu au) și li se pot aplica mai multe proprietăți.
Modalități de bază de a alinia blocuri în css
Nu vom complica nimic, există 3 moduri principale:
Convertiți blocurile în elemente inline. În acest caz, proprietățile blocurilor se pierd, așa că această opțiune nu este aproape niciodată utilizată.
Faceți elementele dorite bloc-inline. Acesta este un tip special în care elementul își păstrează proprietățile, dar în același timp permite amplasarea altor blocuri în apropiere.
Faceți elementele să plutească folosind proprietatea float.
Să aruncăm o privire la aceste opțiuni. Flexbox, afișajul tabelar și alte puncte nu vor fi luate în considerare. Deci, să presupunem că avem 3 subtitluri.
Titlul 1
Titlul 2
Titlul 3
Desigur, toate proprietățile css trebuie scrise într-un fișier separat (style.css), care trebuie conectat la documentul html. În acest fișier, voi scrie un stil minimal, astfel încât subtitlurile noastre să poată fi văzute pur și simplu.
h3( fundal: #EEDDCD; )
h3 ( fundal: #EEDDCD; |
Iată-le pe pagină:
Acolo se comportă ca niște blocuri. Fiecare este situat pe propria linie, există indentări între ele. Dacă doriți, puteți, de asemenea, să setați orice indentări interne și, în general, să faceți orice.
Să convertim în șiruri de caractere și să adăugăm imediat indentări. Pentru a face acest lucru, selectorul h3 trebuie să adauge următoarele proprietăți:
display: inline; umplutură: 30px
Există 2 probleme principale care apar atunci când utilizați această tehnică. Primul este decalajul minim. Se formează datorită faptului că în codul dintre blocuri există un spațiu, care formează această liniuță. Dacă această problemă trebuie rezolvată, există 2 opțiuni principale:
În html, plasați codul blocurilor necesare într-o linie fără spații
Puneți o marjă negativă în dreapta -4 pixeli. Cam atât durează un spațiu.
A doua problemă este că la diferite înălțimi ale elementelor pot apărea probleme de afișare. În general, blocurile plutitoare sunt cea mai bună opțiune. În loc de display: inline-block scriem asta:
Blocuri într-o linie folosind cadrul
Trebuie să spun imediat că, dacă veți folosi orice cadru CSS normal (de exemplu, Bootstrap), atunci este încă mult mai ușor acolo. Tot codul css responsabil pentru aranjarea elementelor a fost deja scris și nu va trebui decât să setați clasele corecte. Pentru a face acest lucru, este suficient să înveți sistemul de grilă și vei putea realiza șabloane receptive cu mai multe coloane fără prea multe dificultăți. Cel puțin va fi mult mai ușor decât să scrii css de la zero.
O altă problemă a scrierii codului de la zero apare chiar atunci când aveți nevoie de un design receptiv. Desigur, îl puteți implementa singur deținând interogări media, dar va fi mult mai dificil dacă aveți un șablon complex.
De exemplu, atunci când trebuie să aveți 4 coloane pe ecrane mari, 3 pe ecrane medii și 2 pe telefoane mobile. Folosind cadre precum Bootstrap, sau mai degrabă folosind grila, aceasta este literalmente o chestiune de câteva minute.
Transferând ușor subiectul în cadrul Bootstrap, voi remarca încă o dată că, dacă vă confruntați cu sarcina de a stabili un șablon adaptiv complex, atunci este pur și simplu un păcat să nu folosiți grila. Pentru a face acest lucru, nici măcar nu este necesar să conectați versiunea completă a cadrului - o puteți personaliza și opri acolo doar ceea ce aveți nevoie cu adevărat.
Puteți învăța cum să lucrați cu cadrul utilizând . Teoria este explicată acolo, dar cel mai important lucru este practica. Veți crea 3 șabloane adaptive și veți obține o experiență grozavă care vă va permite să creați site-uri web la comandă sau pentru dvs. Și dacă doriți să vă familiarizați cu beneficiile și caracteristicile cadrului gratuit, vă sugerez să consultați seria noastră de articole despre Bootstrap, precum și despre crearea unui aspect simplu. Vă doresc succes în amenajarea și construirea site-ului în general.
Sarcină
Faceți o linie orizontală pe pagină.
Soluţie
Liniile orizontale sunt bune pentru a separa un bloc de text de altul. Textul mic cu linii orizontale deasupra și dedesubt atrage mai mult atenția cititorului decât textul normal.
Cu o etichetă
puteți desena o linie orizontală, al cărei aspect depinde de atributele utilizate, precum și de browser. Eticheta se referă la elemente de bloc, astfel încât linia începe întotdeauna pe o linie nouă, iar după aceasta, toate elementele sunt afișate pe linia următoare. Cu multe atribute de etichetă
linia creată prin această etichetă este ușor de gestionat. Dacă conectați și puterea stilurilor, atunci adăugarea unei linii la un document se transformă într-o sarcină simplă.
Linie implicită
afișat în gri și cu efect de volum. Acest tip de linie nu se potrivește întotdeauna cu designul site-ului, așa că dorința dezvoltatorilor de a schimba culoarea și alți parametri ai liniei prin stiluri este de înțeles. Cu toate acestea, browserele au abordări ambigue ale acestei probleme, din cauza cărora va trebui să utilizați mai multe proprietăți de stil simultan. În special, versiunile mai vechi de Internet Explorer folosesc proprietatea color pentru culoarea liniei, în timp ce alte browsere folosesc background-color . Dar asta nu este tot, asigurați-vă că specificați grosimea liniei (proprietatea înălțimii) alta decât zero și eliminați cadrul din jurul liniei setând proprietatea chenar la niciunul. Colectând toate proprietățile pentru selectorul hr, obținem o soluție universală pentru browserele populare (exemplul 1).
Exemplul 1. Linie orizontală
HTML5 CSS 2.1 IE Cr Op Sa Fx
Șir de text
Rezultatul acestui exemplu este prezentat în Fig. 1.
Orez. 1. Linie orizontală colorată
Salutare tuturor! Astăzi vă voi spune cum să faceți o linie orizontală folosind html.
De fapt, nevoia de a face o linie orizontală apare destul de des, de exemplu, atunci când trebuie să separați o parte a textului de alta.
linii orizontale și verticale cu css
Puteți face acest lucru cu css. Pentru a face acest lucru, includ secțiunea necesară de text într-un bloc folosind eticheta div, iar apoi în fișierul style.css sau direct în codul html, scriem proprietăți pentru acest bloc pentru chenarul de sus sau de jos folosind border-top și marginea de jos. Iată un exemplu:
În acest caz, l-am stilat cu css direct din codul html și am făcut marginea de sus o linie continuă și marginea de jos o linie punctată.
Iată cum va arăta pe pagină:
Linie orizontală cu css.
Această metodă are avantajele sale:
- O gamă largă de setări care vă permit să setați aproape orice tip de linie;
- Puteți crea atât linii orizontale, cât și linii verticale. Pentru a face linii verticale, trebuie să schimbați chenar-sus în chenar-stânga și chenar-jos în chenar-dreapta.
Dezavantajele includ volumul relativ al codului.
Cu toate acestea, după cum sa dovedit, puteți insera o linie orizontală în text folosind html. În același timp, nici măcar nu este necesar să urci în css. Eticheta este folosită pentru aceasta.
.
linie orizontală cu etichetă html
Prima caracteristică a acestei etichete este că nu are o etichetă de capăt asociată. Poate fi folosit oriunde în codul html între etichete
Și.
Această etichetă are următoarele atribute:
- Lăţime- definește lungimea liniei noastre orizontale în pixeli sau procente;
- culoare– definește culoarea liniei;
- Alinia– setează alinierea liniei la marginea dreaptă - dreapta, la marginea stângă - stânga, la centru - centru;
- mărimea– grosimea liniei în pixeli.
Iată un exemplu de cod html.
linii orizontale sunt formate dintr-o etichetă nepereche (nu este necesară eticheta de închidere).
și pot fi elemente de design destul de unice. Aspectul textului cu linii HTML orizontale va oferi paginii o anumită logică a prezentării textului, precum și va facilita cititorului să evidențieze blocurile de informații care trebuie studiate secvențial. Etichetă
poate forma linii orizontale de diferite culori, grosimi și lungimi. Și pentru a face acest lucru este destul de simplu, așa cum se arată în exemplele de mai jos.
Apropo, puteți utiliza și proprietățile stilului bloc A linii verticale sunt formate de fapt în aceleaşi blocuri Iată un exemplu de linie verticală roșie în stânga. Iată un exemplu de linie verticală roșie în dreapta. Iată un exemplu de linie roșie orizontală în partea de sus. Iată un exemplu de linie roșie orizontală în partea de jos. Iată un exemplu de linii orizontale și verticale. observați atributul stilului Cerc generat de etichetă Iată un exemplu de linie verticală roșie în stânga. Iată un exemplu de linie verticală roșie în dreapta. Iată un exemplu de linie roșie orizontală în partea de jos. Iată un exemplu de linii orizontale și verticale. Și dacă analizăm aceste exemple, putem trage o concluzie destul de simplă că liniile verticale sunt cel mai bine formate folosind , iar opțiunile de linii intermediare se pot face cu etichetă Practic, liniile orizontale sunt folosite pentru a decora paginile HTML ale unui site, oferindu-le un aspect mai atractiv. Dar pot delimita vizual și informațiile secțiunilor învecinate, adăugând confort cititorilor atunci când le studiază. În general, trage linii orizontale acolo unde trebuie, asta e tot. Există o etichetă specială pentru desenarea liniilor orizontale în HTML. Un exemplu de desen de linii orizontale în HTML
Paragraf. Paragraf. Paragraf. Rezultat în browser Paragraf. Paragraf. Paragraf. După cum puteți vedea, liniile sunt foarte subțiri, nedescriptive și desenate pe toată lățimea disponibilă, așa că acum vom învăța cum să le schimbăm pentru a le face să pară mai atractive. În versiunile mai vechi de HTML, eticheta O culoare poate fi specificată după numele ei în limba engleză sau prin codul HEX al culorii precedat de semnul lire sterline (#). Ei bine, știi deja despre asta de la lecție încolo schimba textul și culoarea de fundal. Dar să vorbim mai detaliat despre redimensionare. După cum vă amintiți din tutorial despre schimbarea fonturilor, există aproximativ zece unități în CSS, dar lățimea liniei poate fi specificat doar în pixeli (px) și procente (%) și grosimeîn general numai în pixeli. Dacă puneți alte unități de măsură, atunci aceasta nu va fi o eroare, dar browserele le vor ignora pur și simplu. Dacă specificați dimensiuni în pixeli, atunci grosimea și lățimea liniei vor depinde de rezoluția monitorului pe care este vizualizat site-ul dvs. (cu cât rezoluția ecranului este mai mare, cu atât linia este mai subțire și mai îngustă). După cum am spus, doar lățimea liniei poate fi specificată ca procent. Dimensiunile procentuale depind întotdeauna și sunt calculate pe baza dimensiunii containerului-element părinte, în interiorul căruia se află eticheta Un exemplu de schimbare a culorii, grosimii și lățimii liniilor orizontale.
Rezultat în browser Când modificați lățimea unei linii orizontale, puteți vedea clar că browserele o centrează întotdeauna. Dacă vrei să-i schimbi poziția, folosește-l în interior Un exemplu de aliniere a liniilor orizontale.
Rezultat în browser Uită-te la primul exemplu al acestui tutorial. Ce culoare crezi că sunt aceste linii? Și iată-l pe cel greșit. Sunt transparente, la fel ca orice elemente ale paginii care nu au o culoare de fundal specificată! Nu crezi? Apoi uită-te la exemplul în care am schimbat culoarea liniilor. Chiar la prima, nu am stabilit culoarea, ci doar am mărit dimensiunea acesteia și nu este această linie transparentă? Astfel încât! Acum voi explica. În mod implicit, browserele desenează în jurul liniilor de chenar, care creează un efect 3D. Deci, atunci când nu creștem grosimea liniilor orizontale, browserele ne arată doar aceste cadre, deoarece grosimea liniei în sine este 0px. Pentru a elimina chenarul din jurul liniei, care de multe ori doar strică aspectul, vom aplica din nou atributul de stil. Și este scris așa:
Teme pentru acasă.
Și
într-o anumită locație. Este adevărat, această opțiune poate să nu fie întotdeauna convenabilă, de exemplu, colorarea uneori nu se justifică întotdeauna, dar în multe cazuri este posibil să se rezolve problemele în acest fel. De exemplu, în interiorul liniei formate etichetă
nu introduceți text. Și în interiorul blocurilor - acest lucru este posibil și practicat în mod constant. Deci, trebuie să alegeți opțiunea în funcție de cerințele de proiectare.
Linii verticale în HTML.
Și
Singurul inconvenient este că eticheta nu este disponibilă în toate browserele.
funcționează la fel, dar aici trebuie să încercați
și ajustați pagina sau utilizați browsere actualizate.
Formarea liniilor orizontale:
Etichetă
inserează o linie orizontală în pagină și are următoarele atribute:Sintaxa etichetelor
:Exemple de linii orizontale în HTML:
Exemple de linii verticale în HTML:
Sintaxa pentru exemple de linii verticale și orizontale în HTML este:
frontieră- stânga(-dreapta): 4px solid #FF0000;:
Dar totul depinde de imaginație și cereri. Deci alegeți și modelați.Cum se desenează o linie orizontală?
. Si el este eticheta bloc, adică creează întreruperi de linie înainte și după sine, astfel încât linia este întotdeauna obținută pe o linie separată. În consecință, poate fi specificat doar în interiorul etichetelor care pot conține elemente de bloc, de exemplu sau . Dar el însuși
nu poate avea conținut deoarece pur și simplu nu are o etichetă de închidere, adică este goală.
Cum se schimbă culoarea, grosimea și lățimea liniilor orizontale?
existau atribute speciale cu care puteai schimba culoarea, grosimea și lățimea liniilor orizontale. Acestea sunt culoarea, dimensiunea și, respectiv, lățimea. Dar în versiunile mai noi, acestea au fost depreciate în favoarea Foilor de stil în cascadă (CSS), așa că, ați ghicit, vom folosi din nou atributul nostru de stil preferat. Sintaxa generală este:
style="background:color" >- culoarea liniei (sau mai bine zis fundalul acesteia).
style="height:size" >- grosimea liniei.
style="width:size" >- lățimea liniei.
stil= „fond:culoare; înălțime:dimensiune; lățime:dimensiune”>
- și puteți specifica toți parametrii simultan, doar nu uitați de punctul și virgulă (;).
. În acest caz, dimensiunile părintelui sunt luate ca 100%. De exemplu, dacă plasăm eticheta
style="width:50%">în interiorul elementului , atunci indiferent de modul în care redimensionăm fereastra browserului sau rezoluția monitorului, lățimea liniei va fi întotdeauna jumătate din lățimea blocului
.
Modificarea poziției liniilor orizontale
alinierea atributului cu următoarele valori:
Cum să eliminați chenarul din jurul liniei?
