CSS İle Kutu Yapımı

Şimdi size güzel ve kolay bir çalışma sunacağım arkadaşlar CSS ile yapılmış kutu çalışması...Tasarım ve kodlar tamamen bana aittir dilerseniz buna benzer bir çalışma http://megep.meb.gov.tr/ adresinde de mevcuttur herkese kolay gelsin.

GÖRÜNÜM

                                                                       

KODLAR

<html>

<head>

<meta charset="utf-8">

<title>Css İle Kutu Yapımı</title>

<style type="text/css">

.genel

{

 width:75%; 

margin:auto; 

margin-top:100px;

margin-bottom:auto;               

}

.tasarim1

{

float:left;

background-color:purple;

border:4px solid yellow;

font-weight:bold;

font-family:Bradley Hand ITC;

font-size:40px;

color:white;

width:150px;

height:150px;

text-align:center;

vertical-align:middle;

line-height:150px;

}

.tasarim2

{

float:right;

background-color:pink;

border:4px solid black;

font-weight:bold;

font-family:Algerian;

font-size:45px;

width:150px;

height:150px;

text-align:center;

vertical-align:middle;

line-height:150px;

}

.tasarim3

{

clear:both;

background-color:green;

border:4px solid red;

font-weight:bold;

font-family:New Times Roman;

font-size:60px;

color:red;

width:99%;

height:150px;

text-align:center;

vertical-align:middle;

line-height:150px;

}

</style> 

</head>

<body>

<div class="genel">

<div class="tasarim1">

KUTU1

</div>

<div class="tasarim2">

KUTU2

</div>

<div class="tasarim3">

KUTU3

</div>

</body>
</html>