Css ve Html İle Nth-Child İşlem Uygulaması 3

   

Programlama öğrenmek için her zaman yeni örnekler denemelisiniz. Bunun için bugün sizlere Css ve Html İle Nth-Child İşlem Uygulaması 3 programını aktaracağız.  Css ve Html  de kodlama nasıl gerçekleşir? Css ve Html İle Nth-Child İşlem Uygulaması 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 Nth-Child İşlem Uygulaması Kod Alanı


Css ve Html  web programlama dilinde Nth-Child İşlem Uygulaması 3 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 daha önceden belirlenmiş 4-9-14-19 nolu kutuları mavi renge boyayacağı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: white;
line-height: 180px;
float: left;
text-align: center;
font-size: 2em;
}

.sayfa > .kutu:nth-child(5n-1)
{
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">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.

Yorum Gönder

Daha yeni Daha eski

İletişim