...html sayfasına:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir=ltr lang=tr xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>İlk projemiz</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="Sitemizin logosudur"/>
</a>
</div><!-- logo DIV kapanis -->
<div class="menu1">
<ul>
<li><a href="index.html">Anasayfa</a></li>
<li><a href="#">Köpekler</a></li>
<li><a href="#">Golden Retviever</a></li>
<li><a href="#">Çin Aslanı</a></li>
</ul><!-- ul kapanis-->
</div>
</div><!-- ust DIV kapanis -->
<div class="orta">
</div><!-- orta div kapanis>
</div><!-- Cerceve DIV kapanis -->
</body>
</html>
...css sayfasına:
.cerceve{width:990px; overflow:hidden; margin:0px auto;}
.ust{width:990px; height:120px;}
.logo{width:250px; height:120px;float:left;}
.logo img{width:250px; height:120px}
.menu1{width:520px; height:40px; float:right;}
.menu1 ul{width:520px; height:25px;}
.menu1 ul li{float:left; margin-right:10px; list-style:none;}
.menu1 ul li a{display:inline-block; padding:5px; background:silver; font-size:18px;
color:#Blue; font-family:'Calibri','Tahoma';}
.menu1 ul li a:hover{background:gray; color:#black;}
.orta{width:990px; overflow:hidden; background:#f3f3f3;}
.ortaBlok1{width:145px; overflow:hidden; float:left; background:#f8f8f8f8;}
.ortaBlok2{width:700px; overflow:hidden; float:left; background:#e8e8e8;}
.ortaBlok3{width:145px; overflow:hidden; float:right; background:#c8c8c8;}
kodlarını yazmamız yeterlidir.Renkleri (background,color) , yazı fontunu (font-size, font-family) ve boyutları (height, width) kendi isteğinize göre ayarlamanız mümkündür. Tabi logoyu ve <ul></ul>, <li></li> tagları arasına yazdığımız menü başlıklarını da kendi hazırlayacağınız siteye göre değiştirmeniz gerekir. Bu çalışmaları yapıp çalıştırdığımızda karşınıza şöyle birşey gelmesini bekleyin...
0 yorum:
Yorum Gönder