html kodları..
<html>
<head>
<link href="asdf.css" type="text/css" rel="stylesheet" media="all" />
</head>
<body>
<div class="tepe">
<h1>
<img src="resim1.jpg"/>
</h1>
<ul>
<li><a href="#"> Anasayfa </a></li>
<li><a href="#)"> Hakkimda </a></li>
<li><a href="http://isminur-ates.blogspot.com">Blogum</a></li>
<li><a href="#"> Resimlerim </a></li>
<li><a href="#"> Sosyal Aglar </a></li>
</ul>
</div>
<div class="orta">
<ul>
<li><a href="anasayfa.html">Anasayfa</a></li>
<li><a href="0">Hakkimda</a></li>
<li><a href="http://isminur-ates.blogspot.com">Blogum</a></li>
<li><a href="0">Bilgilerim</a></li>
<li><a href="0">Resimlerim</a></li>
<li><a href="0">Sosyal Aglar</a></li>
<li><img src="resim2.jpg"></li>
</ul>
</div>
<div class="alt">
<ul>
<li>Isminur Ates</li>
</ul>
</div>
</body>
</html>
css kodları..
body{}
.tepe{width: 1200px; heigth: 50px; background: brown; overflow:hidden; float: left;}
.tepe h1{float:left;}
.tepe h1 img{width:100px; height:100px; display: block;}
.tepe ul{float:right; background:cyan;}
.tepe ul li{float:left; list-style:none;margin:20px 0 0 0;border-left:4px solid #fff; padding:5px}
.tepe ul li a{color:#333; font-size:16px; text-decoration:none;}
.tepe ul li a:hover{color:#fff;}
.orta{background:cyan; 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:brown; overflow:hidden;}
.alt ul{float:right;}
.alt ul li{list-style:none; margin:25px 700px 0 0; padding:5px;}
Hiç yorum yok:
Yorum Gönder