Ders 10

CSS ve HTML Dersleri | Dreamweaver Kurulumu | CSS Programlama Dersleri

Şimdiye kadar öğrendiğimiz CSS özelliklerini kullanarak bir örnek yapalım.

KODLAR

<!doctype html>

<html>

<head>

<title>CSS Apartman</title>

.apt{

width: 350px;

height: auto;

margin: 70px auto;

}

.baca{

width: 25px;

height: 50px;

background: #000;

margin: 0 0 0 250px;

}

.cati{

width: 250px;

height: 250px;

background: #993333;

margin: -50px 0 0 50px;

transform:rotate(45deg);

z-index:1;

position:relative;

}

.govde{

width: 330px;

height: 485px;

background: #0099CC;

margin: -125px auto;

z-index:2;

position:relative;

padding: 30px 0 0 20px;

}

.p1{

width: 50px;

height: 50px;

background: #FFCC66;

border: 3px solid;

float:left;

margin: 0 0 75px 0;

}

.p2{

width: 50px;

height: 50px;

background: #FFCC66;

border: 3px solid;

float:left;

margin: 0 0 75px 65px;

}

.p3{

width: 50px;

height: 50px;

background: #FFCC66;

border: 3px solid;

float:left;

margin: 0 0 75px 75px;

}

.p4{

width: 50px;

height: 50px;

background: #FFCC66;

border: 3px solid;

float:left;

}

.p5{

width: 50px;

height: 50px;

background: #FFCC66;

border: 3px solid;

float:left;

margin: 0 0 0 50px;

}

.kapitabela{

width: 90px;

height: 150px;

float: left;

margin: -60px 0 0 55px;

}

.tabela{

width:88px;

height: 25px;

background: #fff;

font: bold 11px tahoma;

text-align: center;

border: 1px;

}

.kapi{

width: 88px;

height: 68px;

margin: 5px 0 0 0;

background: #000;

padding:50px 0 0 0

}

.solperde{

width: 10px;

height:50px;

background:#FFF;

border-radius: 0 0 20px 0;

border-right:1px solid #000;

float:left

}

.sagperde{

width: 10px;

height:50px;

background:#FFF;

border-radius: 0 0 0 20px;

border-left:1px solid #000;

margin: 0 0 0 27px;

float:left

}

.kapikolu{

width:15px;

height:3px;

background:#fff;

margin:0 0 0 15px;

}

</style>

</head>

<body>

<div class="tabela">Kardeşler Apartmanı</div>

</div>

</div>

</body>

</html>