CSS ile web site yapımı

Css ile aşağıdaki temayı oluşturalım.Adım adım gidelim.Sırasıyla temel ayarlar, gövde (body) , banner ,içerik,footerı ayrı başlıklarda oluşturalım.En altta ise kodların genel görünümü yer almakta.


A. TEMEL AYARLAR

  • İlk olarak klasör oluşturalım.İçine index.html ve stil.css dosyalarını oluşturalım.
  • Stil dosyasını çağıralım.”index.html” sayfasının <head> etiketleri arasına eklememiz gereken html kodları aşağıda.
    <head>
    <link rel=”stylesheet” type=”text/css” href=”stil.css” />
    </head>

B. GÖVDE (BODY) BÖLÜMÜ

  • Body bölümünün css kodları aşağıdaki gibi stil.css dosyasına yazalım.
.body{ margin:0px; padding:0px; background:#FFF;}

C. BANNER BÖLÜMÜ

index.html stil.css
<div class=“banner”>
<div class=“logo”></div>
<div class=“reklam”></div>
<div class=“ikon”></div>
<div class=“temizle”></div>
</div>
.banner {margin:0px auto; background:#0FF; width:1200px; height:130px;}
.logo {margin:10px; background:#FF0; width:200px; height:110px; float:left;}
.reklam{ margin-top:20px; margin-right:10px; background:#FF0; width:728px; height:90px; float:left;}
.ikon{ margin-top:20px; margin-right:10px; background:#FF0; width:232px; height:90px; float:right;}
.temizle {clear: both;}

 

C. İÇERİK BÖLÜMÜ

Sol (840 piksellik bölüm) ve sağ (300 piksellik bölüm) olmak üzere iki ana div alanı görünüyor.

 

index.html
<div class=“icerik”>
<div class=“icerik-sol”>
<div class=“icerik-sol-kutu”><div class=“icerik-sol-kutu-ust”></div><div class=“icerik-sol-kutu-alt”></div></div>
<div class=“icerik-sol-kutu”><div class=“icerik-sol-kutu-ust”></div><div class=“icerik-sol-kutu-alt”></div></div>
<div class=“icerik-sol-kutu”><div class=“icerik-sol-kutu-ust”></div><div class=“icerik-sol-kutu-alt”></div></div>
<div class=“icerik-sol-kutu”><div class=“icerik-sol-kutu-ust”></div><div class=“icerik-sol-kutu-alt”></div></div>
<div class=“temizle”></div>
</div>
<div class=“icerik-sag”>
<div class=“icerik-sag-reklam”></div>
<div class=“icerik-sag-konu-baslik”></div>

<div class=“icerik-sag-konu-yorumlar”></div><div class=“icerik-sag-konu-yorumlar”></div>
<div class=“icerik-sag-konu-yorumlar”></div><div class=“icerik-sag-konu-yorumlar”></div>
</div>
<div class=“temizle”></div>
</div>
stil.css
.icerik { margin:5px auto; background:#99C; width:1200px; height:420px;}
.icerik-sol{ margin:20px; background:#FCF; width:840px; height:380px; float:left;}
.icerik-sag{ margin-top:20px; margin-right:20px; background:#FCF; width:300px; height:380px; float:right;}
.icerik-sol-kutu{ margin:5px; background:#FF0; width:200px; height:370px; float:left;}
.icerik-sol-kutu-ust{ margin:5px; background:#6F9; width:190px; height:190px; }
.icerik-sol-kutu-alt{ margin-left:5px; margin-bottom:5px; background:#969; width:190px; height:165px; }
.icerik-sag-reklam{ margin:10px; background:#3CF; width:280px; height:140px; }
.icerik-sag-konu-baslik{ margin-right:5px; margin-left:5px; margin-bottom:5px; background:#09F; width:290px; height:30px; font-size:12px; font-family:Georgia; }
.icerik-sag-konu-yorumlar{ margin-top:5px; margin-left:5px; background:#0FF; width:290px; height:40px; font-size:12px; font-family:Georgia; }

D.FOOTER BÖLÜMÜ

<div class=“footer”></div> .footer{ margin:5px auto; background:#6C999C; width:1200px; height:100px;}

 

KODLAR GENEL GÖRÜNÜM

index.html

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”stil.css” />
</head>

<body>
<div class=”banner”>
<div class=”logo”></div>
<div class=”reklam”></div>
<div class=”ikon”></div>
<div class=”temizle”></div>
</div>
<div class=”icerik”>
<div class=”icerik-sol”>
<div class=”icerik-sol-kutu”><div class=”icerik-sol-kutu-ust”></div><div class=”icerik-sol-kutu-alt”></div></div>
<div class=”icerik-sol-kutu”><div class=”icerik-sol-kutu-ust”></div><div class=”icerik-sol-kutu-alt”></div></div>
<div class=”icerik-sol-kutu”><div class=”icerik-sol-kutu-ust”></div><div class=”icerik-sol-kutu-alt”></div></div>
<div class=”icerik-sol-kutu”><div class=”icerik-sol-kutu-ust”></div><div class=”icerik-sol-kutu-alt”></div></div>
<div class=”temizle”></div>
</div>
<div class=”icerik-sag”>
<div class=”icerik-sag-reklam”></div>
<div class=”icerik-sag-konu-baslik”></div>

<div class=”icerik-sag-konu-yorumlar”></div>
<div class=”icerik-sag-konu-yorumlar”></div>

<div class=”icerik-sag-konu-yorumlar”></div>
<div class=”icerik-sag-konu-yorumlar”></div>

</div>
<div class=”temizle”></div>
</div>
<div class=”footer”></div>
<body>
</body>
</html>

stil.css

@charset “utf-8”;
.body{ margin:0px; padding:0px; background:#FFF;}

.banner{ margin:0px auto; background:#0FF; width:1200px; height:130px;}
.logo{ margin:10px; background:#FF0; width:200px; height:110px; float:left;}
.reklam{ margin-top:20px; margin-right:10px; background:#FF0; width:728px; height:90px; float:left;}
.ikon{ margin-top:20px; margin-right:10px; background:#FF0; width:232px; height:90px; float:right;}
.icerik{ margin:5px auto; background:#99C; width:1200px; height:420px;}
.icerik-sol{ margin:20px; background:#FCF; width:840px; height:380px; float:left;}

.icerik-sag{ margin-top:20px; margin-right:20px; background:#FCF; width:300px; height:380px; float:right;}
.temizle {clear: both;
}
.footer{ margin:5px auto; background:#6C999C; width:1200px; height:100px;}
.icerik-sol-kutu{ margin:5px; background:#FF0; width:200px; height:370px; float:left;}
.icerik-sol-kutu-ust{ margin:5px; background:#6F9; width:190px; height:190px; }
.icerik-sol-kutu-alt{ margin-left:5px; margin-bottom:5px; background:#969; width:190px; height:165px; }

.icerik-sag-reklam{ margin:10px; background:#3CF; width:280px; height:140px; }
.icerik-sag-konu-baslik{ margin-right:5px; margin-left:5px; margin-bottom:5px; background:#09F; width:290px; height:30px; font-size:12px; font-family:Georgia; }
.icerik-sag-konu-yorumlar{ margin-top:5px; margin-left:5px; background:#0FF; width:290px; height:40px; font-size:12px; font-family:Georgia; }

Paylaş:

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir