Trang web đáp ứng mẫu

Question

Tôi đang làm bài tập trong khóa học HTML-CSS Coursera. Nhiệm vụ là cung cấp một trang đáp ứng đơn giản, có thể tìm thấy ở đây .

Tôi nghĩ 1 đã nghĩ ra một giải pháp, nhưng cuối cùng chỉ có khoảng 100 dòng cho biểu định kiểu, vì vậy tôi giả sử rằng có một số cách để đạt được bố cục mong muốn một cách trực quan và dễ dàng hơn. Tôi muốn có một chút phản hồi về những gì tôi có thể cải thiện ở đây.

* {
    font-family: "Comic Sans MS", cursive, sans-serif;
    box-sizing: border-box;
}

h1{
    text-align: center;
}


.sign_fs{
    position: relative;
    width: 50%;
    min-width: fit-content;
    padding: 5px 10px 5px 10px;
    border: 5px solid black;
    float: right;
    font-size: 20px;
    text-align: center;
    margin-top: -2px;
    margin-right: -2px;
}

#chicken {
    background-color: pink;
}

#beef {
    background-color: slateblue;
}

#sushi{
    background-color: skyblue;
}

@media (min-width: 992px) {
    .text_fs {
        font-size: 15px;
        clear: both;
        margin: 1%;
        padding: 1%;
    }

    .div_fs {
        background-color: grey;
        border: 2px solid black;
        width: 31.2%;
        margin: 1%;
        float: left;
    }

}

@media(max-width: 992px) and (min-width:768px) {
    .text_fs {
        font-size: 15px;
        clear: both;
        margin: 1%;
        padding: 1%;
    }

    .div_tablet_top {
        background-color: grey;
        border: 2px solid black;
        width: 48%;
        margin: 1%;
        float: left;
    }

    .div_tablet_bot {
        background-color: grey;
        border: 2px solid black;
        width: 98%;
        margin: 1%;
        float: left;
    }

    #sushi{
        width: 20%;
    }
}

@media (max-width: 768px) {
    section {
        margin: 10px;
        padding-top: 0px;
    }

    .div_mobile{
        background-color: grey;
        border: 2px solid black;
        margin: 1%;
        margin-top: 20px;
        padding: 10px;

    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module 2 solution</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Our Menu</h1>
    <section>
        <div class="div_fs div_tablet_top div_mobile">
            <div class="sign_fs" id="chicken">Chicken</div>
            <div class="text_fs" >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
        <div class="div_fs div_tablet_top div_mobile">
            <div class="sign_fs" id="beef">Beef</div>
            <div class="text_fs" >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>        
        <div class="div_fs div_tablet_bot div_mobile">
            <div class="sign_fs" id="sushi">Sushi</div>
            <div class="text_fs">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
    </section>
</body>
</html>

Answer 1

Đơn giản hóa bố cục tổng thể

Trong khi 1 người chưa xem qua các khóa học thì 1 video đã xem qua giáo trình. 1 thấy rằng nhiệm vụ tiếp theo có liên quan đến việc sử dụng khung Bootstrap. Vì nhiệm vụ này không yêu cầu sử dụng khuôn khổ, một tùy chọn để xem xét là flexbox . Nó được thiết kế để loại bỏ sự cần thiết của các phần tử nổi. Một điều quan trọng cần xem xét là khả năng tương thích của trình duyệt . 1 từ một tìm kiếm lướt qua không thấy bất kỳ yêu cầu nào về khả năng tương thích của trình duyệt trong ASSIGNMENT mã hóa Mô-đun 2 nhưng đó là điều cần xem xét trong các dự án khác.

Đơn giản hóa các quy tắc hiện tại

Dưới đây là một số gợi ý để đơn giản hóa các quy tắc hiện tại trong biểu định kiểu mà không giới thiệu các kiểu linh hoạt.

đơn giản hóa đường viền

Bộ quy tắc cho .sign_fschứa quy tắc đường viền này:

 padding: 5px 10px 5px 10px;

Điều này có thể được đơn giản hóa thành

padding: 5px 10px

bởi vì "Khi hai giá trị được chỉ định, đường viền đầu tiên áp dụng cho trên cùng và dưới cùng, đường viền thứ hai cho bên trái và bên phải ." ¹

những phong cách có thể được kết hợp với nhau

Trong @media(max-width: 992px) and (min-width:768px) { các bộ quy tắc cho .div_tablet_topvà .div_tablet_botgần giống nhau ngoại trừ các widthquy tắc, vì vậy tất cả các quy tắc khác có thể được trừu tượng hóa thành một bộ quy tắc chung:

.div_tablet_top,
.div_table_bottom {
    background-color: grey;
    border: 2px solid black;
    margin: 1%;
    float: left;
}

Tên lớp thừa

Tên lớp div_fsvà div_mobileđược chia sẻ bởi tất cả các <div>phần tử là con cháu trực tiếp của <section>phần tử. Do đó, những tên lớp đó có thể bị loại bỏ và các bộ chọn chỉ có thể sử dụng Bộ kết hợp con ;section > div

Answer 2

Từ một đánh giá ngắn, 2 mục;

• Comic Sans sẽ tìm kiếm một phông chữ khác .. 1

• Việc mã hóa cứng các mặt hàng thực phẩm của bạn (thịt bò, gà, sushi) sẽ không hoạt động tốt theo thời gian, vì bạn không thể nhìn thấy mối liên hệ giữa thực phẩm và màu sắc. 1 sẽ đề nghị bạn chỉ cần đưa ra một màu sắc cho các mục đầu tiên, thứ hai và thứ ba. Ví dụ bên dưới sẽ làm cho dấu hiệu đầu tiên màu hồng;

    section>div:nth-child(1)>.sign_fs{
        background-color: pink;
    }
  

1 giờ sáng Không có chuyên gia CSS, vì vậy tôi đã phải chơi một lúc với nó để làm cho nth-childbộ chọn hoạt động;

* {
    font-family: "Comic Sans MS", cursive, sans-serif;
    box-sizing: border-box;
}

h1{
    text-align: center;
}


.sign_fs{
    position: relative;
    width: 50%;
    min-width: fit-content;
    padding: 5px 10px 5px 10px;
    border: 5px solid black;
    float: right;
    font-size: 20px;
    text-align: center;
    margin-top: -2px;
    margin-right: -2px;
}

/* pink, cornflowerblue,  skyblue*/

section>div:nth-child(1)>.sign_fs{
    background-color: pink;
}

section>div:nth-child(2)>.sign_fs{
    background-color: cornflowerblue;
}

section>div:nth-child(3)>.sign_fs{
    background-color: skyblue;
}


@media (min-width: 992px) {
    .text_fs {
        font-size: 15px;
        clear: both;
        margin: 1%;
        padding: 1%;
    }

    .div_fs {
        background-color: grey;
        border: 2px solid black;
        width: 31.2%;
        margin: 1%;
        float: left;
    }

}

@media(max-width: 992px) and (min-width:768px) {
    .text_fs {
        font-size: 15px;
        clear: both;
        margin: 1%;
        padding: 1%;
    }

    .div_tablet_top {
        background-color: grey;
        border: 2px solid black;
        width: 48%;
        margin: 1%;
        float: left;
    }

    .div_tablet_bot {
        background-color: grey;
        border: 2px solid black;
        width: 98%;
        margin: 1%;
        float: left;
    }

    #sushi{
        width: 20%;
    }
}

@media (max-width: 768px) {
    section {
        margin: 10px;
        padding-top: 0px;
    }

    .div_mobile{
        background-color: grey;
        border: 2px solid black;
        margin: 1%;
        margin-top: 20px;
        padding: 10px;

    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Module 2 solution</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Our Menu</h1>
    <section>
        <div class="div_fs div_tablet_top div_mobile">
            <div class="sign_fs" id="chicken">Chicken</div>
            <div class="text_fs" >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
        <div class="div_fs div_tablet_top div_mobile">
            <div class="sign_fs" id="beef">Beef</div>
            <div class="text_fs" >
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>        
        <div class="div_fs div_tablet_bot div_mobile">
            <div class="sign_fs" id="sushi">Sushi</div>
            <div class="text_fs">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </div>
        </div>
    </section>
</body>
</html>