Tingnan natin ang disenyo ng grid ng site at paghiwalayin ang mga indibidwal na bahagi. Tuklasin natin kung bakit napakapakinabangan ng float, pati na rin ang tanyag na pamamaraan para sa pagbuo ng unang web grid mula sa tatlong mga stream at isang footer ng site.
Upang pag-aralan ang pagtatayo ng grid ng isang site, kailangan mong maunawaan kung ano ang isang "daloy". Ang daloy ay ang mga elemento ng site, sunud-sunod na matatagpuan. Halimbawa, ang mga ito ay maaaring mga elemento ng div na magkakasunod-sunod bilang default. Ngunit ang pag-agos ay maaaring muling ayusin, at ang posisyon ng mga elemento ng block ay maaaring mabago.
Upang makontrol ang daloy, ginagamit namin ang pag-aari ng float, na maaaring ilagay ang bloke sa kaliwa o kanang bahagi. Sapat na itong magsulat sa CSS file:
"class or block name" {float: right / left; }
Ang tanging sagabal ng float ay ang kakayahang "overlap" sa isang bloke sa tuktok ng isa pa.
Upang maiwasan ang pagtakbo, gumagamit kami ng malinaw: pareho - itatakda ng pag-aari na ito ang daloy sa paligid ng bloke. Itinakda namin ang lapad at taas, bilang maximum at minimum, upang ang halaga ay nabuo ayon sa laki ng nilalaman (teksto, mga imahe). Margin - itakda ang halaga sa auto upang ang mga panlabas na margin ay awtomatikong nabuo depende sa lokasyon ng bloke.
Dahil ang float ay maaaring maglagay ng mga bloke sa dalawang direksyon, kaugalian na hatiin ang site sa mga stream - kaliwa at kanan. Kung ang programmer ay nangangailangan lamang ng dalawang stream, pagkatapos ay iniiwan niya ang kaliwa at kanang float, ngunit kung may higit sa dalawa, pagkatapos ay inaayos niya ang mga margin gamit ang margin. Paano ito nangyayari:
.column1 {float: left; lapad: 65px; min-taas: 50px; margin-kanan: 9px; // 9px mula sa gitnang kahon}
2 stream:
.column2 {float: left; // sa kaliwang bloke, ngunit walang "magkakapatong", dahil inilapat namin ang lapad ng margin: 80px; min-taas: 50px; }
3 stream:
.column3 {float: kanan; lapad: 65px; min-taas: 50px; }
Pakikitungo sa footer (.footer):
.footer {malinaw: pareho; // balutin ang magkabilang panig}
Ganito kami gumawa ng isang grid para sa site na gumagamit ng float, na binubuo ng tatlong mga stream.
