Trang chủ Lớp 12 SGK Tin học 12- Kết nối tri thức Hãy đưa ra một thiết kế khác cho website đã tạo ở...

Hãy đưa ra một thiết kế khác cho website đã tạo ở phần Thực hành...

Tạo một tệp CSS mới và đặt tên là "style. css” (hoặc tên tùy chọn khác). Trả lời Câu hỏi trang 105 Vận dụng - Bài 18. Thực hành tổng hợp thiết kế trang web.

Câu hỏi/bài tập:

Hãy đưa ra một thiết kế khác cho website đã tạo ở phần Thực hành. Viết định dạng theo thiết kế mới và chuyển toàn bộ website sang định dạng mới.

Method - Phương pháp giải/Hướng dẫn/Gợi ý

Để áp dụng thiết kế mới cho trang web đã tạo trong phần Thực hành, em cần thực hiện các bước sau:

- Tạo một tệp CSS mới và đặt tên là "style.css” (hoặc tên tùy chọn khác).

- Trong tệp CSS, thêm mã CSS để định dạng các phần tử theo thiết kế mới.

Answer - Lời giải/Đáp án

Để áp dụng thiết kế mới cho trang web đã tạo trong phần Thực hành, em cần thực hiện các bước sau:

- Tạo một tệp CSS mới và đặt tên là "style.css” (hoặc tên tùy chọn khác).

- Trong tệp CSS, thêm mã CSS để định dạng các phần tử theo thiết kế mới.

Ví dụ:

/* Định dạng phần banner */

.banner {

background: url("../assets/img/bg-masthead.jpg”) no-repeat center center;

background-size: cover;

padding-top: 12rem;

padding-bottom: 12rem;

text-align: center;

color: darkred;

}

.banner h2 {

font-size: 36px;

font-weight: bold;

}

/* Định dạng phần slogan */

.slogan {

Advertisements (Quảng cáo)

background-color: rgb(248, 249, 250);

text-align: center;

padding-right: 0.5rem;

padding-left: 3rem;

padding-top: 7rem;

padding-bottom: 7rem;

}

.row {

display: flex;

flex-wrap: wrap;

margin-top: -1;

max-width: 100%;

padding-right: 3rem;

padding-left: 3rem;

}

.block_3 {

flex: 0 0 33.33333333%;

}

.block_3 h3 {

font-size: 24px;

font-weight: bold;

}

.text-content {

font-size: 16px;

color: #333;

}