Hazır basit site tasarımı css ile

El altında bulunması gereken css ile hazırladığım basit anasayfa görünümü. Yalnızca kalıp olarak hazırladığım bu css örneğinde bazen ufak tefek unuttuğumuz kodlar olduğundan dolayı paylaşmak istedim. Sıfırdan web sitesi tasarlayanlar içinde başlangıç kalıbı da yapılabilir.

Fazla irdelemeden başlangıç seviyesindeki Css bilgisiyle yapılan bu örnek sayfanın devamı diğer yazılarımda geleceğini söyleyeyim. Bu tasarımda; logo, üst menü, altında slider veya büyük resim için alan, onun altında orta kısım ve site hakkında bilgiler içeren alt kısım bulunmakta.

Css ve html kısımları ayrı olarak kullanabilirsiniz.

Head alanı içine yazılan Css kodları;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<style>
body
{
margin-top: 0px;
margin-bottom: 0px;
background-color:#CCC;
}

#anagovde
{
margin: auto;
width:960px;
height:1000px;
background-color:#999; 
}

#anagovde #enustkisim
{
width: auto;
height: 80px;
background-color:#9F0;
}

#anagovde #enustkisim #logoalani
{
width:300px;
height:80px;
background-color:#F00;
float:left;
}

#anagovde #enustkisim #menualani
{
width:600px;
height:80px;
background-color:#9C0;
float:right;

}

#anagovde #buyukresim
{
width:960px;
height:360px;
background-color:#69C;

}

#anagovde #ortakisim
{
width:960px;
height:340px;
background-color:#FF0;
}

#anagovde #enaltkisim
{
width:960px;
height:220px;
background-color:#930;
}

</style>

Body alanına içine yazılan Html kodları;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="anagovde">

<div id="enustkisim">
<div id="logoalani"><h2 align="center">Coder.digitaldunyam.net
</h2>
</div>
<div id="menualani">Menüler buraya | Anasayfa | Hakkında | Vs.</div>
</div>

<div id="buyukresim">Büyük resim alanı
  </div>

<div id="ortakisim">Orta kısım
  </div>

<div id="enaltkisim">En alt kısım</div>


</div>

Bir Cevap Yazın

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