Thử thách ôn tập

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 60 trên 76.

Thử thách

Dễ

Giờ đây, bạn đã học nhiều kỹ thuật định vị trong CSS, bao gồm relative, absolute, fixed và z-index. Đã đến lúc thử sức với một thử thách toàn diện để kiểm tra kiến thức của bạn. Thử thách này sẽ giúp bạn củng cố hiểu biết về cách kết hợp các thuộc tính này để tạo bố cục phức tạp và linh hoạt. Bạn sẽ áp dụng những gì đã học về từng kiểu định vị để tái tạo một thiết kế cụ thể.

Bạn được cung cấp một tài liệu HTML cho trang web của một nhà hàng pizza. Nhiệm vụ của bạn là dùng các thuộc tính định vị CSS để tạo kiểu cho những phần tử sau, nhằm tạo bố cục gọn gàng và ngăn nắp.

Hãy làm theo các bước dưới đây:

Tạo kiểu cho phần đầu trang:
- Chọn phần tử <header>.
- Đặt position thành fixed để phần này luôn nằm ở đầu trang.
- Đặt top thành 0, left thành 0 và width thành 100% để phần này trải rộng toàn bộ chiều ngang trang.
- Dùng z-index bằng 10 để phần đầu trang nằm phía trên các phần tử khác.
Tạo kiểu cho phần thực đơn:
- Chọn lớp .menu.
- Đặt position thành relative để có thể định vị phần này tương quan với vị trí bình thường của nó trong luồng trang.
Tạo kiểu cho hộp khuyến mãi:
- Chọn lớp .promotions.
- Đặt position thành absolute để định vị phần này tương quan với phần .menu.
- Đặt top thành 100px và right thành 20px để đặt phần này gần góc trên bên phải của thực đơn.
- Dùng z-index bằng 5 để phần này nằm dưới phần đầu trang nhưng phía trên nội dung khác trong thực đơn.

Tự làm thử

<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>
    <!-- Phần đầu trang cố định -->
    <header>
        Pizza Restaurant
    </header>
    <!-- Phần thực đơn -->
    <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>
    </div>
    <!-- Hộp khuyến mãi -->
    <div class="promotions">
        <p>Get 20% off your first order!</p>
    </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>