Programlama öğrenmek için her zaman yeni örnekler denemelisiniz. Bunun için bugün sizlere Css ve Html İle Nth-Child İşlem Uygulaması programını aktaracağız. Css ve Html de kodlama nasıl gerçekleşir? Css ve Html İle Nth-Child İşlem Uygulaması 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ı 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. 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: red;
line-height: 180px;
float: left;
text-align: center;
font-size: 2em;
}
.sayfa > .kutu:nth-child(8){
background: blue;
}
</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">16</div>
<div class="kutu">16</div>
<div class="kutu">16</div>
<div class="kutu">16</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.