CSS kodu ile site iskeleti oluşturma

Html ve CSS kullanarak oluşturulan örnek bir site iskeleti,

html dosyası

<!DOCTYPE HTML>
<html lang="en-US">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
			margin:0;
			}
			</style>
		<link rel="stylesheet" href="style.css" />
	</head>
	<body>
		
		<div class="container">			
			<header>
				sitenin üst bölümü
			</header>			
		</div>
		
		<nav>
			sitenin  ana menü bölümü
		</nav>
		
		<div class="container">			
			<section>
				sitenin (sol yada sağ) içerik bölümü
			</section>
			
			<aside>
				sitenin (sol yada sağ) side bar bölümü
			</aside>			
		</div>	
		
		<div class="temizle"></div>
		
		<div class="container">			
			<footer>
				sitenin alt bölümü
			</footer>			
		</div>		
		
	</body>
</html>

css dosyası

/*
	harici css dosyamız
	(ders2.html)
*/

header{
	width:1000px;
	height:120px;
	margin-right:auto;
	margin-left:auto;
	background-color:#ff5c26;
}

nav{
	width:100%; 
	height: 40px;  
	background-color:#23008c; 
}

.container{
	width:1000px;
	margin:0 auto;
}

.temizle{
	clear:both; 
	/* 
	bir sonraki etiketi
	yeni satırdan başlatmak için kullanılır. */	
}

section{
	float:left;
	width:700px; 
	height: 220px;  
	background-color:#ffbf00; 
}

aside{
	float:right;
	width:290px; 
	height: 320px;  
	background-color:#ffbf00; 
}			

footer{
	width:1000px; 
	height: 120px; 
	margin-right:auto;
	margin-left:auto; 
	background-color:#4cd2ff; 
}

 

daha geniş anlatım hali için Video ders linki
Youtube
Konu

Facebooktwitterlinkedin

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir