<html>
<head>
<title>Floats</title>
<style type="text/css">
#a
{
margin:20px;
border:2px solid black;
width:600px;
height:600px;
border-radius:20px 20px 20px 20px;
background-color: yellow;
}
#b
{
margin:20px;
border:2px solid black;
width:500px;
height:150px;
border-radius:40px 40px 40px 40px;
background-color: orange;
}
#c
{
margin:20px;
border:2px solid black;
width:150px;
height:300px;
float:right;
border-radius:30px 30px 30px 30px;
background-color: pink;
}
#d
{
margin:20px;
border:2px solid black;
width:150px;
height:300px;
float:left;
border-radius:30px 30px 30px 30px;
background-color: blue;
}
#e
{
margin:20px;
border:2px solid black;
width:150px;
height:300px;
float:right;
border-radius:30px 30px 30px 30px;
background-color: grey;
}
#f
{
margin:20px;
border:2px solid black;
width:100px;
height:100px;
float:right;
border-radius:50px 50px 50px 50px;
background-color: red;
}
#g
{
margin:20px;
border:2px solid black;
width:100px;
height:100px;
float:right;
border-radius:50px 50px 50px 50px;
background-color: red;
}
#h
{
margin:20px;
border:2px solid black;
width:100px;
height:100px;
float:right;
border-radius:50px 50px 50px 50px;
background-color: red;
}
#i
{
margin:20px;
border:2px solid black;
width:100px;
height:100px;
float:right;
border-radius:10px 10px 10px 10px;
background-color: blue;
}
#j
{
margin:20px;
border:2px solid black;
width:100px;
height:100px;
float:right;
border-radius:10px 10px 10px 10px;
background-color: cyan;
}
#k
{
margin:20px;
border:2px solid black;
width:100px;
height:100px;
float:right;
border-radius:10px 10px 10px 10px;
background-color: green;
}
</style>
</head>
<body>
<div id="a">
<div id="b"></div>
<div id="c">
<div id="f"></div>
<div id="i"></div>
</div>
<div id="d">
<div id="g"></div>
<div id="j"></div>
</div>
<div id="e">
<div id="h"></div>
<div id="k"></div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment