Gebruik 'n CSS-stylblad
Verander dit:
<link rel="stylesheet" href="">
Tot hierdie:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
Om die stylblad te gebruik, moet jy 'n klas by die HTML-elemente voeg wat jy wil styl:
<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>
HTML / CSS-skelet
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
</style>
<script src=""></script>
<body>
<img src="img_la.jpg" alt="LA" style="width:100%">
<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>
</body>
</html>
Klik op die "Probeer dit self"-knoppie om te sien hoe dit werk!
Probeer om die agtergrondkleur van die houer van teal na swart te verander.
Het jy dit gemaak?
Baie geluk!
Jy het pas die basiese beginsels van die gebruik van 'n stylblad geleer.
Hou aan lees!
Hoe om responsief te wees
HTML-kode
<div class="w3-row">
<div class="w3-third">
<img src="img_avatar.png" alt="Name1" style="width:100%">
</div>
<div class="w3-third">
<img src="img_avatar.png" alt="Name2" style="width:100%">
</div>
<div class="w3-third">
<img src="img_avatar.png" alt="Name3" style="width:100%">
</div>
</div>
Hoe om 'n kaart te skep
Gereed vir iets regtig gevorderd?
Wat van 'n besigheidskaartjie in HTML?
Insluitend beide beeld en teks.
Play with the code below for a while, until you think you got a grip on it.
After that, we will start coding really fantastic HTML pages.
John Doe
Engineer
HTML Code
<div class="w3-card" style="width:200px">
<img src="img_avatar.png" style="width:100%">
<div class="w3-container w3-center">
<p class="w3-xlarge">John Doe</p>
<p>Engineer</p>
</div>
</div>