Her ne kadar css'yi html'e gömen kod olan
"<link rel="stylesheet" type="text/css" href="kutuphane/css/style.css">"yi yazarken tereddüt etsem de sonunda öğrendim:)
Biraz pratiğe bakıyo aslında herşey.. Neyi float edip neyi nerede kapatacağını bildikten sonra gerisi geliyor bu kod dünyasında..Düşünün ki aşağıdaki kod;
<div class="menu">
<ul>
<li><a href="a.html">Anasayfa</a></li>
<li><a href="b.html">Hakkımızda</a></li>
<li><a href="c.html">Fotoğraflar</a></li>
<li><a href="d.html">Köpek Bakımı</a></li>
<li><a href="e.html">İletişim</a></li>
<li><a href="f.html">Yardım</a></li>
</ul>
</div>
küçük bir menü oluşturma kodu..
Dreamweaverdaki table'nin yaptığını , Css'de "<ul> ve<li>" taglarıyla yapıyoruz.
"<a href="#">" koduyla link verip, </a> tagıyla da kapatıyoruz .
Bu menü için oluşturacağımız stilleri de Css'de yapıyoruz.Küçük bir örneğini aşağıdaki kodda görebilirsiniz.
.menu{width:520px; height:40px; float:right; }
Bu demek oluyo ki;
-->width:520px; genişliği 520px
-->height:40px; yüksekliği 40px
-->float:right; sağa dayalı bir menü oluşacak.
Basit bir site örneği;
<html>
<head>
<title>Proje</title>
<link rel="stylesheet" type="text/css" href="kutuphane/css/style.css">
</head>
<body>
<div class="cerceve">
<div class="ust">
<div class="logo">
<a href="index.html">
<img src="kutuphane/resim/logo.jpg" alt="Site logosu"/>
</a>
</div>
<div class="menu">
<ul>
<li><a href="a.html">Anasayfa</a></li>
<li><a href="b.html">Hakkımızda</a></li>
<li><a href="c.html">Fotoğraflar</a></li>
<li><a href="d.html">Köpek Bakımı</a></li>
<li><a href="e.html">İletişim</a></li>
<li><a href="f.html">Yardım</a></li>
</ul>
</div>
</div>
<div class="orta">
<div class="ortablok1">
<ul>
<li><a href="#">Pariiiiss Annaammm</a></li>
<li><a href="#">finooo,gel buraya..</a></li>
<li><a href="#">çomar çomar çomarr</a></li>
<li><a href="#">Doberman oğlummm koş!</a></li>
<li><a href="#">Fındık fındık fındık kızım..</a></li>
<li><a href="#">Yakala yakalaaa</a></li>
<li><a href="#">Cinoo</a></li>
<li><a href="#">Kuçu Kuçu</a></li>
</ul>
</div>
<div class="ortablok2">
<p>
<img src="kutuphane/resim/kopis.jpg" alt="köpiş"/>
KÖPEK HABERLERİ
</p>
</div>
<div class="ortablok3">
<ul>
<li><a href="#">Doberman</a></li>
<li><a href="#">Alman Kurdu</a></li>
<li><a href="#">Sibirya Kurdu</a></li>
<li><a href="#">K9</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
Css kodları;
.cerceve{width:990px; overflow:hidden; margin:0px auto;background:lightblue;}
.ust{width:990px; height:120px;}
.logo{width:250px; height:120px;float:left;}
.logo img{width:300px; height:120px;}
.menu{width:520px; height:40px; float:right; margin-top:50px;}
.menu ul{width:620px; height:25px;}
.menu ul li{float:left; margin-right:10px; list-style:square;}
.menu ul li a{display:inline-block; padding:5px; background:lightblue; font-size:18px;
color:#Blue; font-family:'Comic Sans MS','Tahoma';}
.menu ul li a:hover{background:gray; color:#black;}
.orta{width:990px; overflow:hidden; background:#f3f3f3;}
.ortablok1{width:200px; overflow:hidden; float:left; background:#f8f8f8f8;}
.ortablok2{width:640px; overflow:hidden; float:left; background:#e8e8e8;}
.ortablok2 p img{width:380px; overflow:hidden;float:left;}
.ortablok3{width:150px; overflow:hidden; float:right; background:#c8c8c8;}
1 yorum:
heheheh güzel anlatım :)
Yorum Gönder