- Trei coloane din cauciuc
- Centura din cauciuc, coloane laterale fixe
- Cauciucul stâng, coloanele din dreapta sunt fixate
- Trei coloane cu conținut de cauciuc în față
La impunerea aspecte nu uitați că adăugarea unor elemente HTML-ale cadrului (CSS proprietate de frontieră), domenii externe (CSS marja de proprietate) sau indentare internă (CSS padding de proprietate) mărește dimensiunea, și devine mai mare decât cea indicată în lățime ( lățime) și înălțime (înălțime). Dacă acest lucru nu ia în considerare aspectele de impunere poate „merge“, sau va impunerea anumitor elemente HTML în partea de sus a reciproc. În astfel de situații, este necesar să se reducă lățimea și înălțimea elementelor la dimensiunile cerute.
Trei coloane din cauciuc
Exemplu HTML și CSS: aspectul planului cu trei coloane de cauciuc
Descrierea descrierii
- Fiecare coloană din acest aspect a trei coloane a fost dată la o lățime procentuală utilizând lățimea CSS.
- La coloanele cu meniu și bara laterală, proprietatea floating CSS a fost utilizată pentru a apărea pe laturile paginii, astfel încât blocul de conținut să crească la un nivel cu ei.
- La coloana cu conținut nu se înoate sub id "id" și id "sidebar". ea a specificat marginile laterale (marginea CSS) egală cu lățimea acestor coloane laterale.
- Pentru a vă asigura că blocul cu subsolul nu circulă în jurul coloanei, atunci când unul dintre ele este mai mare decât celelalte, a fost creată o "întrerupere CSS clară: ambele" pentru "subsolul" id.
Centura din cauciuc, coloane laterale fixe
Exemplu HTML și CSS: aspectul layout-ului cu coloane centrale de cauciuc și laterale fixe
Descrierea descrierii
Această structură în trei coloane utilizează aceleași tehnici ca și cea precedentă, cu excepția faptului că valorile procentuale sunt înlocuite cu pixeli.
Cauciucul stâng, coloanele din dreapta sunt fixate
Exemplu HTML și CSS: Layout layout cu coloane stânga din cauciuc și drept fix
Descrierea descrierii
- Meniul și bara laterală au fost setate să plutească la dreapta (floating CSS), astfel încât coloana de conținut să le depășească și să se ridice la un nivel cu ei.
- La coloana cu id = "content", marginea exterioară (marginea dreaptă CSS) era egală cu lățimea totală a meniului și a barei laterale, astfel încât să nu înoate sub ele.
- Pentru ca footerul să nu curgă în jurul coloanei în nici un fel, i sa dat clar CSS: ambele proprietăți pentru a întrerupe această învelire.
Trei coloane cu conținut de cauciuc în față
Exemplu HTML și CSS: Layout layout cu o coloană cu conținut de cauciuc în față
Descrierea descrierii
- La acest aspect trei coloane, conținutul poate fi pus în codul HTML, trebuia să fie introdus într-un bloc suplimentar înveliș cu id = „cont_wrap“. El a fost dat la ascensiunea stanga (CSS float: left), că coloanele laterale se pot deplasa la un nivel cu conținutul, și o lățime în întregime (lățime CSS: 100%) la dimensiunea sa nu a scăzut în timpul ascensiunii ulterioare.
- Pentru ca coloana cu conținut să nu se scufunde sub coloanele laterale, id = "content" a setat marginile laterale (marginea CSS) egale cu lățimea meniului și bara laterală.
- Pentru ca coloanele laterale să-și ia locul, le-a fost dat un câmp negativ la stânga folosind proprietatea CSS margin-left. unde meniul are 100%, iar bara laterală are lățimea acestuia.
- La subsol, o întrerupere a fluxului (CSS clear) a fost setată astfel încât să fie întotdeauna sub coloane.
- Cum sa faci un site web
Pentru ea însăși și gratuit - Tutorial HTML
Pentru începători - CSS Tutorial
Pentru începători - Referințe
Prin HTML și CSS - exemple
HTML și CSS - referințe
Site-uri utile pentru webmasteri - unelte
Programe pentru crearea site-urilor web
Articole similare
Trimiteți-le prietenilor: