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

Hata
  • XML Parsing Error at 1:82. Error 9: Invalid character


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!
 
404 Not Found

404

Not Found

The resource requested could not be found on this server!


Proudly powered by LiteSpeed Web Server

Please be advised that LiteSpeed Technologies Inc. is not a web hosting company and, as such, has no control over content found on this site.