forumdll.benimforum.biz


 
AnasayfaPortalAramaKayıt OlGiriş yap

Paylaş | 
 

 CSS Tasarım Nasıl Yapılır

Önceki başlık Sonraki başlık Aşağa gitmek 
YazarMesaj
Cansiperane
Admin
Admin


Erkek
Kova Horoz
Mesaj Sayısı : 607
Hobiler : Uzman
Kayıt tarihi : 04/12/08
Teşekkür : 11
. : [

190310
MesajCSS Tasarım Nasıl Yapılır

Basit bir CSS tasarımın nasıl yapıldığını hep beraber göreceğiz.Makaleyi Maddeler halinde açıklayacağım.

1. İlk Önce Taslağımızı oluştularım.

<div id="anakatman">
<div id="ust"></div>
<div id="menu"></div>
<div id="icerik"></div>
<div id="solkisim"></div>
<div id="alt"></div>
</div>

2. Oluşturduğumuz taslağın içeriğini düzenleyelim.

<div id="anakatman">
<div id="ust"><h1>KodArsivi.Net</h1></div>
<div id="menu">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>

</ul>
</div>
<div id="icerik">
<h2>İçeriğin Başlığı</h2>
<p>Burası içeriğinizi yazacağınız yer</p>
</div>
<div id="solkisim">
<h3>Linkler</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
...
</ul>
</div>
<div id="alt">
<p>Burasıda Sitemizin alt kısmı</p>
</div>
</div>

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ı
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="anakatman">
<div id="ust"><h1>KodArsivi.Net</h1></div>
<div id="menu">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>

</ul>
</div>
<div id="icerik">
<h2>İçeriğin Başlığı</h2>
<p>Burası içeriğinizi yazacağınız yer</p>
</div>
<div id="solkisim">
<h3>Linkler</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
...
</ul>
</div>
<div id="alt">
<p>Burasıda Sitemizin alt kısmı</p>
</div>
</div>

</form>
</body>
</html>

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


forumdll
Sayfa başına dön Aşağa gitmek

 Similar topics

-
» açık öğretim
» Lambo Door Yapımı
» Css Tasarımları
» DB Nasıl Degişir? Bilmeyenler İçin SonÇıgLık Farkıyla
» Hayatta bir kez yapılan şey
Bu yazıyı burda paylaş : Excite BookmarksDiggRedditDel.icio.usGoogleLiveSlashdotNetscapeTechnoratiStumbleUponNewsvineFurlYahooSmarking

CSS Tasarım Nasıl Yapılır :: Yorum

CSS sitemin tasarımını değiştirmek istiyorum
Mesaj Bir Salı 20 Tem. 2010, 15:01 tarafından musti
alışveriş sitesi kurmak hazır bir program aldım. css ile oldukça sade görünümlü bir site tasarımı yaptırmak istiyorum. yapabilecek kimse var mı, ücreti nedir?
 

CSS Tasarım Nasıl Yapılır

Önceki başlık Sonraki başlık Sayfa başına dön 

1 sayfadaki 1 sayfası

Bu forumun müsaadesi var:Bu forumdaki mesajlara cevap veremezsiniz
forumdll.benimforum.biz :: WEB :: Web Tasarımı-
Buraya geçin: