Programlama öğrenmek için her zaman yeni örnekler denemelisiniz. Bunun için bugün sizlere Css ve Html İle Nth-Child İşlem Uygulaması 4 programını aktaracağız. Css ve Html de kodlama nasıl gerçekleşir? Css ve Html İle Nth-Child İşlem Uygulaması 4 nasıl kodlanır? Gibi sorularınızın cevabını bu içeriğimizde bulabilirsiniz.
Css ve Html İle Nth-Child İşlem Uygulaması Kod Alanı
Css ve Html web programlama dilinde Nth-Child İşlem Uygulaması 4 kod metnini oluşturduk. Bu uygulamamızda css ile birlikte kullanılan nth-child ifadelerinin birçok farklı kullanımı bulunmaktadır. Bu örneğimizde bu kullanımlar ile ilgili bir içerik oluşturacağız. Bu durumu kavrayabilmek için bu tür örnekleri sıklıkla tekrarlamalısınız. Bu uygulamamızda nth-child(odd) ve nth-child(even) kullanarak tek ve çift olan kutuları ayrı ayrı seçmeyi öğreneceğiz. Uygulamanın html kod metin alanı aşağıdaki gibidir:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Örnek</title>
<style>
.sayfa{
width: 1200px;
margin: auto;
}
.kutu{
width: 180px;
height: 180px;
border: 5px solid #000;
margin: 10px;
background: white;
line-height: 180px;
float: left;
text-align: center;
font-size: 2em;
}
.sayfa > .kutu:nth-child(odd)
{
background: blue;
}
.sayfa > .kutu:nth-child(even)
{
background: red;
}
</style>
</head>
<body>
<div class="sayfa">
<div class="kutu">1</div>
<div class="kutu">2</div>
<div class="kutu">3</div>
<div class="kutu">4</div>
<div class="kutu">5</div>
<div class="kutu">6</div>
<div class="kutu">7</div>
<div class="kutu">8</div>
<div class="kutu">9</div>
<div class="kutu">10</div>
<div class="kutu">11</div>
<div class="kutu">12</div>
<div class="kutu">13</div>
<div class="kutu">14</div>
<div class="kutu">15</div>
<div class="kutu">16</div>
<div class="kutu">17</div>
<div class="kutu">18</div>
<div class="kutu">19</div>
<div class="kutu">20</div>
</div>
</body>
</html>
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.