Nhiệm vụ. Định kiểu CSS cho siêu liên kết và danh sách. Yêu cầu: Trong trang web kỉ yếu lớp

HOT Ra mắt Sách 20 đề THPT quốc gia form 2025 toán, văn, anh.... (từ 80k/1 cuốn)

Giải Tin học 12 Bài F10: Định kiểu CSS cho siêu liên kết và danh sách - Chân trời sáng tạo

Thực hành trang 160 Tin học 12: Nhiệm vụ. Định kiểu CSS cho siêu liên kết và danh sách.

Yêu cầu: Trong trang web kỉ yếu lớp, tạo thanh trình đơn ngang nằm ở đầu trang chủ của trang index.html như Hình 10 và Hình 11.

Quảng cáo

Lời giải:

Thanh trình đơn là một danh sách gồm 3 mục, nằm theo phương ngang. Mỗi mục của thanh trình đơn là một siêu liên kết. Các bước thực hiện như sau:

''Trong tệp index.html, thêm đoạn mã HTML tạo danh sách gồm các mục của thanh trình đơn.

<ul>

<li><a href="index.html">Trang chủ</a></li>

<li><a href="thanhvienlop.html">Thành viên lớp</a></li>

</ul> </div>

Danh sách gồm 3 mục là 3 siêu liên kết đến các lập HTMI. khác và được đặt trong thể <div>. Em sẽ định kiểu cho thẻ <div> bằng khai báo vùng chọn lớp là nav.

Q Định kiểu cho thẻ <div> của thanh trình đơn bằng cách khai bảo vùng chọn là lớp nay. Lớp nav có thể được khai báo trong thẻ <style> đặt bên trong thẻ <head).

<head>

<title>Minh hoa navigation bar</title>

<style>

.nav {

background-color: #0066cc;

overflow: hidden;

}

</style>

</head>

2 Định kiểu để các mục đếu nằm cùng dòng trên thanh trình đơn thay vì hiển thị từng dòng như thông thường.

-nav li {

}

display: inline;

Khai báo vùng chọn này nhằm định kiểu các thẻ <li> bên trong các thẻ có chỉ định lớp nav. | Giãn cách các mục trên thanh trình đơn bằng cách định kiểu cho vùng đệm, đồng thời định kiểu cho màu chữ.

.nav li a {

}

color: #ffffff; text-decoration: none; padding: 20px;

Khai báo vùng chọn này nhằm định kiểu cho các thẻ cao nằm bên trong các thẻ <li> của Đ

* Tạo hiệu ứng đổi màu nền và mẫu chủ của thanh trình đơn khi người dùng di chuyển con trỏ chuột đến các mục bằng cách khai báo vùng chọn có trạng thái hover.

.nav li a:hover {

}

color: #0066cc;

background-color: #ffffff;

6 Mở tệp HTML vừa tạo để kiểm tra kết quả.

Quảng cáo

Lời giải bài tập Tin học 12 Bài F10: Định kiểu CSS cho siêu liên kết và danh sách hay khác:

Quảng cáo

Xem thêm lời giải bài tập Tin học lớp 12 Chân trời sáng tạo hay nhất, ngắn gọn khác:

Xem thêm các tài liệu học tốt lớp 12 hay khác:

HOT 500+ Đề thi thử tốt nghiệp THPT, ĐGNL các trường ĐH fle word có đáp án (2025).

Sách VietJack thi THPT quốc gia 2025 cho 2k7:

TÀI LIỆU FILE WORD DÀNH CHO GIÁO VIÊN VÀ PHỤ HUYNH LỚP 12

+ Bộ giáo án, đề thi tốt nghiệp THPT, DGNL các trường các trường có lời giải chi tiết 2025 tại https://tailieugiaovien.com.vn/

+ Hỗ trợ zalo: VietJack Official

+ Tổng đài hỗ trợ đăng ký : 084 283 45 85

500+ đề thi thử tốt nghiệp THPT Quốc gia form 2025

( 128 tài liệu )

100+ đề thi ĐGNL ĐHQG Hà Nội, Tp.Hồ Chí Minh...

( 84 tài liệu )

Đề thi giữa kì, cuối kì 12

( 143 tài liệu )

Bài giảng Powerpoint Văn, Sử, Địa 12....

( 31 tài liệu )

Chuyên đề dạy thêm Toán, Lí, Hóa ...12

( 104 tài liệu )

Đề thi HSG 12

( 4 tài liệu )

xem tất cả

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.