Tekrar Mücadelesi

Coddy'nin HTML Journey'sinin CSS ile Stil Verme bölümünün bir parçası. Ders 60 / 76.

Görev

Kolay

CSS'de relative, absolute, fixed ve z-index dâhil olmak üzere çeşitli konumlandırma tekniklerini öğrendiğine göre, şimdi kapsamlı bir görevle bilgini sınama zamanı. Bu görev, karmaşık ve dinamik düzenler oluşturmak için bu özellikleri birlikte nasıl kullanacağını anlamanı pekiştirmene yardımcı olacak. Belirli bir tasarımı yeniden oluşturmak için her konumlandırma düzeni hakkında öğrendiklerini uygulayacaksın.

Sana bir pizza restoranı web sitesi için bir HTML belgesi veriliyor. Görevin, düzenli ve derli toplu bir görünüm oluşturmak için aşağıdaki öğeleri CSS konumlandırma özelliklerini kullanarak biçimlendirmek.

Aşağıdaki adımları izle:

Üst Bilgiyi Biçimlendirme:
- <header> öğesini hedefle.
- Sayfanın üst kısmında kalması için position değerini fixed olarak ayarla.
- Sayfanın tüm genişliğini kaplamasını sağlamak için top değerini 0, left değerini 0 ve width değerini 100% olarak ayarla.
- Üst bilginin sayfadaki diğer öğelerin üzerinde olmasını sağlamak için z-index değerini 10 olarak ayarla.
Menü Bölümünü Biçimlendirme:
- .menu sınıfını hedefle.
- Akıştaki normal konumuna göre konumlandırılabilmesi için position değerini relative olarak ayarla.
Promosyon Kutusunu Biçimlendirme:
- .promotions sınıfını hedefle.
- .menu bölümüne göre konumlandırmak için position değerini absolute olarak ayarla.
- Menünün sağ üst tarafına yerleştirmek için top değerini 100px, right değerini ise 20px olarak ayarla.
- Üst bilginin altında, ancak menüdeki diğer içeriğin üzerinde kalmasını sağlamak için z-index değerini 5 olarak ayarla.

Kendin dene

<html>
<head>
    <title>Pizza Restaurant</title>
    <style>
        /* Fixed Header */
        header {
            background-color: #ff6f61;
            padding: 20px;
            text-align: center;
            font-size: 24px;
            color: white;
        }
        /* Menu Section (Relative) */
        .menu {
            margin-top: 70px; /* Space for fixed header */
            padding: 20px;
            background-color: #f8f8f8;
            font-size: 18px;
        }
        /* Promotions Box (Absolute) */
        .promotions {
            background-color: #ffdf00;
            padding: 10px;
            font-size: 20px;
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <!-- Sabit Üstbilgi -->
    <header>
        Pizza Restaurant
    </header>
    <!-- Menü Bölümü -->
    <div class="menu">
        <h2>Our Menu</h2>
        <ul>
            <li>Margherita</li>
            <li>Pepperoni</li>
            <li>Veggie</li>
            <li>Hawaiian</li>
        </ul>       
        <p>Order now and enjoy!</p>
        <!-- Kampanyalar Kutusu -->
        <div class="promotions">
            <p>Get 20% off your first order!</p>
        </div>
    </div>
    <div class="pizza-info">
        <h2>About Pizza</h2>
        <p>Pizza, a dish with origins in Italy, is one of the world's most beloved foods. It was first made in Naples during the 18th century, with the classic Margherita pizza being named after Queen Margherita of Savoy. The traditional pizza is known for its simple ingredients: a thin crust, tomato sauce, mozzarella cheese, and fresh basil.</p>
        <p>Over the years, pizza has evolved into a variety of regional styles, from thin-crust New York-style pizza to deep-dish Chicago pizza. While the toppings have diversified, the tradition of sharing a pizza with family and friends remains an essential part of the pizza experience.</p>
        <p>In Italy, pizza is often enjoyed casually, typically paired with a glass of wine or soda. It is a symbol of Italian culture, and many believe that a good pizza is a representation of the country's culinary expertise and passion for food.</p>
        <p>Pizza's global reach has led to many variations and adaptations in different countries. In Japan, for example, toppings like teriyaki chicken and squid are popular, while in Brazil, green peas and corn are commonly found on pizzas. In the United States, pizza has become a staple of fast food, with different regions offering their unique twists, such as the deep-dish pizza from Chicago and the thin crust of New York City.</p>
    </div>
</body>
</html>

CSS ile Stil Verme bölümündeki tüm dersler

2CSS Ekleme

Satır İçi CSS Dahili CSS Harici CSS Temel Biçimlendirme Görevi

5Renkler ve Arka Planlar

Arka Plan Rengi HEX Renkleri RGB Renkleri RGBA ile Şeffaflık Tekrar Görevi #1

8Kutu Modeli 2. Bölüm

Kutu Boyutlandırma Kenar Yarıçapı Taşma Kutu Gölgesi Tekrar Görevi

11Düzen Teknikleri

Blok ve Satır İçi Öğeler Konumlandırma Temelleri Göreli Konumlandırma Mutlak Konumlandırma Sabit Konumlandırma Z-Index TemelleriTekrar Mücadelesi

14Final Görevler

Ögeleri Düzenleme Film Listesi Düğün Davetiyesi Yüzen Bildirim

Kendi başına pratik yap: Web playground