W3.CSS amaliy misol
Moslashuvchan veb-sayt yaratish
Bu bobda moslashuvchan W3.CSS veb-saytini bosqichma-bosqich yaratamiz.
Oddiy sahifadan boshlab, unga konteynerlar, ranglar, maket, navigatsiya va moslashuvchan dizayn qo‘shamiz.
Oddiy sahifadan boshlang
Oddiy HTML sahifa, viewport sozlamasi va W3.CSS’ga havoladan boshlang:
Misol
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<body>
<h1>My First W3.CSS Website!</h1>
<p>This site will grow as we add more ...</p>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
O‘zingiz sinab ko‘ring »
Elementlarni konteynerlarga joylashtiring
Sahifa kontenti atrofiga umumiy ichki bo‘shliq (padding) qo‘shish uchun w3-container dan foydalaning.
Sarlavha qismini asosiy kontentdan turli konteyner elementlari bilan ajrating:
Misol
<div class="w3-container">
<h1>My First W3.CSS Website!</h1>
<p>This site will grow as we add more ...</p>
</div>
<div class="w3-container">
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
O‘zingiz sinab ko‘ring »
Rang klasslari
W3.CSS rang klasslari elementlarning matn (oldingi fon) va fon ranglarini belgilaydi.
Bu misolda birinchi konteynerga w3-light-grey qo‘shilgan:
Misol
<div class="w3-container w3-light-grey">
<h1>My First W3.CSS Website!</h1>
<p>This site will grow as we add more ...</p>
</div>
<div class="w3-container">
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
O‘zingiz sinab ko‘ring »
O‘lcham klasslari
Matn o‘lchamini o‘zgartirish uchun W3.CSS o‘lcham klasslaridan foydalanish mumkin.
Bu misolda w3-jumbo va w3-xxlarge ishlatilgan:
Misol
<div class="w3-container w3-light-grey">
<h1 class="w3-jumbo">My First W3.CSS Website!</h1>
<p class="w3-xxlarge">This site will grow as we add more ...</p>
</div>
<div class="w3-container">
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
O‘zingiz sinab ko‘ring »
Semantik elementlardan foydalaning
Semantik HTML elementlari sahifa tuzilishini tushunishni osonlashtiradi.
W3.CSS klasslari <header>, <main> va <footer> kabi semantik elementlar bilan ham, <div> bilan ham ishlaydi.
Misol
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<body>
<header class="w3-container w3-light-grey">
<h1 class="w3-jumbo">My First W3.CSS Website!</h1>
<p class="w3-xxlarge">This site will grow as we add more ...</p>
</header>
<div class="w3-container">
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html>
O‘zingiz sinab ko‘ring »
Moslashuvchan ustunlar
W3.CSS moslashuvchan ko‘p ustunli maketlar yaratishni osonlashtiradi.
Ustunlar turli ekran o‘lchamlariga avtomatik moslashadi.
Klassik W3.CSS moslashuvchan ustunlar tizimi uchun:
Eslatma: Yangi maketlar uchun w3-flex yoki w3-grid dan ham foydalanishingiz mumkin. Qator va ustun klasslari oddiy moslashuvchan maketlar uchun hamon foydali.
w3-rowyokiw3-row-paddingdan boshlangw3-third,w3-halfvaw3-quarterkabi klasslardan foydalaning- Matn kontentingizni grid ustunlari ichiga joylashtiring
Bu misol kengligi teng uchta ustunni qanday yaratishni ko‘rsatadi:
Misol
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
O‘zingiz sinab ko‘ring »
Bu misol kengligi teng to‘rtta ustunni qanday yaratishni ko‘rsatadi:
Misol
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
O‘zingiz sinab ko‘ring »
Kengligi turlicha bo‘lgan ustunlar
Bu misol o‘rtadagi ustuni birinchi va oxirgi ustunlardan kengroq bo‘lgan uch ustunli maket yaratadi:
Misol
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
O‘zingiz sinab ko‘ring »
Navigatsiya panellari
An’anaviy navigatsiya panelini yaratish uchun w3-bar dan foydalaning:
Misol
<nav class="w3-bar w3-black w3-large">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</nav>
O‘zingiz sinab ko‘ring »
Yon navigatsiya
Yon navigatsiya uchun w3-sidebar dan foydalaning.
Bu misol navigatsiya panelini sahifa kontentining chap qismi ustida ochadi:
<nav class="w3-sidebar w3-bar-block w3-black w3-card" style="display:none" id="mySidebar">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a class="w3-bar-item w3-button" href="#">Link 2</a>
<a class="w3-bar-item w3-button" href="#">Link 3</a>
</nav>
Yon panelni ochish va yopish uchun JavaScript’dan foydalaning:
const sidebar = document.getElementById("mySidebar");
function w3_open() {
sidebar.style.display = "block";
}
function w3_close() {
sidebar.style.display = "none";
}
O‘zingiz sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!