1. Ana Sayfa
  2. Css
  3. Css Dersleri – Div Uygulama Örneği Site 1

Css Dersleri – Div Uygulama Örneği Site 1

Css Dersleri – Div Uygulama Örneği Site 1

Aşağıdaki uygulamayı yaparak css div kullanım uygulama örneklerimize devam ediyoruz.


<!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>CSS - K utu Modeli Özellikleri</title>
<style type="text/css">
	.site_siniri {width: 960px; margin:0 auto;}	
	.turuncu_banner {width: 960px; height: 120px; background-color: orange; line-height:120px;text-align:center; }
	.sol_menu { float:left; width: 260px; height: 350px; background-color: cornflowerblue; line-height:350px;text-align:center;}
	.sag_sinir{ float:left; width:700px; height: 350px; background-color: white; }
	.sag_icerik_ust { width: 700px; height: 200px; background-color: deepskyblue; line-height:200px; text-align:center;}
	.sag_icerik_alt { width:700px; height: 150px; background-color: deeppink; line-height:150px; text-align:center;  }
	.sari_alt { width: 960px; height: 80px; background-color: yellow; line-height:80px; text-align:center; clear:both;}

</style>
</head>

<body>
  <div class="site_siniri">
		<div class="turuncu_banner">BANNER ALANI</div>
   		<div class="sol_menu">MENÜ</div>
		<div class="sag_sinir">
        		<div class="sag_icerik_ust">İÇERİK - ÜST</div>
          		<div class="sag_icerik_alt">İÇERİK - ALT</div>                               
        </div>
   		<div class="sari_alt">ALT</div>
	</div>
</body>
</html>

Yorum Yap