Burdasın >> tek sayfa tasarim

empadesign

tek sayfa tasarim

İşte JavaScript,Css ve Html'in kullanıldığı müthiç bir scrool tek sayfa tasarım.Tasarım çok sade bs-aktif'de böle bi tasarım paylaşmıştı bende paylaşıcam dedim ve farkı siz görün işte onun tasarımındaki bir eksiğini tamamlamaya çalıştım;
Onun tasarımında logo koyulacak yer yoktu ama bu tasarımda var.
 
|Önizleme Yap|

CSS:
<style type="text/css">
body {
background-image: url(http://www.hv-designs.co.uk/tutorials/jquery_scroll/template/images/bg.gif);
background-repeat: repeat-x;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
 
#top {
width: 950px;
margin-top: 50px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
}
 
#title {
margin: auto;
width: 271px;
float: center;
align: center;
clear: both;
}
 
#navigation {
float:left;
width:100%;
overflow:hidden;
position:relative;
margin-top: 20px;
margin-bottom: 20px;
}
 
#navigation ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
 
#navigation ul li {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
  position:relative;
right:50%;
}
 
#navigation ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 10px;
color:#666666;
text-decoration:none;
line-height:1.3em;
}
 
#navigation ul li a:hover {
color:#000000;
}
 
#navigation ul li a.active,
#navigation ul li a.active:hover {
color:#000000;
font-weight:bold;
}
 
#homepage {
float: left;
width: 950px;
height: 800px;
}
 
#about, #gallery, #portfolio, #contact {
float: left;
width: 950px;
height: 650px;
}
 
h1 {
color: #5a5a5a;
font-size: 24px;
font-weight: normal;
margin: 0px;
padding: 0px;
}
 
span.description {
color: #9f9f9f;
font-size: 12px;
}
 
.top {
background-image: url(http://www.hv-designs.co.uk/tutorials/jquery_scroll/template/images/top.png);
background-repeat: no-repeat;
float: left;
height: 48px;
width: 950px;
padding-bottom: 35px;
background-position: bottom;
margin-bottom: 20px;
}
 
.top p {
text-align: center;
color: #999999;
font-size: 10px;
}
 
a:link {
color: #666666;
}
a:visited {
color: #666666;
}
a:hover {
color: #000000;
}
a:active {
color: #666666;
}</style>

TASARIM ÜSTÜ:
<script type="text/javascript" src="http://www.hv-designs.co.uk/tutorials/jquery_scroll/template/js/jquery-1.4.2.min.js"></script><script type="text/javascript" src="http://www.hv-designs.co.uk/tutorials/jquery_scroll/template/js/scroll.js"></script>

HTML:

<div id="top">
<div id="title"><img alt="jQuery Animated Scroll" src="https://img.webme.com/pic/e/empadesign/empadesignlogo.png" /></div>
<!--title ends-->
<div id="navigation">
<ul>
    <li><a class="scroll" href="#about">Hakkımda</a></li>
    <li><a class="scroll" href="#gallery">Galeri</a></li>
    <li><a class="scroll" href="#portfolio">Blog</a></li>
    <li><a class="scroll" href="#contact">İletişim</a></li>
</ul>
</div>
<!--navigations ends-->
<div id="homepage">
<h1>Ana Sayfa <br />
<span class="description">Burasıda Ana Sayfan</span></h1>
</div>
<!--homepage ends-->
<div id="about">
<h1>Hakkımda <br />
<span class="description">Buraya Hakkında Bişiler Yaz</span></h1>
</div>
<!--Hakk&#305;mda Biti&#351;-->
<div class="top">
<p><a class="scroll" href="#top">Yukarı &Ccedil;ık</a></p>
</div>
<!--yukar&#305; ç&#305;k çabas&#305; bitis-->
<div id="gallery">
<h1>Galeri <br />
<span class="description">Burası Galeri Sayfan</span></h1>
</div>
<!--Galeri Biti&#351;-->
<div class="top">
<p><a class="scroll" href="#top">Yukarı &Ccedil;ık</a></p>
</div>
<!--yukar&#305; ç&#305;k çabas&#305; bitis-->
<div id="portfolio">
<h1>Blog <br />
<span class="description">Burası Blog Sayfan</span></h1>
</div>
<!--Blog Biti&#351;-->
<div class="top">
<p><a class="scroll" href="#top">Yukarı &Ccedil;ık</a></p>
</div>
<!--yukar&#305; ç&#305;k çabas&#305; bitis-->
<div id="contact">
<h1>İletişim <br />
<span class="description">Burası İletişim Sayfan</span></h1>
</div>
<!--ileti&#351;im biti&#351;-->
<div class="top">
<p><a class="scroll" href="#top">Yukarı &Ccedil;ık</a></p>
</div>
<!--yukar&#305; ç&#305;k çabas&#305; bitis--></div>
<!--Sayfalar Bitis-->

Giriş Yap

Kullanıcı Adı Şifre

Kayıt Ol!

Kategoriler

Popüler Yazılar

Reklamlar

Bir Tık Birşey Kaybettirmez! TurkeyRank.Com - Pagerank Servisi

Dostlarım

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol