Css ve Html İle DIV Kullanımı Uygulamaları 3 | E L M A

Css ve Html İle DIV Kullanımı Uygulamaları 3

   

Programlama öğrenmek için her zaman yeni örnekler denemelisiniz. Bunun için bugün sizlere Css ve Html İle  DIV Kullanımı Uygulamaları 3 programını aktaracağız.  Css ve Html  de kodlama nasıl gerçekleşir? Css ve Html İle DIV Kullanımı Uygulamaları 3 nasıl kodlanır? Gibi sorularınızın cevabını bu içeriğimizde bulabilirsiniz.


Css ve Html Programlama Örnekleri


Css ve Html İle DIV Kullanımı Uygulamaları  Kod Alanı


Css ve Html  web programlama dilinde  DIV Kullanımı Uygulamaları 3 kod metnini oluşturduk. Bu uygulamamızda css ve div kullanımı hakkında basit bir örnek oluşturacağız. Bu tür basit örnekler ile css ve div kullanımının nasıl gerçekleştiğini, ne gibi kodlar kullanıldığını ayrıca kod metinin nasıl dizayn edildiğini anlayabiliriz. Her bir yeni örneğimiz farklı bir konuya değinmektedir. Her bir örneği uygulamanız sizi bir adım daha bu konular hakkında bilgili olmaya itecektir. Uygulama örneğimizde margin:auto kullanımı, sola yaslanama için float:left kullanımından yararlanılmıştır.


Uygulamanın html kod metin alanı aşağıdaki gibidir:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css-3.css" rel="stylesheet">
</head>
<body>
<div id="sayfa">
<div id="ust">Üst</div>
<div id="sol">Sol</div>
<div id="orta">Orta</div>
<div id="sag">Sağ</div>
<div id="alt">Alt</div>
</div>
</body>
</html>

Uygulamanın css kod metin alanı aşağıdaki gibidir:


/* CSS Document */
#sayfa
{
width:960px;
margin: auto;
}
#ust
{
height:75px;
background-color:#7C84C0;
text-align:center;
vertical-align:middle;
margin:0 0 5px 0;
line-height:75px;
}
#sol
{
height:500px;
width:130px;
background-color:#0D275A;
text-align:center;
vertical-align:middle;
text-transform:uppercase;
float:left;
line-height:350px;
}
#orta
{
width:700px;
height:500px;
background-color:#101232;
text-align:center;
vertical-align:middle;
text-transform:uppercase;
float:left;
color: aliceblue;
}
#sag
{
height:500px;
width:130px;
background-color:#0D275A;
text-align:center;
vertical-align:middle;
text-transform:uppercase;
float:right;
}
#alt
{
clear:both;
height:75px;
background-color:#27989A;
text-align:center;
vertical-align:middle;
text-transform:uppercase;
}

Bu uygulamada herhangi bir sorun yaşarsanız aşağıya yorum olarak bırakabilirsiniz. Bunun yanı sıra web sitemizdeki diğer hazır Html programlama örneklerine ulaşmak için bu linke tıklayabilirsiniz

Yorum Gönder

Daha yeniDaha eski