September 21, 2016
<html>
<head>
<title>TUGAS !</title>
<head>
<style>
.bungkus1
{width:400px;
height:150px;
line-height:50px;
text-align:center;
float:left;
}
.kotak1
{width:100px;
height:100px;
text-align:center;
line-height:100px;
background-color:red;
float:left;}
.kotak2
{width:100px;
height:100px;
text-align:center;
line-height:100px;
background-color:green;
float:left;}
.kotak3
{width:100px;
height:100px;
text-align:center;
line-height:100px;
background-color:yellow;
float:left;}
.kotak4
{width:100px;
height:100px;
text-align:center;
line-height:100px;
background-color:blue;
float:left;}
.bungkus2
{width:200px;
height:300;
line-height:50px;
text-align:center;
float:left;
margin-left:50px;
}
.persegi1
{width:100px;
height:100px;
text-align:center;
line-height:100px;
background-color:red;
float:left;}
.persegi2
{width:100px;
height:100px;
text-align:center;
line-height:100px;
background-color:green;
float:left;}
.persegi3
{width:100px;
height:100px;
text-align:center;
line-height:100px;
background-color:yellow;
float:left;}
.persegi4
{width:100px;
height:100px;
text-align:center;
line-height:100px;
background-color:blue;
float:left;}
.bungkus3
{width:200px;
height:300;
line-height:50px;
text-align:center;
float:left;
margin-left:50px;
}
.bulat1
{width:100px;
height:100px;
text-align:center;
line-height:100px;
background-color:red;
float:left;
border-radius:100px 0px 0px 0px;}
.bulat2
{width:100px;
height:100px;
text-align:center;
line-height:100px;
background-color:green;
float:left;
border-radius:0px 100px 0px 0px;}
.bulat3
{width:100px;
height:100px;
text-align:center;
line-height:100px;
background-color:yellow;
float:left;
border-radius:0px 0px 0px 100px;}
.bulat4
{width:100px;
height:100px;
text-align:center;
line-height:100px;
background-color:blue;
float:left;
border-radius:0px 0px 100px 0px;}
</style>
</head>
<body>
<div class="bungkus1"><font color="blue"><h2>Latihan 4</h2></font>
<div class="kotak1">RED</div>
<div class="kotak2">GREEN</div>
<div class="kotak3">KUNING</div>
<div class="kotak4">BIRU</div>
</div>
<div class="bungkus2"><font color="blue"><h2>Latihan 5</h2></font>
<div class="persegi1">RED</div>
<div class="persegi2">GREEN</div>
<div class="persegi3">KUNING</div>
<div class="persegi4">BIRU</div>
</div>
<div class="bungkus3"><font color="blue"><h2>Latihan 6</h2></font>
<div class="bulat1">RED</div>
<div class="bulat2">GREEN</div>
<div class="bulat3">KUNING</div>
<div class="bulat4">BIRU</div>
</div>
</body>
</html>
dan maka akan jadi seperti ini.
NB: Jika anda bingung dengan semua atribut anda bisa komentar dan bertanya.
0 komentar:
Posting Komentar