CSS – DIV Kullanımı Örnekleri -2

sdkbyrm · 23 Aralık 2020

CSS ve DIV kullanımı ile ilgili örneklere devam ediyoruz. Aşağıdaki örneğe ait .css ve .html dosyalarına ait kodları görebilirsiniz.

ornek2.html kodları:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css-2.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>
<div id="kutu6"></div>
</body>
</html>

css-2.css css kodları:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

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

CSS – DIV Kullanımı Örnekleri -2

sdkbyrm