Përdorimi i CSS float Property për Dizajnimin e Layouts Faqe Web
Prona e CSS është një pronë shumë e rëndësishme për paraqitjen. Kjo ju lejon të poziciononi hartën e faqes suaj pikërisht ashtu siç doni ta shfaqni, por për ta përdorur atë ju duhet të kuptoni se si funksionon.
Në një fletë stili, prona e notave CSS duket si kjo:
. drejtë {noton: drejtë; }
Kjo i tregon shfletuesit se gjithçka me klasën e "të drejtës" duhet të shtyhet në të djathtë.
Ju do ta caktoni kështu:
klasa = "e drejtë" />
Çfarë mund të notosh me CSS float Property?
Nuk mund të notosh çdo element në një faqe interneti. Ju mund të notoni vetëm elementë të nivelit të bllokut . Këto janë elementet që marrin një bllok hapësire në faqe, si imazhe (), paragrafë (), ndarje (), dhe lista ().
Elemente të tjera që ndikojnë në tekst, por nuk krijojnë një kuti në faqe quhen elementë inline dhe nuk mund të lundrojnë. Këto janë elemente si span (), ndërprerje (), theksim i fortë () ose italik ().
Ku A Fluturojnë?
Ju mund të notoni elemente në të djathtë ose në të majtë. Çdo element që ndjek elementin e lundrueshëm do të rrjedhë rreth elementit të lundrueshëm në anën tjetër.
Për shembull, nëse notoj një imazh në të majtë, çdo tekst ose elementë të tjerë që pasojnë do të rrjedhin rreth saj në të djathtë. Dhe nëse notoj një imazh në të djathtë, çdo tekst ose elementë të tjerë pas tij do të rrjedhin rreth saj në të majtë. Një imazh që vendoset në një bllok teksti pa ndonjë stil të notuar aplikohet në të, do të shfaqet megjithatë shfletuesi është caktuar për të shfaqur imazhe.
Kjo zakonisht është me vijën e parë të tekstit vijues të shfaqur në pjesën e poshtme të imazhit.
Sa larg do të notojnë?
Një element që është lundruar do të lëvizë deri në të majtë ose të djathtë të elementit të kontenierëve sa të mundet. Kjo rezulton në disa situata të ndryshme në varësi të mënyrës se si shkruhet kodi.
Për këta shembuj, unë do të lundroj një element të vogël DIV në të majtë:
- Nëse elementi i lundrueshëm nuk ka një gjerësi të paracaktuar, ajo do të marrë sa më shumë hapësirë horizontale sa është e nevojshme dhe e disponueshme, pavarësisht nga nota. Shënim: Disa shfletues përpiqen të vendosin elementë përveç elementëve të lundrueshëm kur gjerësia nuk është e definuar - zakonisht duke i dhënë elementit jo të lundruar vetëm një hapësirë të vogël hapësire. Pra, duhet të përcaktoni gjithmonë një gjerësi në elementet e lundrueshëm.
- Nëse elementi kontejner është elementi HTML, DIV i lundrueshëm do të ulet në anën e majtë të faqes.
- Nëse elementi i kontejnerit është i përmbajtur nga diçka tjetër, DIV i lundrueshëm do të ulet në anën e majtë të enës.
- Ju mund të fikni elementë të lundrueshëm dhe kjo mund të rezultojë në noton që përfundon në një vend të habitshëm. Për shembull, ky noton është një DIV i lundur në të djathtë brenda një DIV të drejtpërdrejtë.
- Elementet e lundruara do të ulen pranë njëri-tjetrit nëse ka vend në enë. Për shembull, ky enë ka tre elementë të gjerë DIV 100px të lundruara në një enë 400px të gjerë.
Ju mund të përdorni edhe gjithandej për të krijuar një paraqitje të galerisë së fotove. Ju vendosni çdo tabelë (ajo punon më mirë kur ato janë të gjithë të njëjtën madhësi) në një DIV me titullin dhe noton elementët DIV në enë.
Pa marrë parasysh se sa e gjerë është dritarja e shfletuesit, pamjet e vogla do të formohen në mënyrë uniforme.
Çaktivizimi i Float
Pasi të dini se si të merrni një element për të notuar, është e rëndësishme të dini se si ta fikni notonin. Ju fikni notonin me pronën e qartë të CSS. Ju mund të pastroni gjithandej të majta, të drejtë ose të dyja:
qartë: majtas;
qartë: e drejtë;
qartë: të dyja;
Çdo element që vendosni për pronën e qartë do të shfaqet nën një element që është hedhur në atë drejtim. Për shembull, në këtë shembull, dy paragrafët e parë të tekstit nuk janë pastruar, por e treta është.
Luaj me vlerën e qartë të elementëve të ndryshëm në dokumentet tuaja për të marrë efekte të ndryshme të paraqitjes.
Një nga Layouts më interesante është një seri imazhe poshtë kolonës së djathtë ose të majtë pranë paragrafëve të tekstit. Edhe në qoftë se teksti nuk është aq i gjatë sa të kalojë imazhin, mund të përdorni të qarta në të gjitha imazhet për të siguruar që ato të shfaqen në kolonën e jo në krahasim me imazhin e mëparshëm.
HTML (përsëris këtë paragraf):
Duis aute irure dolor sed do elusmod tim incididunt in reprehenderit in voluptate. Cupidatat nuk proident, labore dhe keqe.
CSS (për të notuar imazhet në të majtë):
img.float {float: left;
qartë: majtas;
diferencë: 5px;
}
Dhe në të djathtë:
img.float {float: right;
i qartë: të drejtë;
diferencë: 5px;
}
Përdorimi i Floats për Layout
Sapo të kuptoni se si funksionon prona e notarit, mund të filloni ta përdorni për të nxjerrë faqet tuaja të internetit. Këto janë hapat që bëj për të krijuar një faqe interneti të notuar:
- Hartoni pamjen (në letër ose në një vegël grafike ose në kokën time).
- Përcaktoni se ku do të jenë ndarjet e faqes.
- Përcaktoni gjerësinë e kontejnerëve të ndryshëm dhe elementët brenda tyre.
- Fluturoj gjithçka. Edhe elementi më i jashtëm i kontenierit është lundruar në të majtë në mënyrë që unë të di ku do të jetë në lidhje me portën e shfletuesit.
Për sa kohë që ju e dini widths (përqindjet janë gjobë) të seksioneve tuaj layout, ju mund të përdorni pronën noton për të vënë ato ku ata i përkasin në faqe. Dhe gjëja e bukur është, ju nuk duhet të shqetësoheni sa më shumë që modeli i kutisë të jetë i ndryshëm për Internet Explorer ose Firefox.