Cum să utilizați aspectul css a site-ului pentru a crea două coloane, css

În acest articol considerăm regulile site-ului pas cu pas aspect cu două coloane. Codul ne va permite să adăugați un antet și subsol, care acoperă cele două difuzoare.

intrare

Folosind proprietatea float pentru a crea două coloane

Există mai multe metode de utilizare CSS pentru a crea un site cu două coloane. În acest ghid, vom folosi proprietatea float. să plaseze o parte din altă coloană. În multe feluri, această metodă este mai simplă și mai flexibilă decât metoda de poziționare absolută a elementelor. De asemenea, vă permite să adăugați antet și subsol opțională, care acoperă cele două difuzoare.

Eu însumi am folosit această metodă, deoarece aspectul vieții mele a fost creat atunci când eram încă doar au făcut primii pași în dezvoltarea pe CSS și nu știu nimic despre regulile de bază de impunere. Dar nu vă faceți griji. Am creat unele pagini demo care utilizează acest format, le veți vedea mai târziu.

parte Codul HTML este destul de simplu. Avem nevoie de doar două blocuri div. una pentru fiecare coloană:

Cuvântul „navigation Menu“ și „Conținut“ sunt doar indicii pentru bara laterală de navigare și conținutul principal. Mai târziu, eliminați aceste cuvinte, atunci când blocurile situate în conținutul real. div „container“ - un bloc care conține două coloane. Acesta poate fi utilizat în cazul în care doriți să aplicați anumite stiluri pentru ambele coloane.

Codul CSS de mai jos folosește un procent ( „%“) pentru determinarea lățimii ambelor coloane. Din moment ce acestea sunt măsurate în termeni relativi, aceasta se va extinde sau contracta pentru a umple fereastra browser-ului, indiferent de ce lățime are. De exemplu, dacă redimensionați fereastra browser-ului, șablonul va rearanja coloană pentru a potrivi cel mai bine marginile ferestrei.

Codul CSS este foarte simplu:

În conformitate cu regulile de aspectul site-ului, codul CSS trebuie să fie plasat în secțiunea a unei pagini web sau într-un fișier foaie de stil extern.

Deoarece codul de mai sus funcționează în practică, pot fi văzute aici.

Cum funcționează: Explicația CSS-codul

De obicei „float: right“ definește modul în care blocul DIV este derivat dintr-un flux de document comun și plasat în dreptul tuturor celorlalte elemente care curge în jurul ei pe stânga. Primul DIV bloc. care se găsește în pagina HTML. schimburi în primul rând.

In exemplul de mai sus „#content“ primul mutat la dreapta și este situat într-o lățime de 80% din lățimea ferestrei browser-ului. Următoarea noastră regulă afișează, de asemenea „#navbar“ din fluxul de documente și mută-l spre dreapta.

Din moment ce avem deja un element flotant în această poziție. În conformitate cu regulile specifica aspectul adaptiv, al doilea bloc este plasată pe partea stângă a celulei curente, în cazul în care există suficient spațiu pentru ea. În caz contrar, acesta va fi plasat sub primul element. Cu aceasta în minte, suma pe ambele părți ale cutiei ar trebui să fie egală cu 100% sau mai puțin, în caz contrar nu vom avea suficient spațiu pentru a le plasa unul lângă altul.

Cum am pus coloana de navigare pe dreapta

Codul dat anterior găzduit meniul de navigare în coloana din stânga. Dacă doriți meniul de navigare situat la dreapta, schimba codul după cum urmează:

Puteți vedea acest cod în acțiune aici prin apăsarea butonului din meniul de navigare coloana din dreapta.

Cum să se adapteze în mod corect lățimea

În conformitate cu normele stabilite stiluri de aspect tehnice definite mai sus, pentru a defini lățimea laterală a coloanei, în 20% din lățimea ferestrei browser-ului, iar coloanele de conținut - 80%, pentru un total de 100%.

Dacă doriți să modificați aceste valori, asigurați-vă că totalul lor sumă este egală sau mai mică de 100%, în caz contrar browser-ul va plasa o coloană sub altul.

În cazul în care una dintre coloane este deplasat sub altul: cum să-l stabilească

Dacă găsiți că unul dintre vorbitori să fie plasate sub o altă parte în loc să fie plasată lângă alta, ceea ce înseamnă că lățimea totală a ambelor coloane este mai mare de 100% din lățimea ferestrei browser-ului.

Aceasta se poate întâmpla, chiar dacă utilizați valorile mele, „20%“ și „80%“. De exemplu, dacă adăugați un câmp, frontiere, și umplutură pentru una sau ambele coloane. Lățimea acestor coloane va crește, ceea ce va conduce la faptul că totalul va depăși 100%.

reguli de compatibilitate și aspectul browsere implică două moduri de a rezolva această problemă:

Reduceți lățimea coloanei, în timp ce browser-ul nu le va afișa așa cum doriți. Dar, amintiți-vă că procentele sunt relative unități de măsură. Acesta este legat de lățimea ferestrei browser-ul utilizatorului. Prin urmare, dacă ați testat aspectul pe sistemul dvs., și a constatat că, în plus față de px stânga padding 10 la unul dintre vorbitori și reducând lățimea cu 1%, funcționează perfect, nu se poate concluziona că 1% = 10 pixeli. Cu alte cuvinte, 1% 1024 diferă de la 1% până în 1920 pixeli, și așa mai departe. Asigurați-vă că luați în considerare diferențele în lățimea ferestrei în alte browsere și dimensiunea ecranului;
Ceea ce prefer la o soluție este de a crea în blocuri „#navbar“ și „#content“ DIV imbricate. și a pus-o toate umplutură, margini, frontiere, și conținutul real. Astfel, este posibil să părăsească blocurile vechi externe 20% și 80%, fără a avea grija ajustările pentru margini, liniuțe etc.

De exemplu, în site-ul demo cu două coloane, utilizați următorul HTML-cod pentru a crea un DIV bloc imbricată:

Prin scris anterior un stil CSS, adăugați următoarele proprietăți pentru „#innercontent“ și „#innernavbar“:

CSS pentru „#content“ și „#navbar“ sunt identice cu cele descrise în prima jumătate a acestui articol.

Deoarece padding este aplicată DIV blocul interior. Dimensiunile unității exterioare rămân neschimbate, și vom continua să aibă un aspect două coloane.

Cum de a adăuga antet și subsolul site-ului, întinzându-se pe ambele coloane

Pentru a crea un antet și subsol, folosind structura cu două coloane, modificați codul HTML și se adaugă două unități DIV suplimentare:

CSS Adăugați următorul cod la foaia de stil existent. Plasați-l după stiluri care au fost setate anterior pentru:

Dacă doriți să introduceți text în antet este centrat, se adaugă următorul cod. În caz contrar, setați separat stilul de capac nu este necesar:

Aceeași caracteristică poate fi adăugat la subsol la textul este centrat.

Codul de mai sus poate fi văzut în acțiune pe site-ul demo cu un capac, un subsol și două coloane.

concluzie

Prin codul CSS de mai sus, va fi capabil de a crea site-uri cu două coloane.

Traducerea articolului «Cum de a proiecta un aspect două coloane pentru site-ul dvs. Utilizarea CSS» a fost pregătit de o echipă de proiect prietenos Web design de la A la Z.