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