Membuat Kotak Menggunakan CSS dan HTML
Membuat Kotak dengan CSS dan HTML
1. Kode HTML untuk membuat kotak
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scaled=1">
<title>Membuat Kotak CSS</title>
<link rel="stylesheet" type="text/css" href="Belakang.css">
</head>
<body>
<div class="box1"><p>Box 1</p></div>
<div class="box2"><p>Box 2</p></div>
<div class="box3"><p>Box 3</p></div>
<div class="box4"><p>Box 4</p></div>
</body>
</html>
2. Kode CSS untuk mengedit kotak
.box1{
width:120px;
height:120px;
margin-top: 100px;
margin-bottom: 20px;
margin-left:200px;
text-align: center;
background:aquamarine;
font-style:monospace;
float:left;
}
.box2{
width:120px;
height:120px;
float:left;
margin-top:100px;
margin-bottom:20px;
margin-left:0px;
text-align:center;
background:magenta;
font-style:monospace;
}
.box3{
position:fixed;
left:208px;
width:120px;
height:120px;
margin-bottom:20px;
margin-top:220px;
text-align:center;
background:darkseagreen;
font-style:monospace;
}
.box4{
position:fixed;
left:328px;
width:120px;
height:120px;
margin-bottom:20px;
margin-top:220px;
text-align:center;
background:lime;
font-style:monospace;
}
3. Hasil akhirnya
.png)
Komentar
Posting Komentar