Bazı Tasarımlar Hackerfriend Dersleriyle Oluşturulmuştur...

Tasarımın Adı:Siyah Dünya
Tam Boy Görmek İçin Resme Tıklayın

:::Kodları:::
Tasarımın üstünteki yazı
<font color="#ffffff"><font face="Comic Sans MS" size=2> <div id="tasarim"> <div id="baslik"></div> <div id="sitemenum"> <div class="mattblacktabs"> <ul> <li><a href="http://www.dynamicdrive.com">Home</a></li> <li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li> <li><a href="http://www.dynamicdrive.com/style/">CSS</a></li> <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li> <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li> </ul> </div> </div> <div id="ust"></div> <div id="orta">
Tasarımın Altındaki Yazı
</div> <div id="alt"></div> </div>
Css Kodu
h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} * { padding: 0; margin: 0; } body { font-family: Arial; font-size: 12px; background: url(https://img.webme.com/pic/t/trggdestek/sarkaplans.jpg) top center fixed; } #tasarim { margin: 0 auto; width: 900px } #baslik { width: 845px; height: 200px; background: url(https://img.webme.com/pic/t/trggdestek/siyahdunyabaslik.jpg); border: 0px solid #4699C3; } #ust { width:845px; height:190px; background: url(https://img.webme.com/pic/t/trggdestek/s01.jpg); margin: 50px 0 0 0; } #orta { width:795px; background: url(https://img.webme.com/pic/t/trggdestek/s02.jpg); padding: 0 25px 0 25px; } #alt { width:845px; height:131px; background: url(https://img.webme.com/pic/t/trggdestek/s03.jpg); float: left; } /*Eğer Menüyü sabitlemek isterseniz position:fixed; kodunu katmana eklemeniz yeterli.*/ #sitemenum { width:845px; } /* Menü kodu burada başlıyor*/ .mattblacktabs{ width: 100%; overflow: hidden; border-bottom: 1px solid black; /*bottom horizontal line that runs beneath tabs*/ } .mattblacktabs ul{ margin: 0; padding: 0; padding-left: 10px; /*offset of tabs relative to browser left edge*/ font: bold 12px Verdana; list-style-type: none; } .mattblacktabs li{ display: inline; margin: 0; } .mattblacktabs li a{ float: left; display: block; text-decoration: none; margin: 0; padding: 7px 8px; /*padding inside each tab*/ border-right: 1px solid white; /*right divider between tabs*/ color: white; background: #414141; /*background of tabs (default state)*/ } .mattblacktabs li a:visited{ color: white; } .mattblacktabs li a:hover, .mattblacktabs li.selected a{ background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */ }

Tasarımın Adı:Kafkef Fans
Tam Boy Görmek İçin Resme Tıklayın

:::Kodları:::
Tasarımın Üstündeki Yazı
<div id="tasarim"> <div id="baslik"></div> <div id="sitemenum"> <div class="mattblacktabs"> <ul> <li><a href="http://www.dynamicdrive.com">Home</a></li> <li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li> <li><a href="http://www.dynamicdrive.com/style/">CSS</a></li> <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li> <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li> </ul> </div> </div> <div id="ust"></div> <div id="orta">
Tasarımın Altındaki Yazı
</div> <div id="alt"></div> </div>
Css Kodu
h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} * { padding: 0; margin: 0; } body { font-family: Arial; font-size: 12px; background: url(https://img.webme.com/pic/t/trggdestek/sarkaplans.jpg) top center fixed; } #tasarim { margin: 0 auto; width: 1000px } #baslik { width: 1000px; height: 300px; background: url(https://img.webme.com/pic/t/trggdestek/baslikremikafkef.jpg); border: 0px solid #4699C3; } #ust { width:1000px; height:150px; background: url(https://img.webme.com/pic/t/trggdestek/k01.jpg); margin: 50px 0 0 0; } #orta { width:1000px; background: url(https://img.webme.com/pic/t/trggdestek/k02.jpg); padding: 0 25px 0 25px; } #alt { width:1000px; height:122px; background: url(https://img.webme.com/pic/t/trggdestek/k03.jpg); float: left; } /*Eğer Menüyü sabitlemek isterseniz position:fixed; kodunu katmana eklemeniz yeterli.*/ #sitemenum { width:845px; } /* Menü kodu burada başlıyor*/ .mattblacktabs{ width: 100%; overflow: hidden; border-bottom: 1px solid black; /*bottom horizontal line that runs beneath tabs*/ } .mattblacktabs ul{ margin: 0; padding: 0; padding-left: 10px; /*offset of tabs relative to browser left edge*/ font: bold 12px Verdana; list-style-type: none; } .mattblacktabs li{ display: inline; margin: 0; } .mattblacktabs li a{ float: left; display: block; text-decoration: none; margin: 0; padding: 7px 8px; /*padding inside each tab*/ border-right: 1px solid white; /*right divider between tabs*/ color: white; background: #414141; /*background of tabs (default state)*/ } .mattblacktabs li a:visited{ color: white; } .mattblacktabs li a:hover, .mattblacktabs li.selected a{ background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */ }

Tasarımın Adı:Red
Tam Boy Görmek İçin Resme Tıklayın

:::Kodları:::
Tasarımın Üstündeki Yazı
<div id="tasarim"> <div id="baslik"></div> <div id="sitemenum"> <div class="mattblacktabs"> <ul> <li><a href="http://www.dynamicdrive.com">Home</a></li> <li><a href="http://www.dynamicdrive.com/new.htm">DHTML</a></li> <li><a href="http://www.dynamicdrive.com/style/">CSS</a></li> <li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li> <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li> </ul> </div> </div> <div id="ust"></div> <div id="orta">
Tasarımın Altındaki Yazı
</div> <div id="alt"></div> </div>
Css Kodu
h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} * { padding: 0; margin: 0; } body { font-family: Arial; font-size: 12px; background: none top center fixed; } #tasarim { margin: 0 auto; width: 900px } #baslik { width: 845px; height: 250px; background: url(https://img.webme.com/pic/t/trggdestek/kirmizibaslik.jpg); border: 0px solid #4699C3; } #ust { width:845px; height:167px; background: url(https://img.webme.com/pic/t/trggdestek/ki01.jpg); margin: 50px 0 0 0; } #orta { width:795px; background: url(https://img.webme.com/pic/t/trggdestek/ki02.jpg); padding: 0 25px 0 25px; } #alt { width:845px; height:139px; background: url(https://img.webme.com/pic/t/trggdestek/ki0.jpg); float: left; } /*Eğer Menüyü sabitlemek isterseniz position:fixed; kodunu katmana eklemeniz yeterli.*/ #sitemenum { width:845px; } /* Menü kodu burada başlıyor*/ .mattblacktabs{ width: 100%; overflow: hidden; border-bottom: 1px solid black; /*bottom horizontal line that runs beneath tabs*/ } .mattblacktabs ul{ margin: 0; padding: 0; padding-left: 10px; /*offset of tabs relative to browser left edge*/ font: bold 12px Verdana; list-style-type: none; } .mattblacktabs li{ display: inline; margin: 0; } .mattblacktabs li a{ float: left; display: block; text-decoration: none; margin: 0; padding: 7px 8px; /*padding inside each tab*/ border-right: 1px solid white; /*right divider between tabs*/ color: white; background: #414141; /*background of tabs (default state)*/ } .mattblacktabs li a:visited{ color: white; } .mattblacktabs li a:hover, .mattblacktabs li.selected a{ background: black; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */ }

Tasarımın Adı:Red2
Tam Boy Görmek İçin Resme Tıklayın

:::Kodları:::
Tasarımın Üstündeki Yazı
<style> <!-- A{text-decoration:none} --> </style> <div align="center"><table border="0" width="70%"><tr><td> <style type="text/css"> <!-- html, body { text-align: center; } --> </style> <p> <table cellspacing="10" cellpadding="1" width="800" border="1"> <tbody> <tr> <td valign="top" bordercolor="#ff9900" align="left" bgcolor="#ffffff"> <table height="200" cellspacing="0" cellpadding="0" width="800" border="0"> <tbody> <tr> <td><img id="TB_Image" height="200" alt="" width="800" src="https://img.webme.com/pic/t/trggdestek/kirmiziabaslik02.jpg" /></td> </tr> </tbody> </table> <table style="width: 804px; height: 20px" height="20" cellspacing="0" cellpadding="0" width="804" border="0"> <tbody> <tr> <td bordercolor="#ffffff" bgcolor="#ff9900"><a href="#"><img class="" id="TB_Image" height="50" alt="Ana Sayfa" width="200" border="0" src="https://img.webme.com/pic/t/trggdestek/home0.jpg" /></a><a href="#"><img class="" id="TB_Image" height="50" alt="Forum" width="200" border="0" src="https://img.webme.com/pic/t/trggdestek/forum0.jpg" /></a><a href="#"><img class="" id="TB_Image" height="50" alt="Eğlence" width="200" border="0" src="https://img.webme.com/pic/t/trggdestek/eglence0.jpg" /></a><a href="#"><img class="" id="TB_Image" height="50" alt="Teknoloji" width="200" border="0" src="https://img.webme.com/pic/t/trggdestek/tekno0.jpg" /></a></td> </tr> </tbody> </table>
Tasarımın Altındaki Yazı
</td></tr></table></div> </td> </tr> </tbody> </table> </p>
Css Kodu
h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;}