CSS – DIV Kullanımı Örnekleri -1 – Web Tasarım & Programlama

CSS ve DIV kullanımını gösteren basit örneklere ait .html ve css kodlarına buradan ulaşabilirsiniz. Örneklerimizde harici css dosyası kullanacağız.

ornek1.html kodları:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css-1.css" rel="stylesheet">
</head>

<body>
<div id="kutu1"></div>
<div id="kutu2"></div>
<div id="kutu3"></div>
<div id="kutu4"></div>
<div id="kutu5"></div>
</body>
</html>

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

</body>

</html>

css-1.css kodları:


	#kutu1{
	height:150px;
    width:150px;
    background-color:#A8A82E;
	color:white;
	float:left;
	margin-right:10px;
}
	#kutu2 {
        height:150px;
        width:150px;
        background-color:#0B9E8E;
        float:left;
        margin-right:10px;
    }
    #kutu3 {
        height:150px;
        width:150px;
        background-color:#46D056;
        float:left;
        margin-right:10px;
    }
    #kutu4 {
        height:150px;
        width:150px;
        background-color:#672A65;
        float:left;
    }
    #kutu5 {height:80px;
            width:630px;
            background-color:#07083F;
            margin-top:10px;
            clear:both;
            float:left;      
    }

#kutu1{

height:150px;

width:150px;

background-color:#A8A82E;

color:white;

float:left;

margin-right:10px;

}

#kutu2 {

height:150px;

width:150px;

background-color:#0B9E8E;

float:left;

margin-right:10px;

}

#kutu3 {

height:150px;

width:150px;

background-color:#46D056;

float:left;

margin-right:10px;

}

#kutu4 {

height:150px;

width:150px;

background-color:#672A65;

float:left;

}

#kutu5 {height:80px;

width:630px;

background-color:#07083F;

margin-top:10px;

clear:both;

float:left;

}

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X