CSS ve Div kullanarak basit bir web sayfası tasarımı örneği. Örneğimizde içeriğimizin tarayıcıda ortalamış olarak gelmesi için margin:auto kullanımı, sola yaslanama için float:left kullanımı ve diğer css etiketlerinin kullanımını görebilirsiniz.
ornek.html kodları:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link href="css-3.css" rel="stylesheet"> </head> <body> <div id="sayfa"> <div id="ust">Üst</div> <div id="sol">Sol</div> <div id="orta">Orta</div> <div id="sag">Sağ</div> <div id="alt">Alt</div> </div> </body> </html> |
|
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 |
/* CSS Document */ #sayfa { width:960px; margin: auto; } #ust { height:75px; background-color:#7C84C0; text-align:center; vertical-align:middle; margin:0 0 5px 0; line-height:75px; } #sol { height:500px; width:130px; background-color:#0D275A; text-align:center; vertical-align:middle; text-transform:uppercase; float:left; line-height:350px; } #orta { width:700px; height:500px; background-color:#101232; text-align:center; vertical-align:middle; text-transform:uppercase; float:left; color: aliceblue; } #sag { height:500px; width:130px; background-color:#0D275A; text-align:center; vertical-align:middle; text-transform:uppercase; float:right; } #alt { clear:both; height:75px; background-color:#27989A; text-align:center; vertical-align:middle; text-transform:uppercase; } |
çok bilgilendirici