HTML + CSS Web Sayfası Örnekleri 1

HTML ve CSS Kullanarak web sitesi oluşturma örneği. CSS ve DIV yapısını inceleyebileceğiniz, yatay menü kullanılarak yapılmış örnek uygulamadır.

HTML Kodları:


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

<body>
	<div class="menu-ust">
		<div id="logo">
			<h1>tasarimkodlama.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.tasarimkodlama.com</h1>
	</div>
</body>
</html>

<!doctype html>

<html>

<head>

<title>www.tasarimkodlama.com</title>

</head>

<body>

<h1>tasarimkodlama.com</h1>

</div>

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

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

</div>

<p>www.yazilimkodlama.com</p>

</div>

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

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

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

<h1>www.tasarimkodlama.com</h1>

</div>

</body>

</html>

CSS Kodları:


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

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;

}

HTML + CSS Web Sayfası Örnekleri 1

Yorum Yap

İptal Et

Bunları da beğenebilirsiniz

Yorum Yap