Aralash ustunli maket
CSS yordamida aralash ustunli maket to‘rini (grid) yaratishni o‘rganing.
Ekran kengligiga qarab 4 ustun, 2 ustun va to‘liq kenglikdagi ustunlar o‘rtasida o‘zgaradigan moslashuvchan ustunli maket yaratishni o‘rganing.
Moslashuvchanlik effektini ko‘rish uchun brauzer oynasi o‘lchamini o‘zgartiring:
Aralash ustunli maket qanday yaratiladi
1-qadam) HTML qo‘shing:
Misol
<div class="row">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
2-qadam) CSS qo‘shing:
Ushbu misolda kengligi 900px dan kichik ekranlarda ikki ustunga aylanadigan to‘rt ustunli maket yaratamiz. Kengligi 600px dan kichik ekranlarda esa ustunlar yonma-yon joylashish o‘rniga bir-birining ustiga taxlanadi.
Misol
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
}
/* Clear floats */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
O‘zingiz sinab ko‘ring »
Maslahat: Veb-sayt maketlari haqida ko‘proq bilish uchun CSS veb-sayt maketi darsligimizga o‘ting.
Maslahat: Moslashuvchan veb-dizayn va gridlar haqida ko‘proq bilish uchun CSS moslashuvchan veb-dizayn darsligimizga o‘ting.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!