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 în timpul aspectului aproape fiecărui șablon, așa că, în orice caz, cu toții trebuie să cunoaștem și să aplicăm metodele de bază de modificare a comportamentului blocurilor.

Înainte de a ne uita la cele mai comune tehnici, aș dori să-mi amintesc 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 plasate pe o singură linie, dar cele blocate nu. Desigur, diferențele nu se termină aici, dar aceasta este diferența principală. Blocurile pot avea deja umplutură în partea de sus și de jos (cele cu litere mici nu au) și li se pot aplica mai multe proprietăți.

Modalități de bază de aliniere a blocurilor î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 necesare bloc-line. 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ă ne concentrăm asupra acestor opțiuni. Nu vom lua în considerare Flexbox, afișaj de masă și alte aspecte. 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ă fie pur și simplu vizibile.

h3( fundal: #EEDDCD; )

h3 ( fundal: #EEDDCD;

Iată-le pe pagină:

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 umplutură internă și să faceți ce doriți.

Să-l convertim în linii și să adăugăm imediat indentări. Pentru a face acest lucru, selectorul h3 trebuie să adauge următoarele proprietăți:

afișaj: inline; umplutură: 30px;

Există 2 probleme principale care apar atunci când utilizați această tehnică. Prima este indentarea minimă. Se formează datorită faptului că în cod există un spațiu între blocuri, care formează această indentare. Dacă această problemă trebuie rezolvată, există 2 opțiuni principale:

În html, plasați codul blocurilor necesare într-o linie fără spații

Adăugați o marjă negativă la dreapta de -4 pixeli. Atât ia un spațiu.

A doua problemă este că dacă elementele au înălțimi diferite, pot apărea probleme de afișare. În general, cea mai bună opțiune sunt blocurile plutitoare. În loc de display: inline-block scriem asta:

Blocuri într-o linie folosind cadrul

Voi spune imediat că, dacă veți folosi orice cadru CSS normal (de exemplu, Bootstrap), atunci totul este încă mult mai simplu. Tot codul CSS responsabil de aranjarea elementelor a fost deja scris și tot ce trebuie să faceți este să setați clasele corecte. Pentru a face acest lucru, trebuie doar să învățați sistemul de grilă și veți putea crea ș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ă provocare a scrierii codului de la zero vine atunci când aveți nevoie de design responsive. 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 ar trebui să aveți 4 coloane pe ecrane mari, 3 pe ecrane medii și 2 pe telefoane mobile Cu ajutorul cadrelor precum Bootstrap, sau mai degrabă cu ajutorul grilei sale, implementarea acestui lucru este literalmente o chestiune de doar. câteva minute.

Traducând fără probleme 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 trebuie să conectați versiunea completă a cadrului - o puteți personaliza și vă opriți acolo doar ceea ce aveți nevoie cu adevărat.

Puteți învăța cum să lucrați cu cadrul folosind . Teoria este explicată acolo, dar cel mai important, există practică. Veți crea 3 șabloane adaptive și veți obține o experiență excelentă care vă va permite să proiectați site-uri web la comandă sau pentru dvs. Și dacă doriți să vă familiarizați cu avantajele și capacitățile cadrului în mod gratuit, vă sugerez să vă uitați prin seria noastră de articole despre Bootstrap, precum și despre designul de layout simplu. Vă doresc succes în aspect și în construirea site-ului web în general.

Salutări tuturor cititorilor. Din când în când, meșterii se confruntă cu problema modului de a realiza o linie orizontală sau verticală folosind HTML sau CSS. Despre asta vă voi spune astăzi.

Linii în CSS

Există mai multe moduri de a face linii. Un astfel de mod este utilizarea CSS. Sau, mai degrabă, folosind Border. Să ne uităm la un exemplu.

Și asta se va întâmpla ca urmare.

Linie orizontală și verticală folosind css.

Liniile pot fi trase în CSS folosind operatorul Border. Dacă aveți nevoie doar de un dreptunghi cu o lățime fixă ​​a cadrului, atunci puteți pur și simplu să utilizați acest operator și să îi dați o valoare. De exemplu, chenar:5px solid #000000; va însemna că marginile blocurilor au o lățime egală cu 5 pixeli de culoare neagră.

Cu toate acestea, dacă trebuie să setați nu toate limitele, ci doar unele, atunci trebuie să specificați ce granițe sunt necesare și ce valoare va avea fiecare dintre ele. Aceștia sunt operatorii:

• border-top – setează valoarea chenarului superior
• border-bottom – setează valoarea marginii de jos
• border-left – setează valoarea marginii din stânga
• border-right – setează valoarea chenarului drept.

Linie verticală și orizontală în HTML

Puteți crea linii în HTML în sine. Pentru a face acest lucru, puteți utiliza eticheta hr.

În acest caz, va fi trasă o linie orizontală, cu un pixel înălțime și cu lățime completă.

Dar acestei etichete i se pot da și niște valori.

• Lăţime– setează valoarea lățimii liniei.
• Culoare– setează culoarea liniei.
• Alinia– setează alinierea la stânga, centru, dreapta
• Dimensiune– setează valoarea grosimii liniei în pixeli.

Folosind eticheta hr, puteți seta și o linie verticală. Dar în acest caz, va trebui să recurgeți din nou la stiluri.

În acest caz, o linie verticală va fi desenată cu o sută de pixeli înălțime, un pixel gros și cinci pixeli indentați.

Concluzie.

Ei bine, acum știi cum poți seta o linie verticală și orizontală. Liniile pot fi setate atât pe site-uri obișnuite folosind HTML, cât și pe un site care utilizează un CMS, de exemplu, WordPress, dar în acest caz, va trebui să treceți la modul HTML.

Ei bine, dacă mai aveți întrebări, adresați-le în comentarii.

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 în partea de sus și de jos atrage mai multă atenția cititorului decât textul obișnuit.

Folosind 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. Datorită numeroaselor atribute ale etichetei

---

linia creată prin această etichetă este ușor de gestionat. Dacă conectați și puterea stilurilor, atunci adăugarea unei linii la un document devine o sarcină simplă.

Linie implicită

---

afișat în culoare gri și cu efect de volum. Acest tip de linie nu se potrivește întotdeauna designului 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 mixte ale acestei probleme, ceea ce înseamnă că 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, ar trebui să specificați și o grosime a liniei (proprietatea înălțimii) alta decât zero și să eliminați cadrul din jurul liniei setând proprietatea de chenar la niciunul.

Punând împreună toate proprietățile pentru selectorul hr, obținem o soluție universală pentru browserele populare (exemplul 1).

---

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

Culoarea liniei orizontale

Șir de text