Veb: musiqa guruhi
Musiqa guruhi veb-sahifasini qanday yaratish mumkin
Bu misol W3.CSS yordamida musiqa guruhi uchun moslashuvchan veb-sayt yaratishni ko‘rsatadi.
Sahifada Flexbox va Grid W3.CSS navigatsiya, slayd-shou, rasm va forma klasslari bilan birga ishlatiladi.
Skelet yaratish
Sahifa tuzilishi va katta rasmdan boshlang.
Skelet
<html lang="en">
<title>The Band</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<body id="home" class="w3-content">
<img src="img_la.jpg" alt="The Band" style="width:100%">
</body>
</html>
O‘zingiz sinab ko‘ring »
Slayd-shou qo‘shish
Bitta rasmni slayd-shou bilan almashtiring.
Slayd-shou
<script src="https://www.w3schools.com/lib/w3.js"></script>
<!-- Slides -->
<img class="slides" src="img_la.jpg" style="width:100%">
<img class="slides" src="img_ny.jpg" style="width:100%">
<img class="slides" src="img_ch.jpg" style="width:100%">
<script>
w3.slideshow(".slides",1500);
</script>
O‘zingiz sinab ko‘ring »
Eslatma!
Slaydlarni aylantirish uchun slayd-shouga W3.JS kutubxonasi kerak.
Navigatsiya qo‘shish
Navigatsiya panelini yaratish uchun Flexbox’dan foydalaning.
Navigatsiya
<!-- Navigation (Stays on Top) -->
<nav class="w3-flex w3-top w3-black">
<a href="#home" class="w3-button">Home</a>
<a href="#about" class="w3-button">About</a>
<a href="#members" class="w3-button">Members</a>
<a href="#contact" class="w3-button">Contact</a>
</nav>
O‘zingiz sinab ko‘ring »
"Biz haqimizda" bo‘limini qo‘shish
Guruh haqida biroz ma’lumot qo‘shing.
The Band
This is our band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Biz haqimizda
<!-- About -->
<section id="about" class="w3-container w3-padding-32">
<h1 class="w3-center">The Band</h1>
<p>This is our band website. Lorem ipsum dolor sit amet...</p>
</section>
O‘zingiz sinab ko‘ring »
Guruh a’zolarini qo‘shish
Guruh a’zolarini ko‘rsatish uchun Grid’dan foydalaning.
Guruh a’zolari
John
Paul
Lisa
Guruh a’zolari
<!-- Members -->
<section id="members" class="w3-container w3-padding-32">
<h2 class="w3-center">Band Members</h2>
<div class="w3-grid w3-center"
style="grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px">
<div>
<img src="img_bandmember.jpg"
alt="John" style="width:60%">
<p>John</p>
</div>
<div>
<img src="img_bandmember.jpg"
alt="Paul" style="width:60%">
<p>Paul</p>
</div>
<div>
<img src="img_bandmember.jpg"
alt="Lisa" style="width:60%">
<p>Lisa</p>
</div>
</div>
</section>
O‘zingiz sinab ko‘ring »
Mavjud kenglik o‘zgarganda Grid ustunlar sonini avtomatik moslaydi.
Aloqa bo‘limini qo‘shish
Aloqa ma’lumotlari va aloqa formasini qo‘shing.
Contact
<section id="contact" class="w3-container w3-center w3-padding-32">
<h2 class="w3-wide">CONTACT</h2>
<p>Chicago, US</p>
<p>Phone: +00 151515</p>
<p>Email: mail@mail.com</p>
<p class="w3-opacity"><i>Fan? Drop a note!</i></p>
<form action="/action_page.php" target="_blank">
<input class="w3-input" type="text" placeholder="Name" required name="Name">
<input class="w3-input" type="email" placeholder="Email" required name="Email">
<input class="w3-input" type="text" placeholder="Message" required name="Message">
<p>
<button class="w3-button w3-black" type="submit">SEND</button>
</p>
</form>
<img src="map.jpg" alt="Map" style="width:100%">
</section>
O‘zingiz sinab ko‘ring »
To‘liq veb-sahifa
Tayyor sahifada turli vazifalar uchun turli W3.CSS vositalari ishlatiladi:
| Qism | Maket |
|---|---|
| Navigatsiya | Flexbox |
| Slayd-shou | W3.JS |
| Biz haqimizda | Oddiy hujjat oqimi |
| Guruh a’zolari | Grid |
| Contact | Oddiy hujjat oqimi |
To‘liq sahifani sinab ko‘ring »
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!