SS ve DIV Kullanarak Web Sayfası Oluşturma Örneği -2-

sdkbyrm · 23 Aralık 2020

HTML + CSS ile hazırlanmış Div ile sayfa yapısını gösteren ve CSS ile çeşitli biçimlendirilmeler uygulanmış basit bir web sayfası örneği.

CSS Dİv Kullanım örnekleri.
index.html 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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.yazilimkodlama.com</title>
<link href="style.css" rel="stylesheet">
</head>

<body>
<div class="menu-ust">
<div id="logo">
<h1>yazilimkodlama.com</h1>
</div>
<div class="menu">
<ul>
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Ürünler</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">İletişim</a></li>
</ul>
</div>

<div class="temizle"></div>
</div>

<div class="sayfa">
<div class="ust">
<img src="resim/1.png">
<div class="yazi">
<h1>BAŞLIK</h1>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Ipsum Lorem Ipsum Lorem
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
</div>
</div>
<div class="temizle"></div>
<div class="gri">
<p>www.yazilimkodlama.com</p>
</div>
<div class="card">
<div class="kutu">
<img src="resim/2.png">
<h1>HTML</h1>
<p>HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri
HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri
HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri </p>
</div>
</div>
<div class="card">
<div class="kutu">
<img src="resim/3.png">
<h1>CSS</h1>
<p>HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri
HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri
HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri </p>
</div>
</div>
<div class="card">
<div class="kutu">
<img src="resim/4.png">
<h1>PHP</h1>
<p>HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri
HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri
HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri HTML Dersleri </p>
</div>
</div>
<div class="temizle"></div>
</div>
<div class="alt">
<h1>www.yazilimkodlama.com</h1>
</div>
</body>
</html>

style.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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

/* CSS Document */
body,h1,ul,li,img,p{
margin: 0;
padding: 0;
}
body{
background-color: black;
}
.menu-ust{
background-color: gray;
height: 60px;
}

#logo{
float: left;
width: 350px;
margin-left: 30px;
}
#logo h1{
color: white;
line-height: 60px;
}
.menu{
float: right;
margin-right: 50px;
}

.menu li{

list-style-type: none;
float: left;
line-height: 60px;
}

.menu ul li a{

text-decoration: none;
color: whitesmoke;
font-weight: 900;
display: block;
text-align: center;
transition: 1s;
font-family: calibri,arial,verdana;
font-size: 20px;
width: 180px;
float: left;line-height: 60px;

}

.menu a:hover{

background-color: #5FD367;
color: #005555;

}
.sayfa{
width: 960px;
margin: 5px auto;
background-color: azure;
}
img{
float: left;
}
.yazi{
float: left;
width: 540px;
margin-left: 20px;
}
.yazi h1{
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
text-align: center;
}
.yazi p{
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
text-align: justify;
}

.gri{
background-color: gray;
height: 40px;
}
.gri p{
font-size: 16pt;
color: white;
line-height: 40px;
text-align: center;
}

.card{
width: 300px;
float: left;
margin:10px;
}
.card img{
margin: auto;
}
.alt{
background-color: gray;
height: 50px;
}
.alt h1{
line-height: 50px;
text-align: center;
color: white;
}
.temizle{
clear: both;
}

SS ve DIV Kullanarak Web Sayfası Oluşturma Örneği -2-

sdkbyrm