1. Ana Sayfa
  2. Css
  3. Css Dersleri-Div Kullanım Örnekleri
reaksiyion-alkis

Css Dersleri-Div Kullanım Örnekleri

Css Dersleri-Div Kullanım Örnekleri

Css ile div kullanım örneklerimize devam ediyoruz uygulamamızda bize verilen aşağıdaki tasarımı oluşturmak için gerekli olan kodlamayı yapacağız.

css_div_kullanim

Bizden istenen div örneğinde yan yana 150px boyutunda 4 kutu ve kutular arasında 10px boşluk olacak aşağıdaki büyük dikdörtgen için ise 630px genişlik ve 80px yükseklik değerlerini kullanacağız.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Bilisimogretmeni.com Css Div Kullanım Örneği</title>
<style type="text/css">
    #kutu1 {
        height:150px;
        width:150px;
        background-color:#000000;
        color:white;
        float:left;
        margin-right:10px;
    }/*http://www.bilisimogretmeni.com/ */
    #kutu2 {
        height:150px;
        width:150px;
        background-color:#996600;
        float:left;
        margin-right:10px;
    }
    #kutu3 {
        height:150px;
        width:150px;
        background-color:#333366;
        float:left;
        margin-right:10px;
    }/*http://www.bilisimogretmeni.com/ */
    #kutu4 {
        height:150px;
        width:150px;
        background-color:#990000;
        float:left;
    }
    #kutu5 {height:80px;
            width:630px;
            background-color:#6633FF;
            margin-top:10px;
            clear:both;
            float:left;
            
    }
</style>
</head>
<body>
    <div id="kutu1"></div>
    <div id="kutu2"></div>
    <div id="kutu3"></div>
    <!--http://www.bilisimogretmeni.com/ -->
    <div id="kutu4"></div>
    <div id="kutu5"></div>
</body>
</html>

Şimdi biraz daha değişik bir örnek yapacağız

css_div_kullanim2

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
     <title>Bilisimogretmeni.com Css Div Kullanım Örneği</title>
<style type="text/css">
    #genel {
        padding:5px;
        width:600px;
        margin:auto;
    }
    #kutu1 {
        height:150px;
        width:150px;
        background-color:#990000;
        color:white;
        font-family:'Century Gothic';
        font-size:35px;
        font-weight:bold;
        text-align:center;
        vertical-align:middle;
        line-height:150px;
        float:left;
    }
    #kutu2 {
        height:150px;
        width:150px;
        background-color:#003366;
        color:white;
        font-family:'Century Gothic';
        font-size:35px;
        font-weight:bold;
        line-height:150px;
        text-align:center;
        vertical-align:middle;
        float:left;
        margin-left:10px;
    }
    #kutu3 {
        height:70px;
        width:590px;
        background-color:#330033;
        color:white;
        font-family:'Century Gothic';
        font-size:35px;
        font-weight:bold;
        text-align:center;
        vertical-align:middle;
        line-height:70px;
        clear:both;
        float:left;
        margin-bottom:10px;
        margin-top:10px;
    }
    #kutu4 {
        height:150px;
        width:150px;
        color:white;
        background-color:#003366;
        font-family:'Century Gothic';
        font-size:35px;
        /*http://www.bilisimogretmeni.com/ */
        font-weight:bold;
        text-align:center;
        vertical-align:middle;
        line-height:150px;
        margin-right:10px;
        float:right;
       
    }
    #kutu5 {
        width:150px;
        height:150px;
        background-color:#990000;
        color:white;
        font-family:'Century Gothic';
        font-size:35px;
        text-align:center;
        vertical-align:middle;
        line-height:150px;
        float:right;
        font-weight:bold;
        margin-right:10px;
        
    }
    #kutu6 {
        background-color:#330033;
        color:white;
        height:70px;
        width:590px;
        font-family:'Century Gothic';
        /*http://www.bilisimogretmeni.com/ */
        font-size:35px;
        font-weight:bold;
        text-align:right;
        vertical-align:middle;
        line-height:70px;
        clear:both;
        float:left;
        margin-top:10px;
    }
</style>
</head>
<body>
    <div id="genel">
        <div id="kutu1">Html</div>
        <div id="kutu2">Css</div>
        <div id="kutu3">Web Tasarım ve Programlama</div>
        <div id="kutu5">Vb.Net</div>
        <div id="kutu4">C#</div><!--http://www.bilisimogretmeni.com/ -->        
        <div id="kutu6">Programlama</div>
    </div>
</body>
</html>
Yorum Yap

2
Kimler Neler Demiş?

Bir Cevap Yazın

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Bildir
mehmet
Ziyaretçi
mehmet

hocam eline sağlık siteyi çok beğendim

BilisimOgretmeni
Ziyaretçi
BilisimOgretmeni

teşekkürler 🙂