Kapat

merhaba arkadaşlar.

div etiketini kullanarak yapmış olduğum bir çalışmadır bu sizler için hazırladım. oldukça sade bir tasarım elde etmek istedim. aşırı kod kullanmadım ve sizlere örnek olarak bloğuma eklemek istedim.

şimdi hemen sözü uzatmadan başlayalım.

öncelikle yapmamız gerekenler:

proje adında bir klasör oluşturun.

ardından index adında bir html sayfası oluşturun.

son olarakta css sayfamızı oluşturalım.

dosyamızın ismi style.css

ayrıca: resimleriniz için birtane klasör oluşturun.

ilk olarak css kodlarımızı yazıyoruz.

/* CSS Document */
body,h1,ul,li,img,p
{
margin: 0;
padding: 0;
}
body
{
background-color: blue;
}
.menu-ust
{
background-color: yellow;
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-wheight: 900;
display: block;
text-align: center;
translation: 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;
}
.sari
{
background-color: yellow;
height: 40px;
}
.sari 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: yellow;
height: 50px;
}
.alt h1
{
line-height: 50px;
text-align: center;
color: white;
}
.temizle
{
clear: both;
}

evet burada birtane üst menü tanımı yaptık ardından menü tanımı yaptık listemizin özelliklerini belirttik. ve kart alanı oluşturduk.

 

şimdi ise index.html sayfamızın kodlarını yazalım.

 

<!doctype html>
<html>
<head>
<meta charset="windows-1254">
<title> örnek sayfa </title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="menu-ust">
<div id="logo>
<h1> örnek sayfa </h1>
</div>
<div class="menu">
<ul>
<li> <a href="#">anasayfa</a </li>
<li> <a href="#">kodörnekleri </a> </li>
<li> <a href="#"> hakkımızda</a> </li>
<li> <a href="#">iletişim</a> </li>
</ul>
</div>
<div class="temizle"> </div>
</div>
<div class="sayfa">
<div class="ust">
<img src="proje/images/1.png">
<div class="yazi">
<h1> başlık </h1>
<p> bu bir örnektir. sizlerde kullanabilirsiniz. sitenizi yapabilirsiniz. </p>
</div>
</div>
<div class="temizle"> </div>
<div class="yellow">
<p> https://sadikozdogan.com
<br>
https://sadikozdogan.com.tr
</p>
</div>
<div class="card">
<div class="kutu">
<img src="proje/images/2.png">
<h1> html </h1>
<p> sitemizde html, html 5 ile ilgili tüm dökümanları bulabilirsiniz. </p>
</div>
</div>
<div class="card">
<div class="kutu">
<img src="proje/images/3.png">
<h1> css </h1>
<p> css, css3 ve css tasarımları ile ilgili örnek dökümanlara ve derslere sitemizde bulabilirsiniz. </p>
</div>
</div>
<div class="card">
<div class="kutu">
<img src="proje/images/4.png">
<h1> php </h1>
<p> php ile ilgili sayısızca dökümanı bulabilir sizlerde kendi php projelirinizi yazabilirsiniz. </p>
</div>
</div>
<div class="temizle"> </div>
</div>
<div class="alt">
<h1> https://sadikozdogan.com </h1>
</div>
</body>
</html>

 

buradada sayfamızda çalışacak kodları oluşturduk. liste öğelerini tanımladık. küçük yazılar yazdık.

evet yapmış olduğum çalışma bu şekilde arkadaşlar.

sizlerde kendinizi geliştirip kişisel sayfalarınızı tasarlayabilirsiniz.

iyi bloglamalar herkese.

Bir önceki yazımız olan css ile yataymenü başlıklı makalemizde css menü, css menü örnekleri ve css örnekleri hakkında bilgiler verilmektedir.

Bir cevap yazın

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

*

code


Kapat