HTML div leri ve CSS kullanarak temel sayfa yerleşimini gösteren örnekleri:
Örnek içinde float yapısı, width,height, border, margin, padding gibi temel
CSS komutlarının kullanımını göreceksiniz. CSS Div ile yapılmış sayfamıza ait ekran görüntüsü:
HTML + CSS
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 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | <html> <head> <style type="text/css"> body { background:#CC5200; font-size:30px; text-align:center; } #anadiv { width:800px; margin:0 auto; background:white; } #logo { float:left; width:180px; height:150px; border:2px solid red; margin-right:10px; } #reklam { width:400px; float:right; height:150px; border:2px solid red; } #menu { width:600px; float:right; border:2px solid red; margin-top:10px; } #icerik { height:500px; border:2px solid red; margin-top:10px; margin-bottom:10px; } #solicerik { float:left; width:180px; height:150px; border:2px solid red; margin:30px; } #sagicerik { width:450px; float:right; height:430px; border:2px solid red; margin:30px; } #solalt { width:550px; height:50px; float:left; border:2px solid red; margin-right:10px; background: #FFF; } #sagalt { width:230px; height:50px; float:left; border:2px solid red; background: #FFF; } .temizle { clear:both; } </style> </head> <body> <div id="anadiv"> <div id="logo">Logo</div> <div id="reklam">Reklam</div> <div class="temizle"></div> <div id="menu">Menü</div> <div class="temizle"></div> <div id="icerik"> <div id="solicerik"></div> <div id="sagicerik"></div> <div class="temizle"></div> </div> <div id="solalt">Sol Alt</div> <div id="sagalt">Sağ Alt</div> <div class="sil"></div> </div> </body> </html> |
1 Yorum