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-->

tek sayfa tasarim

Giriş Yap

Kategoriler

Popüler Yazılar

Reklamlar

Dostlarım