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 Desing Temel Anlatim

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

KAYNAK: turkmayasi | tr.gg/forum
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! <=