CSS – DIV Kullanımı Örnekleri – 6

sdkbyrm

olwα.ɴeт
Üyelik Tarihi
23 Aralık 2020
Mesajlar
813
Beğeniler
1
Puanı
3
Ticaret: 0 / 0 / 0
CSS ve div yapısı kullanılarak hazırlanmış örnek web sayfası tasarım. CSS başlangıç seviyesi site tasarım örnekleri. Html+CSS Tasarım Örneği.


index.html


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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Div Örnekleri</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div class="sayfa">
<div id="ust">
<h1 id="logo">Web Tasarım</h1>
<ul id="menu">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Hizmetler</a></li>
<li><a href="#">Projeler</a></li>
<li><a href="#">Projeler</a></li>
</ul>

<div class="temizle"></div>
</div>
<div id="icerik">
<div id="galeri">
<img src="images/resim.png" alt="resim1">
</div>
<div class="yazi">
<h1>Başlık</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut. </p>
</div>
<div class="yazi">
<h1>Başlık</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut. </p>
</div>
<div class="yazi">
<h1>Başlık</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut. </p>
</div>
<div class="temizle"></div>
</div>
</div>
</body>
</html>


style.css


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

/* CSS Document */
body,h1{
margin: 0px;
padding: 0px;
}
body{
background-color: #0A0433;
}
.sayfa{
width: 960px;
margin: 5px auto;
}
#logo{
float: left;
color:whitesmoke;
font-size: 23pt;
font-family: Verdana;
font-weight: bolder;
margin-top: 10px;
margin-right: 40px;
margin-left: 10px;
background-color: #295784;
}

#menu{
float: left;
list-style: none;
}
#menu li{
float: left;
}
#menu li a{
text-decoration: none;
color: white;
padding-right: 20px;
padding-left: 20px;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
font-size: 14pt;
}
#menu li a:hover{
background-color: #295784;
border-radius: 10px;
}

#icerik{
background-color: aliceblue;

}
#galeri img{
height: 300px;
width: 940px;
margin: 10px 10px;
}

.yazi{
width: 300px;
float: left;
background-color: #5E95E0;
margin-left: 15px;
margin-bottom: 30px;
}
.yazi h1{
color: whitesmoke;
margin-left: 10px;
}

.yazi p{
text-indent: 20px;
text-align: justify;
margin: 10px;
}
.temizle{
clear: both;
}


Ekran Görüntüsü:
1608734971553.png
 
Üst Alt