Program Yapmak | Programcılık Hakkında Her Şey | VİSUAL BASİC 6.0 | C, C++ ve C# Yazılım Dilleri | VB.NET Yazılım Dili

CSS bilgi kutucuklari bilgi kutulari anlatim kodu

Öncelikle CSS Tasarımını kullanan kişiler CSS Kodu Bölümüne ;

Kod:
.hata, .ikaz, .tamam, .bilgi {
   margin-bottom: 1.5em;
   padding: 1em 1.5em 1em 5.5em;
   border-bottom: 2px solid #fff;
   border-top: 2px solid #fff;
   color: #444 }
 
.hata { background: #fbe3e4 url(https://img.webme.com/pic/m/mistanbul/hata.png) 2.2em center no-repeat; border-color: #e0011b }
 
   .hata a { color: #d12f19 }
 
.ikaz { background: #fff6bf url(https://img.webme.com/pic/m/mistanbul/ikaz.png) 2.2em center no-repeat; border-color: #ffd324 }
 
   .ikaz a { color: #817134 }
 
.tamam { background: #e9ffdd url(https://img.webme.com/pic/m/mistanbul/tamam.png) 2.2em center no-repeat; border-color: #72c868 }
 
   .tamam a { color: #529214 }
 
.bilgi { background: #e2ecee url(https://img.webme.com/pic/m/mistanbul/bilgi.png) 2.2em center no-repeat; border-color: #9ddae6 }
 
   .bilgi a { color: #2d7ba2 }
 
/* listeler */
.hata ul, .ikaz ul, .tamam ul, .bilgi ul {
   list-style: none;
   margin: 1.3em 1.5em }
 
.hata ul li, .ikaz ul li, .tamam ul li, .bilgi ul li { padding-left: 1.3em }
 
.hata ul li { background: url(https://img.webme.com/pic/m/mistanbul/hata-bullet.png)  0 0.55em no-repeat }
 
.ikaz ul li { background: url(https://img.webme.com/pic/m/mistanbul/ikaz-bullet.png)  0 0.55em no-repeat }
 
.tamam ul li { background: url(https://img.webme.com/pic/m/mistanbul/tamam-bullet.png) 0 0.55em no-repeat }
 
.bilgi ul li { background: url(https://img.webme.com/pic/m/mistanbul/bilgi-bullet.png) 0 0.55em no-repeat }


CSS Tasarımı kullanmayıp Butterfly , Red gibi hazır tasarımları kullananlar ;

Kod:
<style type="text/css">
   <!--
.hata, .ikaz, .tamam, .bilgi {
   margin-bottom: 1.5em;
   padding: 1em 1.5em 1em 5.5em;
   border-bottom: 2px solid #fff;
   border-top: 2px solid #fff;
   color: #444 }
 
.hata { background: #fbe3e4 url(https://img.webme.com/pic/m/mistanbul/hata.png) 2.2em center no-repeat; border-color: #e0011b }
 
   .hata a { color: #d12f19 }
 
.ikaz { background: #fff6bf url(https://img.webme.com/pic/m/mistanbul/ikaz.png) 2.2em center no-repeat; border-color: #ffd324 }
 
   .ikaz a { color: #817134 }
 
.tamam { background: #e9ffdd url(https://img.webme.com/pic/m/mistanbul/tamam.png) 2.2em center no-repeat; border-color: #72c868 }
 
   .tamam a { color: #529214 }
 
.bilgi { background: #e2ecee url(https://img.webme.com/pic/m/mistanbul/bilgi.png) 2.2em center no-repeat; border-color: #9ddae6 }
 
   .bilgi a { color: #2d7ba2 }
 
/* listeler */
.hata ul, .ikaz ul, .tamam ul, .bilgi ul {
   list-style: none;
   margin: 1.3em 1.5em }
 
.hata ul li, .ikaz ul li, .tamam ul li, .bilgi ul li { padding-left: 1.3em }
 
.hata ul li { background: url(https://img.webme.com/pic/m/mistanbul/hata-bullet.png)  0 0.55em no-repeat }
 
.ikaz ul li { background: url(https://img.webme.com/pic/m/mistanbul/ikaz-bullet.png)  0 0.55em no-repeat }
 
.tamam ul li { background: url(https://img.webme.com/pic/m/mistanbul/tamam-bullet.png) 0 0.55em no-repeat }
 
.bilgi ul li { background: url(https://img.webme.com/pic/m/mistanbul/bilgi-bullet.png) 0 0.55em no-repeat }
 
-->
   </style>



Kodlarını eklemeliler..

Geldik kurufasulyenin faydalarına..

Kod:
<div class="ikaz">YAZI BURAYA</div>


Gördüğünüz gibi sayfaya ekleyeceğiniz bu kodla yazınız bilgi kutusu içerisinde görünecek..

Koddaki ikaz yazan kısımı silip bilgi , tamam , hata ifadeleriyle de değiştirebilirsiniz..
Böylelikle kutunun işlevi ve rengi değişecektir.
Sincan Laptop tamiratı ile alakalı içeriklerin bulunduğu web siteden bilgilere ulaşabilirsiniz. Sincan'da laptop tamiratını en iyi yapan yerleri sorgulayabilirsiniz. Cihan KOÇ
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=