Membuat Kotak Dengan CSS
Hal yang pertama membuat file index nya dahulu.
.png)
INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="box1" style="background: red;"><p>BOX 1</p></div>
<div class="box2" style="background: white;"><p>BOX 2</p></div>
<div class="box3" style="background: yellow;"><p>BOX 3</p></div>
<div class="box4" style="background: green;"><p>BOX 4</p></div>
</body>
</html>
Setelah itu membuat file css nya dengan nama style.css
STYLE.CSS
body {
background-color: skyblue;
}
p {
font-family: times new roman;
position: center;
}
.box1{
width: 120px;
height: 120px;
margin-bottom: 20px;
text-align: center;
float: left;
margin-left: 200px;
margin-top: 100px;
}
.box2{
width: 120px;
height: 120px;
margin-bottom: 20px;
text-align: center;
float: left;
margin-left: 0px;
margin-top: 100px;
}
.box3{
position: fixed;
left: 208px;
width: 120px;
height: 120px;
margin-bottom: 20px;
text-align: center;
margin-top: 220px;
}
.box4{
position: fixed;
left: 328px;
width: 120px;
height: 120px;
margin-bottom: 20px;
text-align: center;
margin-top: 220px;
}
DAN INILAH HASILNYA
.png)
.png)
Komentar
Posting Komentar