Css Dersleri-Div Kullanım Örnekleri

Css ile div kullanım örneklerimize devam ediyoruz uygulamamızda bize verilen aşağıdaki tasarımı oluşturmak için gerekli olan kodlamayı yapacağız.

css_div_kullanim

Bizden istenen div örneğinde yan yana 150px boyutunda 4 kutu ve kutular arasında 10px boşluk olacak aşağıdaki büyük dikdörtgen için ise 630px genişlik ve 80px yükseklik değerlerini kullanacağız.

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Bilisimogretmeni.com Css Div Kullanım Örneği</title>
<style type="text/css">
#kutu1 {
height:150px;
width:150px;
background-color:#000000;
color:white;
float:left;
margin-right:10px;
}/*http://www.bilisimogretmeni.com/ */
#kutu2 {
height:150px;
width:150px;
background-color:#996600;
float:left;
margin-right:10px;
}
#kutu3 {
height:150px;
width:150px;
background-color:#333366;
float:left;
margin-right:10px;
}/*http://www.bilisimogretmeni.com/ */
#kutu4 {
height:150px;
width:150px;
background-color:#990000;
float:left;
}
#kutu5 {height:80px;
width:630px;
background-color:#6633FF;
margin-top:10px;
clear:both;
float:left;
}
</style>
</head>
<body>
<div id="kutu1"></div>
<div id="kutu2"></div>
<div id="kutu3"></div>
<!--http://www.bilisimogretmeni.com/ -->
<div id="kutu4"></div>
<div id="kutu5"></div>
</body>
</html>

Şimdi biraz daha değişik bir örnek yapacağız

css_div_kullanim2

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Bilisimogretmeni.com Css Div Kullanım Örneği</title>
<style type="text/css">
#genel {
padding:5px;
width:600px;
margin:auto;
}
#kutu1 {
height:150px;
width:150px;
background-color:#990000;
color:white;
font-family:'Century Gothic';
font-size:35px;
font-weight:bold;
text-align:center;
vertical-align:middle;
line-height:150px;
float:left;
}
#kutu2 {
height:150px;
width:150px;
background-color:#003366;
color:white;
font-family:'Century Gothic';
font-size:35px;
font-weight:bold;
line-height:150px;
text-align:center;
vertical-align:middle;
float:left;
margin-left:10px;
}
#kutu3 {
height:70px;
width:590px;
background-color:#330033;
color:white;
font-family:'Century Gothic';
font-size:35px;
font-weight:bold;
text-align:center;
vertical-align:middle;
line-height:70px;
clear:both;
float:left;
margin-bottom:10px;
margin-top:10px;
}
#kutu4 {
height:150px;
width:150px;
color:white;
background-color:#003366;
font-family:'Century Gothic';
font-size:35px;
/*http://www.bilisimogretmeni.com/ */
font-weight:bold;
text-align:center;
vertical-align:middle;
line-height:150px;
margin-right:10px;
float:right;
}
#kutu5 {
width:150px;
height:150px;
background-color:#990000;
color:white;
font-family:'Century Gothic';
font-size:35px;
text-align:center;
vertical-align:middle;
line-height:150px;
float:right;
font-weight:bold;
margin-right:10px;
}
#kutu6 {
background-color:#330033;
color:white;
height:70px;
width:590px;
font-family:'Century Gothic';
/*http://www.bilisimogretmeni.com/ */
font-size:35px;
font-weight:bold;
text-align:right;
vertical-align:middle;
line-height:70px;
clear:both;
float:left;
margin-top:10px;
}
</style>
</head>
<body>
<div id="genel">
<div id="kutu1">Html</div>
<div id="kutu2">Css</div>
<div id="kutu3">Web Tasarım ve Programlama</div>
<div id="kutu5">Vb.Net</div>
<div id="kutu4">C#</div><!--http://www.bilisimogretmeni.com/ -->        
<div id="kutu6">Programlama</div>
</div>
</body>
</html>
  • mehmet

    hocam eline sağlık siteyi çok beğendim

    • BilisimOgretmeni

      teşekkürler 🙂

X

Pin It on Pinterest

X