Veb: CSS

W3.CSS qo‘shish

Oldingi bobda oddiy HTML sahifa yaratdik.

Endi W3.CSS’ni qo‘shamiz va sahifani bezash uchun W3.CSS klasslaridan foydalanamiz.

Buni:

Bunga o‘zgartiring:

Endi HTML’da W3.CSS klasslaridan foydalanishingiz mumkin.

Misol

<div class="w3-container w3-black"> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </div>

w3-container klassi kontentga ichki bo‘shliq (padding) qo‘shadi.

w3-black klassi qora fon va oq matn qo‘shadi.

HTML va W3.CSS skeleti

Misol

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Title</title> <link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css"> </head> <body> <img src="img_la.jpg" alt="Los Angeles" style="width:100%"> <main class="w3-container w3-black"> <h1>This is a Heading</h1> <p>This is a paragraph.</p> <p>This is another paragraph.</p> </main> <script src=""></script> </body> </html>

O‘zingiz sinab ko‘ring »

w3-black ni boshqa W3.CSS rang klassiga o‘zgartirib ko‘ring.

Moslashuvchan ustunlar

W3.CSS moslashuvchan maket klasslarini o‘z ichiga oladi.

Bu misolda uchta teng ustun yaratish uchun w3-row va w3-third ishlatilgan:

Misol

O‘zingiz sinab ko‘ring »

Kartochka yaratish

W3.CSS yordamida kartochkalar ham yaratish mumkin.

Bu misolda w3-card, w3-container va w3-center birlashtirilgan:

John Doe

Engineer

Misol

<div class="w3-card" style="width:200px"> <img src="img_avatar.png" alt="John Doe" style="width:100%"> <div class="w3-container w3-center"> <p class="w3-xlarge">John Doe</p> <p>Engineer</p> </div> </div>

O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish