Tasarladığımız sitenin css ve html kodları:
<!doctype html>
<html>
<head>
<link href="new.css" type="text/css" rel="stylesheet" media="all" />
</head>
<body>
<div class="ust">
<h1>
<img src="yns.jpg">
</h1>
<ul>
<li><a href="file:///C:/Users/Exper-Pc/Desktop/site/new.html">Anasayfa</a></li>
<li><a href="0">Hakkimda</a></li>
<li><a href="http://feyzaalemdar.blogspot.com/">Blogum</a></li>
<li><a href="0">Galeri</a></li>
</ul>
</div>
<div class="orta">
<ul>
<li><a href="new.html">Anasayfa</a></li>
<li><a href="0">Hakkimda</a></li>
<li><a href="http://feyzaalemdar.blogspot.com/">Blogum</a></li>
<li><a href="0">Galeri</a></li>
<li><a href="0">iletisim</a></li>
<li><img src="yns.jpg"></li>
</ul>
</div>
<div class="alt">
<ul>
<p>
Feyza Alemdar
</p>
</ul>
</div>
</body>
</html>
css dosyası ilede görselliği sağladık:
body{}
.ust{background:gray; 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:blue; 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:blue; overflow:hidden;}
.alt ul{float:left;}
.alt ul li{list-style:none; margin:100px 250px 0 0; padding:5px;}
Hiç yorum yok:
Yorum Gönder