CSS – DIV Kullanımı Örnekleri – 5

sdkbyrm · 23 Aralık 2020

CSS ve DIV kullanarak web sayfası şablonu hazırlama örnekleri.

Html + 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

<!doctype html>
<html lang="tr">
<head>
<meta charset=utf-8>
<style>
#ust h1{
margin: 0px;
color: black;

padding: 20px 50px;
font-family: fantasy;
font-size: 60px;
text-shadow: 0px 0px 15px white;
}
#ust h2{
margin: 0px;
color: black;
padding: 20px 250px;
font-family: fantasy;
font-size: 30px;
text-shadow: 0px 0px 5px white;

}

#icerik h1{
color: gray;
margin: 0px;
padding: 10px;
font-family: sans-serif;
}

#depo{
border: 1px solid black;
background-color: antiquewhite;
width: 960px;
min-height: 500px;
margin: auto;
}
#ust{
height: 200px;
background-color: black;
}

#menu{
height: 30px;
background-color: dimgray;
}
#icerik{
min-height: 300px;
background-color:white;

}
#icerik p{
font-family: sans-serif;
padding: 10px;
text-align: justify;
text-indent: 30px;
margin: 0px;
color: dimgray;

}
#icerik img{
float: left;
margin: 20px;
border-radius: 10px;

}
#zemin{
min-height: 50px;
background-color:dimgray;
}
.bag{
width: 150px;
height: 30px;
display: block;
float: left;
text-align: center;
line-height: 30px;
font-family: Tahoma,verdana,arial;
color: white;
}
</style>
</head>

<body>
<div id="depo">
<div id="ust">
<h1>SİTE ADI</h1>
<h2>Site Slogan</h2>

</div>
<div id="menu">
<span class="bag">
ANASAYFA
</span>
<span class="bag">
HAKKIMIZDA
</span>
<span class="bag">
RESİMLER
</span>
<span class="bag">
İLETİŞİM
</span>

</div>
<div id="icerik">
<h1>İÇERİK BAŞLIK</h1>
<img src="resimler/indir.jpg">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam erat velit, molestie venenatis lectus sodales vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc maximus purus at justo pulvinar, in auctor ex auctor. Maecenas interdum felis non metus bibendum, quis cursus dolor congue. Vestibulum mauris dolor, aliquet et ultricies ut, ultrices ac metus. Integer porttitor fermentum ipsum, sit amet scelerisque lorem condimentum sed. Aenean auctor lectus quis metus venenatis consectetur. Aliquam erat volutpat. Curabitur in nulla vitae arcu consequat luctus ornare non magna. Fusce et vehicula eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc hendrerit ante sed posuere suscipit. Maecenas ut odio imperdiet, mattis erat eu, volutpat nisi. Vivamus varius tortor vel lacus commodo, pretium elementum nulla vehicula. Ut at fringilla dolor. Donec in risus eu lectus fringilla facilisis.

Sed maximus consectetur fringilla. Donec pretium et tortor sed tempus. Integer vitae finibus tortor. Pellentesque interdum facilisis semper. Etiam vitae dolor pretium, pellentesque nibh ac, mollis dolor. Vestibulum vitae tincidunt augue, at semper arcu. Quisque ac lectus ac nisi rhoncus lacinia vel at erat. Vivamus consectetur accumsan magna. Nunc ornare vulputate orci congue varius.

Proin at tellus auctor, egestas lorem eu, consectetur diam. Integer eu pellentesque lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer finibus, nisi sit amet varius semper, dolor lectus vestibulum urna, lobortis posuere eros sem dictum libero. Duis dictum ipsum ante, id lacinia ex tempor nec. In pharetra tellus pharetra risus tincidunt auctor. Curabitur dictum orci non dui tempus, eget pulvinar tellus varius. Maecenas molestie interdum ultricies. Cras laoreet commodo velit sit amet fermentum. Proin eget turpis sem.

Curabitur a arcu ac eros vehicula porta. Curabitur tristique arcu ac feugiat molestie. Cras ut pretium mi. Nulla cursus mauris elit, sed varius nibh condimentum euismod. Praesent volutpat mi et magna tempor, interdum ultricies eros porttitor. Nulla fringilla ut ipsum a volutpat. Mauris efficitur arcu odio, non sollicitudin odio fringilla id. Nunc tristique nulla metus, sit amet maximus risus fermentum sit amet. Integer blandit ultrices odio, non tempus dolor. Aenean arcu sapien, accumsan sed porta et, laoreet at felis. Curabitur cursus quis lectus at aliquet. Donec ultricies quam dui, sit amet convallis justo efficitur facilisis. Fusce tellus velit, ultrices nec neque id, finibus volutpat orci. Aliquam eu pellentesque nisl. Fusce orci odio, consectetur molestie est id, placerat porta massa. Sed quis porttitor lectus.

Aliquam et vestibulum nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce ultrices et eros ac facilisis. Fusce condimentum sapien velit, in suscipit nunc condimentum ut. Donec ornare, tellus non tristique vulputate, libero eros efficitur ipsum, non aliquet augue arcu et mauris. Nulla gravida erat vel pulvinar blandit. Duis posuere at libero posuere lobortis. Suspendisse consequat, risus sit amet scelerisque sollicitudin, lacus mauris placerat tortor, sed malesuada nisl nisl non metus. Duis dignissim nisi et turpis blandit venenatis.

</p>
</div>
<div id="zemin"></div>

</div>
</body>
</html>

CSS – DIV Kullanımı Örnekleri – 5

sdkbyrm