W3.CSS kartochkalar
Kartochka (card) klassi
w3-card klassi element atrofiga soya qo‘shadi.
Kartochkalar o‘zaro bog‘liq kontentni aniq vizual bo‘limlarga guruhlash uchun qulay.
Odatiy kartochkalarning aksariyati rasm va biroz matndan iborat to‘rtburchaklardir.
Kartochkalar kichik yoki katta, rasmli yoki rasmsiz, soyali yoki soyasiz bo‘lishi mumkin:
John
Architect and engineer
John Doe
1 new friend request
CEO at Mighty Schools. Marketing and Advertising. Seeking a new job and new opportunities.
Travel
Cinque Terre. Liguria. Itali.
Oddiy kartochkalar
London
London is the capital of England.
Misol
<div class="w3-card w3-container">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
O‘zingiz sinab ko‘ring »
Kartochka klasslari
W3.CSS kartochka soyasining turli o‘lchamlarini taqdim etadi:
| Klass | Tavsif |
|---|---|
w3-card |
w3-card-2 bilan bir xil |
w3-card-2 |
2px soyali kartochka |
w3-card-4 |
4px soyali kartochka |
Eslatma
Oldingi versiyalar bilan moslik uchun w3-card va w3-card-2 bir xil chuqurlikdagi soyaga ega.
w3-card
w3-card-2
w3-card-4
Misol
<div class="w3-card w3-container">...</div>
<div class="w3-card-2 w3-container">...</div>
<div class="w3-card-4 w3-container">...</div>
O‘zingiz sinab ko‘ring »
Bo‘limli kartochkalar
Kartochka bir nechta konteynerni o‘z ichiga olishi mumkin.
Bu kartochka ichida yuqori qism (header), kontent sohalari va quyi qism (footer) yaratishni osonlashtiradi.
Project Alpha
A simple project card with separate sections.
Misol
<div class="w3-card-4">
<header class="w3-container w3-blue">
<h2>Project Alpha</h2>
</header>
<div class="w3-container">
<p>A simple project card with separate sections.</p>
</div>
<footer class="w3-container w3-light-grey">
<p>Updated today</p>
</footer>
</div>
O‘zingiz sinab ko‘ring »
Rasmli kartochkalar
Rasmlar va kartochkalar bir-biri bilan tabiiy ravishda uyg‘unlashadi.
Oddiy rasmli kartochka yaratish uchun rasmni konteyner ustiga joylashtiring.
The Alps
Explore mountains, lakes, and alpine villages.
Misollar
<div class="w3-card" style="width:400px;max-width:100%">
<img src="img_snowtops.jpg" alt="The Alps" style="width:100%">
<div class="w3-container">
<h3>The Alps</h3>
<p>Explore mountains, lakes, and alpine villages.</p>
</div>
</div>
O‘zingiz sinab ko‘ring »
<div class="w3-card-4" style="width:300px;max-width:100%">
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Alps">
<div class="w3-container w3-center">
<p>The Italian / Austrian Alps</p>
</div>
</div>
O‘zingiz sinab ko‘ring »
Profil kartochkalari
Kartochkalar ko‘pincha odamlar, profillar, jamoa a’zolari va aloqa ma’lumotlari uchun ishlatiladi.
John Doe
Architect and Engineer
Misol
<div class="w3-card-4">
<img src="img_avatar3.png" alt="Avatar" style="width:100%">
<div class="w3-container">
<h3>John Doe</h3>
<p>Architect and Engineer</p>
<p><button class="w3-button w3-black">Contact</button></p>
</div>
</div>
O‘zingiz sinab ko‘ring »
Mahsulot kartochkalari
Kartochkalar mahsulotlar, xizmatlar va narxlar haqidagi ma’lumotlar uchun ham qulay.
Wireless Headphones
Comfortable headphones with long battery life.
$79
Misol
<div class="w3-container w3-card-4">
<h2>Wireless Headphones</h2>
<p>Comfortable headphones with long battery life.</p>
<h3>$79</h3>
<p><button class="w3-button w3-blue">Add to Cart</button></p>
</div>
O‘zingiz sinab ko‘ring »
Hover effektli kartochkalar
w3-hover-shadow klassi sichqoncha ko‘rsatkichi element ustiga olib borilganda kuchliroq soya qo‘shadi.
Sichqonchani ustimga olib keling
Sichqonchani bu kartochka ustiga olib borganingizda soya kuchayadi.
Misollar
<div class="w3-card w3-hover-shadow w3-container">
<h3>Hover Over Me</h3>
<p>The shadow becomes stronger when you move the mouse over this card.</p>
</div>
O‘zingiz sinab ko‘ring »
<div class="w3-green w3-hover-shadow w3-center">
<p>Hover over me!</p>
</div>
O‘zingiz sinab ko‘ring »
Kartochkalar to‘rini yaratish
Bir nechta o‘zaro bog‘liq elementlar birga ko‘rsatilganda kartochkalar ayniqsa foydali bo‘ladi.
W3.CSS Grid buni osonlashtiradi.
Design
Create clean and attractive interfaces.
Develop
Build responsive websites and applications.
Deploy
Publish your work and share it with the world.
Misol
<div class="w3-grid" style="grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px">
<div class="w3-card w3-container">
<h3>Design</h3>
<p>Create clean and attractive interfaces.</p>
</div>
<div class="w3-card w3-container">
<h3>Develop</h3>
<p>Build responsive websites and applications.</p>
</div>
<div class="w3-card w3-container">
<h3>Deploy</h3>
<p>Publish your work and share it with the world.</p>
</div>
</div>
O‘zingiz sinab ko‘ring »
Hozircha Grid’ni tushunishingiz shart emas.
W3.CSS Grid’ni ushbu darslikning keyingi qismlarida batafsil o‘rganasiz.
Rangli kartochkalar
Rangli kartochkalarni ko‘rsatish uchun shunchaki w3-color klassini qo‘shing:
w3-card
w3-card-2
w3-card-4
Misol (oq kartochkalar)
<div class="w3-panel w3-card">
<p>w3-card</p>
</div>
O‘zingiz sinab ko‘ring »
Misol (sariq kartochkalar)
<div class="w3-panel w3-card-4 w3-yellow">
<p>A yellow card.</p>
</div>
O‘zingiz sinab ko‘ring »
Friend Request
John Doe
Misol
<div class="w3-container w3-card-4 w3-center w3-dark-grey">
<h3>Friend Request</h3>
<img src="img_avatar3.png" alt="Avatar" style="width:80%">
<h5>John Doe</h5>
<button class="w3-button w3-green">Accept</button>
<button class="w3-button w3-red">Decline</button>
</div>
O‘zingiz sinab ko‘ring »
John Doe
1 new friend request
CEO at Mighty Schools. Marketing and Advertising. Seeking a new job and new opportunities.
Misol
<div class="w3-card-4">
<header class="w3-container w3-light-grey">
<h3>John Doe</h3>
</header>
<div class="w3-container">
<p>1 new friend request</p>
<hr>
<img src="img_avatar3.png" alt="Avatar" class="w3-left w3-circle">
<p>President/CEO at Mighty Schools...</p>
</div>
<button class="w3-button w3-block w3-dark-grey">+ Connect</button>
</div>
O‘zingiz sinab ko‘ring »
Kartochka tarkibi
Turli bo‘limlar yaratish uchun kartochka ichiga konteynerlar qo‘shing:
Header
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Misol
<div class="w3-card-4">
<header class="w3-container w3-blue">
<h1>Header</h1>
</header>
<div class="w3-container">
<p>Lorem ipsum...</p>
</div>
<footer class="w3-container w3-blue">
<h5>Footer</h5>
</footer>
</div>
O‘zingiz sinab ko‘ring »
Ob-havo vidjeti
Kartochkalar rasmlar, joylashtirish va maketlarni birlashtirib, to‘liq vidjetlar yaratishi ham mumkin.
MON
TUE
WED
Misol
<div class="w3-card-4">
<div class="w3-display-container w3-text-white">
<img src="img_london.jpg" alt="Lights" style="width:100%">
<div class="w3-xlarge w3-display-bottomleft w3-padding">LONDON 60° F</div>
</div>
<div class="w3-row">
<div class="w3-third w3-center">
<h3>MON</h3>
<img src="img_weather_sun.jpg" alt="sun">
</div>
<div class="w3-third w3-center">
<h3>TUE</h3>
<img src="img_weather_cloud.jpg" alt="cloud">
</div>
<div class="w3-third w3-center w3-margin-bottom">
<h3>WED</h3>
<img src="img_weather_clouds.jpg" alt="clouds">
</div>
</div>
</div>
O‘zingiz sinab ko‘ring »
To‘liq ekranli kiritish formasi
Tobora ko‘proq saytlar ro‘yxatdan o‘tish va tizimga kirish kabi kiritish formalari uchun sahifaning kichik bir qismi o‘rniga butun ekrandan foydalanmoqda.
To‘liq ekranli formalar ko‘pincha yangi sahifaga yo‘naltirish o‘rniga ekran ustidagi qoplama (overlay) yoki modal oynadan foydalanadi.
Class Registration
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!