Css Dersleri – Div Uygulama Örneği Site 2

admin tarafından

21 Aralık 2017 1269 kez okundu Okuma süresi: 2dk, 0sn

Css Dersleri – Div Uygulama Örneği Site 2

Bir başka css div uygulaması ile css derslerimize devam ediyoruz aşağıdaki uygulama div ile kutuların yerleşimi esnasında float kullanımı ile kullanılabilecek bir örnek…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#kutu{width:1000px;
height:600px;
background-color:#FF0;
margin:auto;}

#kutu1{width:250px;
height:200px;
background-color:#090;
color:#FFF;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bolder;
line-height:200px;
vertical-align:middle;

float:left;}

#kutu2{width:750px;
height:400px;
background-color:#006;
color:#FFF;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bolder;
line-height:400px;
vertical-align:middle;
float:right;}

#kutu3{width:250px;
height:200px;
background-color:#300;
color:#FFF;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bolder;
line-height:250px;
vertical-align:middle;

float:left;}


#kutu4{width:250px;
height:200px;
background-color:#F63;
color:#FFF;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bolder;
line-height:200px;
vertical-align:middle;

float:left;}

#kutu5{width:250px;
height:200px;
background-color:#F06;
color:#FFF;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bolder;
line-height:200px;
vertical-align:middle;
float:left;}

#kutu6{width:250px;
height:200px;
background-color:#C0F;
color:#FFF;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bolder;
line-height:200px;
vertical-align:middle;

float:left;}

#kutu7{width:250px;
height:200px;
background-color:#30F;
color:#FFF;
text-align:center;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight:bolder;
line-height:200px;
vertical-align:middle;
float:left;}
</style>
</head>

<body>
<div id="kutu">
<div id="kutu1">KUTU1</div>
<div id="kutu2">KUTU2</div>
<div id="kutu3">KUTU3</div>
<div id="kutu4">KUTU4</div>
<div id="kutu5">KUTU5</div>
<div id="kutu6">KUTU6</div>
<div id="kutu7">KUTU7</div></div>
</body>
</html>

Bu İçeriğe Tepkin Ne Oldu?