Css Dersleri-Div Kullanım Örnekleri

admin tarafından

22 Kasım 2016 994 kez okundu Okuma süresi: 2dk, 57sn

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>

Bu İçeriğe Tepkin Ne Oldu?