Css-Thema Bilgi Paylaşım Platformu..

Tek Sayfa Şablon



Css Kodu:


body {
margin: 0px;
}
#sabit {
margin: auto;
position: fixed;
margin: auto;
left: 0;
top: 0;
width: 100%;
z-index: 9999;
background-color: #444444;
}
#sabitic {
background: transparent url('../images/sabit-alan.jpg') repeat-x scroll 0 0;
bottom: 0 !important;
height: 50px;
left: 0;
text-align: left;
width: 100%;
margin: 0 auto;
z-index: 1000;
}
#sabit-tasiyici {
width: 1000px;
margin: 0px auto 0px auto;
}
#sabit ul {
list-style: none;
margin: 0px;
}
#sabit ul li {
float: left;
margin: 10px 40px 0px 0px;
font-family: Tahoma;
font-size: 20pt;
}
#sabit ul li a {
text-decoration: none;
color: #ffffff;
text-shadow: 1px 2px #121212;
}
#sabit ul li a:hover {
color: #30a6ca;
}
#anasayfa-sayfasi {
background-color: #E5CC99;
height: 628px;
}
#hakkimda-sayfasi {
background-color: #196699;
height: 628px;
}
#portfolyo-sayfasi {
background-color: #990000;
height: 628px;
}
#blog-sayfasi {
background-color: #CC4C19;
height: 628px;
}
#iletisim-sayfasi {
background-color: #E5CC00;
height: 628px;
}
p {
margin: 0px;
font-size: 24pt;
padding-top: 300px;
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
color: #ffffff;
text-shadow: 1px 2px #232323;
text-align: center;
}


Tasarım Kodu:


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Tek Sayfa</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="http://bilgiliweb.byethost4.com/dream-tube/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$("document").ready(function() {

$('#anasayfa').click(function(){

$('html, body').animate({
scrollTop: $("#anasayfa-sayfasi").offset().top
}, 2000);


});

$('#hakkimda').click(function(){

$('html, body').animate({
scrollTop: $("#hakkimda-sayfasi").offset().top
}, 2000);


});

$('#portfolyo').click(function(){

$('html, body').animate({
scrollTop: $("#portfolyo-sayfasi").offset().top
}, 2000);


});

$('#belgelerimiz-link').click(function(){

$('html, body').animate({
scrollTop: $("#belgelerimiz").offset().top
}, 2000);


});

$('#blog').click(function(){

$('html, body').animate({
scrollTop: $("#blog-sayfasi").offset().top
}, 2000);


});
$('#iletisim').click(function(){

$('html, body').animate({
scrollTop: $("#iletisim-sayfasi").offset().top
}, 2000);
});


});
</script>
</head>

<body>

<div id="sabit">

<div id="sabitic">
<div id="sabit-tasiyici">
<ul>
<li id="anasayfa"><a href="#">Anasayfa</a></li>
<li id="hakkimda"><a href="#">Hakkımda</a></li>
<li id="portfolyo"><a href="#">Portfolyo</a></li>
<li id="blog"><a href="#">Blog</a></li>

<li id="iletisim"><a href="#">İletişim</a></li>
</ul>
</div>
</div>
</div>
<div id="anasayfa-sayfasi">
  <p>Css-Thema - Şuanda Anasayfadasınız</p>
</div>
<div id="hakkimda-sayfasi">
<p>Burası Hakkımda Sayfası</p>

</div>
<div id="portfolyo-sayfasi">
<p>Burada Çalışmalarım var</p>
</div>
<div id="blog-sayfasi">
<p>Buraya Blog Bölümüm Gelecek</p>
</div>
<div id="iletisim-sayfasi">
<p>Veee İletişim Sayfam <br />
Ne kadar parlak bir sayfa oldu böyle.</p>

</div>

</body>

</html>

 

Bugün 14 ziyaretçikişi burdaydı!
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=