Ana Sayfa

3.Şimdi sitemizi yavaş yavaş şekillendirmeye başlıyoruz. body,html { margin:0; padding:0; background:#a7a09a; color:#000; }body { min-width:750px; }#anakatman { background:#99c; margin:0 auto; width:750px; } #ust { background:#ddd; }#menu { background:#c99; }#icerik { float:left; width:500px; background:#9c9; }#solkisim { float:right; width:250px; background:#c9c; }#alt { clear:both; background:#cc9; }#menu ul{ margin:0; padding:0; list-style:none; }#menu li{ display:inline; margin:0; padding:0; } #ust h1 { padding:5px; margin:0; }#menu { background:#c99; padding:5px; }#icerik h2, #icerik h3, #icerik p { padding:0 10px; }#solkisim ul { margin-bottom:0; }#solkisim h3, #solkisim p { padding:0 10px; }#alt p { padding:5px; margin:0; } Şimdi kısa bir derleme yapalım ilk verdiğim HTML kodları ikinci verdiğim CSS kodları HTML Kodları

KodArsivi.Net

• Menu 1
• Menu 2

İçeriğin Başlığı

Burası içeriğinizi yazacağınız yer

Linkler

• Link 1
• Link 2
...

Burasıda Sitemizin alt kısmı

CSS Kodları body,html { margin:0; padding:0; background:#a7a09a; color:#000; } body { min-width:750px; } #anakatman { background:#99c; margin:0 auto; width:750px; } #ust { background:#ddd; } #menu { background:#c99; } #icerik { float:left; width:500px; background:#9c9; } #solkisim { float:right; width:250px; background:#c9c; } #alt { clear:both; background:#cc9; } #menu ul{ margin:0; padding:0; list-style:none; } #menu li{ display:inline; margin:0; padding:0; } #ust h1 { padding:5px; margin:0; } #menu { background:#c99; padding:5px; } #icerik h2, #icerik h3, #icerik p { padding:0 10px; } #solkisim ul { margin-bottom:0; } #solkisim h3, #solkisim p { padding:0 10px; } #alt p { padding:5px; margin:0; } Hepsi bukadar