CSS veb-sayt maketi
CSS veb-sayt maketi
Veb-sayt ko‘pincha bir nechta bo‘limlarga bo‘linadi: yuqori header, navigatsiya menyusi, asosiy kontent va footer kabi:
Tanlash uchun juda ko‘p turli layout dizaynlari bor. Biroq yuqoridagi tuzilma eng keng tarqalganlaridan biri va biz uni bu darslikda batafsil ko‘rib chiqamiz.
CSS bosh sarlavha (Header)
Header odatda saytning yuqori qismida joylashadi va ko‘pincha logotip yoki sayt nomini o‘z ichiga oladi:
Misol
header {
background-color: #f1f1f1;
text-align:
center;
padding: 10px;
}
Natija
My Header
CSS navigatsiya paneli
Navigatsiya paneli tashrif buyuruvchilarga saytingiz bo‘ylab yo‘l topishga yordam beradigan havolalar ro‘yxatini o‘z ichiga oladi:
Misol
/* Style the topnav */
ul.topnav {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
}
/* Style links in topnav */
ul.topnav li a {
display: block;
color: #f1f1f1;
padding: 14px 16px;
text-decoration:
none;
}
/*
Change color on hover */
ul.topnav li a:hover {
background-color: #dddddd;
color: black;
}
Natija
CSS maket kontenti
Sayt kontenti qanday ko‘rsatilishi ko‘pincha foydalanuvchilar qurilmasiga bog‘liq. Eng keng tarqalgan layoutlar:
- 1 ustunli layout (ko‘pincha mobil brauzerlar uchun ishlatiladi)
- 2 ustunli layout (ko‘pincha planshetlar va noutbuklar uchun ishlatiladi)
- 3 ustunli layout (faqat kompyuterlar uchun ishlatiladi)
1-column:
2-column:
3-column:
Bu yerda 3 ustunli layout yaratamiz va ekran kengligi 600px dan kichik bo‘lganda uni 1 ustunli layoutga o‘zgartiramiz:
Misol
div.flex-container {
display: flex;
/* Show the flex
items horizontally */
flex-direction: row;
}
div.flex-container > div {
margin: 10px;
}
/* Use media
query and show the flex items vertically if screen width is less than 600px
*/
@media screen and (max-width:600px) {
div.flex-container {
flex-direction: column;
}
}
Natija
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Maslahat: CSS @media qoidasi haqida CSS media so‘rovlari bobimizda ko‘proq bilib oling.
Maslahat: CSS Flexbox haqida batafsil CSS Flexbox bobimizda o‘rganing.
CSS oddiy va qotirilgan (fixed) footer
Footer veb-sahifaning pastki qismiga joylashtiriladi. Ko‘pincha mualliflik huquqi va aloqa ma’lumotlari kabi ma’lumotlarni o‘z ichiga oladi.
Quyidagi misol bazaviy footer ushlashini ko‘rsatadi:
Misol
footer {
background-color: #f1f1f1;
text-align:
center;
padding: 8px;
}
Natija
Quyidagi misol scroll qilishdan qat’i nazar sahifa pastki qismida har doim ko‘rinib turadigan qat’iy (fixed) footer’ni ko‘rsatadi:
Misol
footer {
position: fixed;
bottom: 0;
left:
0;
width: 100%;
background-color: #f1f1f1;
padding: 8px;
text-align: center;
z-index: 1000;
}
O‘zingiz sinab ko‘ring »
CSS moslashuvchan veb-sayt
Ushbu misolda biz moslashuvchan navigatsiya paneli va moslashuvchan tarkibdan iborat moslashuvchan veb-sayt yaratish uchun flexbox bilan birga media so‘rovlaridan foydalanamiz.
W3Schools Spaces haqida eshitganmisiz? Bu yerda veb-saytingizni noldan yaratishingiz yoki shablondan foydalanishingiz mumkin.
Bepul boshlang ❯W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!