4 Eylül 2013 Çarşamba

Web Site

Ana Sayfa HTML Kodu;

<!doctype html>
<html>
<head>
<link href="css.css" type="text/css" rel="stylesheet" media="all" />
</head>
<body>
<div class="ana">
<div class="ust">
<h1>
<img src="Chrysanthemum.jpg">
</h1>
<ul>
<li><a href="ilk.html">Anasayfa</a></li>
<li><a href="Hakkimda.html">Hakkimda</a></li>
<li><a href="http://gamzezirh.blogspot.com/">Blogum</a></li>
<li><a href="https://www.google.com.tr/?gws_rd=cr&ei=GggnUvDYJoTCswbFnYDoCA">Arama Yap</a></li>
<li><a href="https://www.youtube.com/?gl=TR&tab=w1">Muzik</a></li>
</ul>
</div>
<div class="orta">
<ul>
<li><a href="ilk.html">Anasayfa</a></li>
<li><a href="Hakkimda.html">Hakkimda</a></li>
<li><a href="http://gamzezirh.blogspot.com/">Blogum</a></li>
<li><a href="https://www.google.com.tr/?gws_rd=cr&ei=GggnUvDYJoTCswbFnYDoCA">Arama Yap</a></li>
<li><a href="https://www.youtube.com/?gl=TR&tab=w1">Muzik</a></li>
<li><img src="Chrysanthemum.jpg"></li>
</ul>
</div>

<div class="alt">
<ul>
<li>GAMZE ZIRH</li>
</ul>
</div>
</div>
</body>
</html>

Hakkimda HTML Kodu;

<!doctype html>
<html>
<head>
<link href="css.css" type="text/css" rel="stylesheet" media="all" />
</head>
<body>
<div class="ana">
<div class="ust">
<h1>
<img src="Chrysanthemum.jpg">
</h1>
<ul>
<li><a href="ilk.html">Anasayfa</a></li>
<li><a href="Hakkimda.html">Hakkimda</a></li>
<li><a href="http://gamzezirh.blogspot.com/">Blogum</a></li>
<li><a href="https://www.google.com.tr/?gws_rd=cr&ei=GggnUvDYJoTCswbFnYDoCA">Arama Yap</a></li>
<li><a href="https://www.youtube.com/?gl=TR&tab=w1">Muzik</a></li>
</ul>
</div>
<div class="icerik">
<br><br>Ataturk Universitesi Bilgisayar Muhendisligi 3.Sinif ogrencisiyim.
<br><br>Universitenin Bilgisayar Arastirma ve Uygulama Merkezinde staj yapmaktayim.
</div>

<div class="alt">
<ul>
<li>GAMZE ZIRH</li>
</ul>
</div>
</div>
</body>

</html>

CSS Kodu;

body{}
.ana{background:blue; overflow:hidden;}
  .ust{background:black; overflow:hidden;}
    .ust h1{float:left; margin:25px 50px;}
      .ust h1 img{width:100px; height:100px}
        .ust ul{float:right;}
          .ust ul li{float:left; list-style:none; margin:25px 50px 0 0; border-left:4px solid #fff; padding:5px;}
            .ust ul li a{color:white; font-size:16px; text-decoration:none;}
              .ust ul li a:hover{color:#fff;}
.orta{background:red; overflow:hidden; width:200px;}
      .orta img{width:100px; height:100px}
   .orta ul{float:left;}
          .orta ul li{list-style:none; margin:25px 50px 0 0; padding:5px;}
   .orta ul li a{color:white; font-size:16px; text-decoration:none;}
              .orta ul li a:hover{color:#fff;}
.alt{background:yellow; overflow:hidden;}
  .alt ul{float:right;}
    .alt ul li{list-style:none; margin:25px 50px 0 0; padding:5px;}
.icerik {overflow:hidden; margin:0 50px 350px 0;}

Ekran Alıntısı;







Hiç yorum yok:

Yorum Gönder