CSS – DIV Kullanımı Örnekleri – 6 –

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


<!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>

<!doctype html>

<html>

<head>

<title>CSS Div Örnekleri</title>

</head>

<body>

<h1 id="logo">Web Tasarım</h1>

<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>

</ul>

</div>

</div>

<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>

<h1>Başlık</h1>

</div>

<h1>Başlık</h1>

</div>

</div>

</body>

</html>

style.css


/* 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;
}

/* 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ü:

Bunu paylaş:

Şunlar da Hoşunuza Gidebilir

Yorum yap X