Page 337 - SK tingkatan 5
P. 337
h4
{
background-color: lightgrey;
position: static;
bottom: 70px; 5
width: 10%;
left: 200px;
height: 100px;
}
</style>
</head>
<body>
<h1>Laman Web Sekolah (Absolute)</h1>
<h2>Sekolah 1 (Relative)</h2> 1
<h3>Sekolah 2 (Fixed)</h3>
<h4>Sekolah 3 (Static)</h4>
</body>
</html>
Rajah 3.3.70 Contoh HTML dan CSS (kedudukan)
Output:
Rajah 3.3.71 Contoh Output (kedudukan)
Penerangan:
1 Terdapat empat komponen pada laman web, iaitu <h1>, <h2>, <h3>, dan <h4>.
2 Gaya position <h1> telah ditukar kepada absolute, iaitu mengikut penetapan CSS, top: 10px,
left:50px, height:100px pada kedudukan laman web.
3 Gaya position <h2> telah ditukar kepada relative, iaitu mengikut kedudukan asal dan mengikut
penetapan top:70x, left:300px, height:100px.
4 Gaya position <h3> telah ditukar kepada fixed, iaitu kedudukan <h3> sentiasa berada di tempat yang
sama walaupun pengguna melihat laman web itu di kawasan yang lain. Ketetapan position <h3> ialah
bottom:70px, left:200px, height:100px.
5 Gaya position <h4> telah ditukar kepada static, iaitu kedudukan tidak akan berubah atau tidak
mengikut ketetapan. Kedudukan itu akan mengikut turutan pada laman web.
BAB 3 Pengaturcaraan Berasaskan Web 329
