01-01-2015 Saat: 01:09
20 Dakikada kodladım uğraşmadım basit bir kodlama.
HTML kodu:
CSS kodu:
--------
HTML kodu:
Kod:
<html>
<head>
<title>Batuhan İndex</title>
<style type="text/css">@import url("css/reset.css");</style>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<div id="Tümü">
<div id="header"><div class="ikonlar"><div id="kapsa"><a href="#"><img src="http://i.hizliresim.com/ozXzbo.png" width="32px" height="32px" id="ikonlar"></a> <a href="#"><img src="http://i.hizliresim.com/8Ea9nV.png" width="32px" height="32px" id="ikonlar"></a>
<a href="#"><img src="http://i.hizliresim.com/yn6A2y.png" width="32px" height="32px" id="ikonlar"></a>
</div></div>
<div id="headerüst"><div id="kapsa"><ul><li>Bizi Hemen Takip Et</li></ul>
</div>
</div>
<div id="kapsa"><div id="logo"></div>
</div>
<div id="kapsa"><div id="orta"><div id="ic"><span style="color:red;margin-left:270px;border-bottom:1px dotted #fff;">Hangi resime tıklarsan o bölüme gider...</span><ul><li><a href="#"><img src="http://i.hizliresim.com/lzq0Ql.png"</a></br>İzle</li>
<li><a href="#"><img src="http://i.hizliresim.com/lzq0Ql.png"</a></br>İzle</li><li><a href="#"><img src="http://i.hizliresim.com/lzq0Ql.png"</a></br>İzle</li></ul>
</div></div></div></div>
</body>
</html>Kod:
/* Tümü */
#Tümü { margin:0 auto; }
/* Header */
#kapsa { width:1000px; margin:0px auto; }
#header { width:100%; height:150px; background:url(http://i.hizliresim.com/891vBd.png); border-bottom:3px solid #c7c7c7;}
#headerüst { width:100%; height:65px; border-bottom:1px solid #d4d4d4;}
#headerüst ul li { color:#fff; font-family:Utsaah;}
#ikonlar { float:right; }
#logo { margin-top:-1%;; background:url(http://i.hizliresim.com/lzq0Ql.png); width:200px; height:100px; margin-left:40%; }
/* Orta Kısım */
#orta { box-shadow:0 0 8px 2px #000; background-color:#c7c7c7; margin-left:10%; width:800px; height:500px; margin-top:5px; }
#ic ul li{ float:left; width:150px; height:120px; margin-left:55px; text-align:center;}
#ic ul li a img { width:120px; height:120px; background-color:#fff; border:1px solid #969191; text-align:center;}
#ic ul li a img:hover{ width:120px; height:120px; background-color:#969191; border:1px solid #fff; text-align:center;}
#ic ul li a { color:#fff; text-decoration:none;}--------
