Öğeleri Düzenle

Coddy'nin HTML Journey'sinin Styling with CSS bölümünün bir parçası — ders 73 / 76.

Görev

Kolay

Basit bir yatay navigasyon çubuğu oluşturmak için flexbox pratiği yapalım. Menüyü aşağıdaki resimdeki tasarıma uyacak şekilde stillendirmek için CSS kullanın.

Aşağıdaki adımları takip edin:

Navigasyon çubuğunu bir flex kapsayıcısı (flex container) olarak ayarlayın.
Bağlantılar arasına boşluk ekleyin.
1. Bağlantıları eşit şekilde dağıtmak için justify-content: space-around kullanın.
Navigasyon çubuğunu stillendirin.
1. Arka plan rengini dark blue olarak ayarlayın.
2. Bağlantıların etrafında boşluk oluşturmak için biraz padding ekleyin.
Navigasyon bağlantılarını stillendirin.
1. <a> öğelerini seçin.
2. Metin rengini white olarak ayarlayın.
3. Varsayılan alt çizgiyi kaldırın.
4. Yazı tipi boyutunu 18px olarak ayarlayın.
5. Daha iyi boşluklandırma için 8px 15px padding ekleyin.

Kendin dene

<html>
    <head>
        <title>Arrange Items</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <nav class="navbar">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Contact</a>
        </nav>
    </body>
</html>