Programlama | Programlama Dilleri | C Programlama Dili |C++

Anasayfa Programlama Css Css İle Yapılan Site Örneği


Css İle Yapılan Site Örneği

AÇIKLAMA
 
Bu projemizde css ile yapılmış site örneği verilmektedir. Bu kısımda butonlar açılır menüler kutular resim eklemeler gibi işlemler css tekniği ile yapılmıştır.  Ayrıca projede birçok ilgili özelliğide değinilmiştir. Css tekniğinin ilgili birçok özelliğini aşağıdaki örneğimizde bulmanız mümkündür.

 

Kullanılan Dosyaları (css ve html) Ayrıca Resimleri Aşağıdaki Linkten İndirebilirsiniz

Linki Görebilmeniz İçin Üye Olmanız Gerekmektedir...

Üye Kayıt

css Kodu:

</div><div>body {
margin:0px;
padding:0px;
}
div#ana{
width:760px;
padding-right:10px;
background:white url('resimler/ana_sag.png') repeat-y right;
}
div#sol {
float:left;
width:200px;
height:500px;
background-color:#E1E1FF;
}
div#orta{
float:left;
width:560px;
height:500px;
background-color:#CCCCFF;
}
div#alt{
clear:both;
background-color:maroon;
height:3px;
}
div#baslik_1{
background-color:#E1E1FF;
height:30px;
text-align:right;
padding-top:5px;
padding-right:5px;
}
#txt_ara,#btn{
border:1px solid navy;
background-color:#E1E1FF;
}
div#bar{
height:2px;
background-color:maroon;
}
div#ust_resim{
height:190px;
position:relative;
background:white url('resimler/alt.jpg') no-repeat left top;
}
div#orta_ust{
position:absolute;
bottom:0px;
right:0px;
width:560px;
height:30px;
background-color:white;
}
#alt_icerik{
padding:10px 20px;
font-size:16px;
font-weight:bold;
}
p img{
float:left;
margin-right:4px;
}
p{
color:black;
font-size:16px;
font-weight:normal;
}
span{
color:#663300;
}
div#kutu{
width:180px;
background:#CCCCFF url('resimler/kutu_alt.png') no-repeat left bottom;
height:200px;
margin:5px auto;
}
#span_kutu{
display:block;
background:url('resimler/kutu_ust.png') no-repeat left top;
padding:15px;
}
div#kutu p{
margin-top:0px;
padding:0px 10px;
}
/* Menü Başlangıç */
ul{
list-style-type:none;
padding:0px 30px;
margin:0px;
}
ul#menu a{
background-color:white;
display:block;
padding:5px 20px;
text-decoration:none;
font-size:16px;
font-weight:bold;
color:navy;
font-family:Calibri;
}
li#css,li#js,li#xhtml{
position:relative;
}
ul#alt_css a,ul#alt_js a,ul#alt_xhtml a{
text-decoration:none;
color:navy;
font-size:medium;
font-weight:normal;
padding:0px 4px;
}
ul#alt_css,ul#alt_js,ul#alt_xhtml{
position:absolute;
visibility:hidden;
width:200px;
padding:0px 3px;
}
ul#menu>li {
display:inline;
float:left;
}
ul#alt_css a:hover,ul#alt_js a:hover,ul#alt_xhtml a:hover{
background-color:#E1E1FF;
}
li#css:hover ul#alt_css{
visibility:visible;
padding:0px;
}
li#js:hover ul#alt_js{
visibility:visible;
padding:0px;
}
li#xhtml:hover ul#alt_xhtml{
visibility:visible;
padding:0px;
}
ul#alt_css,ul#alt_js,ul#alt_xhtml{
left:10px;
top:30px;
}
li#sinir{
height:1px;
background-color:transparent;
}
/*    Menü Bitişi     */
</div><div>
 
Sayfa Kodu:
 
</div><div><html>
<head>
<title>CSS Site Örneği</title>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<div id="ana">
<div id="baslik">
<div id="baslik_1">
<form>
<input type="text" id="txt_ara">
<input type="button" id="btn" value="Ara !">
</form>
</div>
<div id="bar"></div>
<div id="ust_resim">
<div id="orta_ust">
<ul id="menu">
<li><a href="#" id="ana">Anasayfa</a></li>
<li id="css"><a href="#" id="css">CSS</a>
<ul id="alt_css">
<li><a href="#">CSS'e Giriş</a></li>
<li><a href="#">Yapısı ve Sözdizimi</a></li>
<li><a href="#">Seçiciler</a></li>
</ul>
</li>
 
<li id="js"><a href="#" id="js">Javascript</a>
<ul id="alt_js">
<li><a href="#">Giriş</a></li>
<li><a href="#">Operatörler</a></li>
<li><a href="#">Diziler</a></li>
<li id="sinir"></li>
</ul>
</li>
 
<li id="xhtml"><a href="#" id="xhtml">XHTML</a>
<ul id="alt_xhtml">
<li><a href="#">Belge Türü</a></li>
<li><a href="#">Elemanlar</a></li>
<li><a href="#">Etiketler</a></li>
<li id="sinir"></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="sol">
<div id="kutu">
<span id="span_kutu">CSS konumlandırma özellikleri</span>
<p>içerik..</p>
</div>
<div id="kutu">
<span id="span kutu ">CSS float özelligi</span>
<p<içerik..</p>
</div>
</div>
<div id="orta">
<div id= "içerik">
<div=id="alt_içerik">
<span>javaScript kitabı hakkında </span>
<p><img src="resimler/kitap.gif" alt="kitap" height="129" width="108" >
web tasarımının olmazsa olmazı.web sayfalarının etkileşimini,canlılıgını ve dinamizligini artırmak için geliştirilmiş script ve proglamlama dili.eb tasarımının olmazsa olmazı.web sayfalarının etkileşimini,canlılıgını ve dinamizligini artırmak için geliştirilmiş script ve proglamlama dili.
eb tasarımının olmazsa olmazı.web sayfalarının etkileşimini,canlılıgını ve dinamizligini artırmak için geliştirilmiş script ve proglamlama dili.
eb tasarımının olmazsa olmazı.web sayfalarının etkileşimini,canlılıgını ve dinamizligini artırmak için geliştirilmiş script ve proglamlama dili.
</p>
<span>XHTML ve CSS kitabı </span>
<p>kitap ocak ayında piyasada</p>
<span>AJAX</span>
<p>Ajax hakkında Bilgi</p>
<span>HTML5 ve CSS3 hakkında bilgi</p>
<span>ASP.NET hakkında Bilgi</span>
<p>ASP.NEt hakkında Bilgi</p>
</div>
</div>
 
<div id="alt"></div>
</div>
 
 
 
</body>
</html>
</div>
 
Yorumlar (0)
Sadece kayıtlı kullanıcılar yorum yazabilir!