CSS order Örnek

Aralık 03, 2015

htmlvecssegitimi.blogspot.com

Kodu Çalıştır butonuna tıklayarak HTML belgesini Sonuç Ekranı'nda görüntüleyebilirsiniz.

KAYNAK KODLARI	SONUÇ EKRANI
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>css order özelliği ve örnek uygulama</title> <style> #anakutu { width: 300px; height: 300px; border: 2px solid black; display: -webkit-flex; display: flex; } #anakutu div { width: 50px; height: 50px; color:white; font:13px bold; } div#kirmizi {-webkit-order: 2;} div#mavi {-webkit-order: 4;} div#yesil {-webkit-order: 3;} div#pembe {-webkit-order: 1;} div#turuncu {-webkit-order: 5;} div#gri {-webkit-order: 6;} div#kirmizi {order: 2;} div#mavi {order: 4;} div#yesil {order: 3;} div#pembe {order: 1;} div#turuncu {order: 5;} div#aqua {order: 6;} </style> </head> <body> <div id="anakutu"> <div style="background-color:red;" id="kirmizi">2. sırada olacak</div> <div style="background-color:blue;" id="mavi">4. sırada olacak</div> <div style="background-color:green;" id="yesil">3. sırada olacak</div> <div style="background-color:pink;" id="pembe">1. sırada olacak</div> <div style="background-color:orange;" id="turuncu">5. sırada olacak</div> <div style="background-color:aqua;" id="aqua">6. sırada olacak</div> </div> </body> </html>

KAYNAK KODLARI

SONUÇ EKRANI

<!DOCTYPE HTML>
<html lang="en-US">

<head>
  <meta charset="UTF-8">
  <title>css order özelliği ve örnek uygulama</title>
  <style>
    #anakutu {
        width: 300px;
        height: 300px;
        border: 2px solid black;
        display: -webkit-flex;
        display: flex;
    }
    
    #anakutu div {
        width: 50px;
        height: 50px;
     color:white;
     font:13px bold; 
    }
    
    
    div#kirmizi   {-webkit-order: 2;}
    div#mavi  {-webkit-order: 4;}
    div#yesil {-webkit-order: 3;}
    div#pembe  {-webkit-order: 1;}
    div#turuncu  {-webkit-order: 5;}
    div#gri  {-webkit-order: 6;}
    
    
    div#kirmizi   {order: 2;}
    div#mavi  {order: 4;}
    div#yesil {order: 3;}
    div#pembe  {order: 1;}
    div#turuncu  {order: 5;}
    div#aqua  {order: 6;}
  </style>
</head>

<body>
  <div id="anakutu">
    <div style="background-color:red;" id="kirmizi">2. sırada olacak</div>
    <div style="background-color:blue;" id="mavi">4. sırada olacak</div>
    <div style="background-color:green;" id="yesil">3. sırada olacak</div>
    <div style="background-color:pink;" id="pembe">1. sırada olacak</div>
    <div style="background-color:orange;" id="turuncu">5. sırada olacak</div>
    <div style="background-color:aqua;" id="aqua">6. sırada olacak</div>
  </div>
</body>

</html>

Bu Blogda Ara

Html5 , CSS3 ve Javascript Dersleri

CSS order Örnek

htmlvecssegitimi.blogspot.com

HTML ve CSS Dersleri © 2015 HTMLveCSSegitimi.blogspot.com

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript

Uyurken Bile Para Kazanmak İster misin

HTML DOCTYPE Bildirimi

Javascript Oyun Yapma Dersleri HTML5+CSS3

javascript yazım kuralları

html nedir

Javascript yapısı ve DOM nedir

Web Sitenizden Çok Para Kazanin

YouTube reklamları nasıl engellenir

HTML nav Etiketi