------------HTML-------------
<!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> ilk projemiz </title><!--baslık-->
<link rel= "stylesheet" type="text/css" href="kutuphane/css/style.css"/><!--css dosyası ile html dosyası arasındaki baglantı-->
</head>
<body><!--kodun olacagı yer (gövde)-->
<div class="cerceve"><!--cerceve baslangıcı-->
<div class= "ust"><!--ust sınıfının acılısı-->
<div class="logo"><!--logo sonıfının acılısı-->
<a href= "index.html">
<img src="kutuphane/resim/logo.jpg" alt="sitenin logosu"/><!--logoyu siteye ekleme kodu-->
</a>
</div><!-- logo kapanıs-->
<div class="menu1"><!--ust sinifta menu1 sınıfının acılısı-->
<ul><!--<ul>ve<il>liste yapmak için kullanilir-->
<li><a href="index.html">anasayfa</a></li><!--<a> link vermek icin kullanilirr-->
<li><a href="#"> köpekler </a> </li>
<li><a href="#"> golden retriever </a></li>
<li><a href="#"> kucu kucu </a></li>
</ul><!--ul kapanısı-->
</div><!-- menu1 kapanısı-->
</div><!-- div ust kapanis-->
<div class="orta"><!--orta sinif acilisi-->
<div class="ortaBlok1"><!--ortaBlok1 sınıfı acilisi-->
<ul><!--<ul>ve<il>liste yapmak için kullanilir-->
<li> <a href="selosumm.html">seloss</a></li><!--<a> link vermek icin kullanilirr-->
<li> <a href="burcu.html">burcu</a></li>
<li> <a href="ebru.html">ebru</a></li>
</ul><!--ul kapanıs-->
</div><!--orta blok1 kapanıs-->
<div class= "ortaBlok2"><!--ortaBlok2 sınıfı acilisi-->
ortablok2
</div><!--orta blok2 kapanıs-->
<div class= "ortaBlok3"><!--ortaBlok3 sınıfı acilisi-->
ortablok3
</div><!--orta blok3 kapanıs-->
</div><!--orta kapanıs-->
</div><!-- cerceve div kapanis-->
</body><!--body kapanisi-->
<html>
---------CSS---------
.cerceve {width:990px; overflow: hidden; margin:0px auto;}<!--cercevenin sekillendirilmesi genisligi 990px uzunluk otomatık alınıyo margin 0px ile ortalıyo -->
.ust {width:990px; height:120px;}<!--ust sinifinin genisligi990px uzunlugu 120 px veriliyor-->
.logo{width:250px; height:120px; float:left;}<!--logonun boyutlari verilen px ile ayarlaniyor ve fkoat:left ile sola yaklastiriliyor-->
.logo a img{width:250px; height:120px;}
.menu1{width:520px; height:40px; float:right;}<!--menu1 sayfanin saginda olmak uzere verilen px degerleriyle ayarlaniyor-->
.menu1 ul {width:5200px; height:25px;}
.menu1 ul li {float:left; margin-right:5px; list-style:none;}<!--float left sola kaydir, margin right5px:sagdan 5 px bosluk veriyo, list ozellikleri none(yok)olarak tanimlaniyor-->
.menu1 ul li a {display: inline-block;background:#cd1821; padding:5px; font-size:18px; color:#e2e2e2; font-family:'Calibri','Tahoma',serif; text-decoration:none;}<!--inline-block yazının boyutu kadar yer verıyor font size yazının
boyutunu ayarlıyor color yazı rengını ayarlıyor font-family yazı seklını ayarlıyor-->
.menu1 ul li a:hover{ background:yellow; color:#333;}<!--imlec geldiginde yeni arka rengi ve yazı rengini belirliyor-->
.orta{width:990px; overflow:hidden; background: #f3f3f3;}
.ortaBlok1{width: 145px; overflow:hidden; float:left; background:#f8f8f8;}<!--ortablok verilen px degerleriyle sekilleniyor arka fon verilen renkte tanımlanılıyor-->
.ordaBlok2{width:700px; overflow:hidden; float:left; background:#e8e8e8;}<!--ortablok verilen px degerleriyle sekilleniyor arka fon verilen renkte tanımlanılıyor-->
.ortaBlok3{width:145px; overflow:hidden; float:right; background:#c8c8c8;}<!--ortablok verilen px degerleriyle sekilleniyor arka fon verilen renkte tanımlanılıyor-->
Hiç yorum yok:
Yorum Gönder