css aspect al site-ului - un aspect bloc folosind css

Atribute și valori

  • background-color: - definește culoarea de fundal.
  • margin: 0 auto - determină unitatea de centrare.
  • lățime: - specifică lățimea în pixeli sau ca procent.
  • înălțime: - determină înălțimea.
  • float: left - definește ambalajul de pe partea stângă.
  • border-dreapta: - determină proprietățile marginea dreaptă.
  • clar: ambele - anulează folia de pe ambele părți.

Notă granița punctată din coloana din stânga, care într-un fel nu ajunge în partea de jos. Aceste nuanțe sunt ușor de îndepărtat prin atritsatelnogo valorile atributelor de marjă. De exemplu, marja de jos: -15px tăiați excesul (a se vedea exemplul de mai jos).

HTML dur blocuri de aspect CSS în trei coloane

EXEMPLU rigid sit aspect bloc în trei coloane.

Blochează codificare aspect de masă preferat. Blocuri de aspectul site-ului oferă mai multe opțiuni pentru formatare și design. Blocuri de cuibar necesită abilitatea de a lucra cu atributele marja, padding, float, clar.

De exemplu, atributul float permite de a asigura mai multe blocuri, succesive, orizontale pentru a împărți pagina web verticală.

cauciuc HTML blocuri de aspect CSS

Un exemplu de un site aspect de cauciuc folosind blocuri.

Vedem că coloana din dreapta a alunecat în jos → adăugați la selectorul de div.right_col setare de margine-top: -20px.

Atribute și valori

  • -Padding stânga: - definește padding din partea stângă.
  • margine-top: - definește spațiul exterior de sus.
  • -Marginea din stânga: - determină apariția liniuță din stânga.
  • min lățime: - definește lățimea minimă.
  • max-width: - definește lățimea maximă.

Coloana din stânga cu parametrul float: left acoperă de fapt un drept, deoarece dreptul nu include fluxul de atribute. La rândul său, setarea margin-left: 200px definește adâncitura din coloana din dreapta, astfel încât să nu se suprapună. Nu putem pune o folie pentru coloana din dreapta, pentru că în acest caz va fi invalid min-lățime și max-lățime.

Notați valoarea padding. lățimea graniței punctată dimensiunea.

Cauciuc + HTML dur blocuri de aspect CSS

Exemplu de site-ul de aspect CSS.

Puneți coloana din stânga și dreapta în recipientul

. Centrați-l folosind marja: 0 auto. Scoateți spațiul din partea de jos a blocului de parametri margin-bottom: -16px.

padding Parametru: 10px 10 pixeli adaugă la fiecare parte, astfel încât containerul

înălțimea de 420 de pixeli a fost stabilit, iar apoi a fost tăiat în partea de jos 16 pixeli.

Se pare că nu este atât de dificil. Dă-i drumul.

Exemplu de aspect strâns site-ul CSS folosind tabele.

vertical-align aliniază conținutul celulei de sus, se aplică numai la celule.

cauciuc HTML CSS codificare tabele

Exemplu de cauciuc aspectul site-ului CSS folosind tabele.

Cu oday aspect de bloc, rigid sau cauciuc este cel mai frecvent aspectul printre site-uri profesionale.

Lecția site-ul de referință privind aspectul de poziționare CSS CSS 23. CSS: font

Salvați și partajați servicii