CSS Ders-11 Basit Site iskeleti Yapımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS Ders-11 Basit Site iskeleti Yapımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3387)
RAPOR ET
CSS derslerimize devam ediyoruz.Bu derste basit bir site iskeleti yapacaz.Yapacağımız iskeletin görüntüsü.

http://ustaderslik.com/resim/ders/rk05j.png

Burda önce mantığa bakalım.İç içe geçmiş bir çok alan var.CSS ile sitemizi yaparken bu şekilde ayrıntılı bir iskelet yapıp icerikleri o alanlara yerleştirecez.

gördüğünüz gibi tüm siteyi içine alan açık gri bir alan var.Onun içinde sitenin 3 önemli bölgesini oluşturacak alan yapmışız.Orta yani mavi kısım içeriği saklayacak olan alana 3 alan daha koymuğuz.solda menüler için alan ortaya icerik için sağa reklam değişik içerikler için bir alan yapmışız.

Sitelerimizi tasarlarken mantık budur.

Kodlarımız :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.ana{width:900px;background:#ddd;margin:auto;}
.ust{width:900px;height:100px;background:red;margin-bottom:25px;}
.alt{width:900px;height:50px;background:green;margin-bottom:25px;}

.orta{width:900px;height:450px;background:blue;margin-bottom:25px;}
.menu{width:200px;height:300px;background:#999;float:left;margin-right:20px; }
.icerik{width:460px;height:450px;background:#333;float:left;margin-right:20px; }
.yanicerik{width:200px;height:450px;background:#666;float:right;}

.temiz{clear:both;}
</style>
</head>
<body>

<div class="ana">
<div class="ust"></div>
<div class="orta">
<div class="menu"></div>
<div class="icerik"></div>
<div class="yanicerik"></div>
<div class="temiz"></div>
</div>
<div class="alt"></div>
</div>

</body>
</html>



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol