Em hãy thực hiện các yêu cầu dưới đây Trong tệp portfolio.html định kiểu riêng cho các mục

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

Vận dụng trang 128 Tin học 12: Em hãy thực hiện các yêu cầu dưới đây.

1. Trong tệp portfolio.html, định kiểu riêng cho các mục trong danh sách Các hoạt động đã tham gia như sau:

a) Đánh số đầu dòng cho mỗi mục.

b) Mỗi mục được đóng khung và màu sắc tuỳ ý.

2. Tạo một tệp HTML mới, trong đó bao gồm một thanh trình đơn mới theo các yêu cầu sau:

a) Thanh trình đơn gồm các mục sau: Trang chủ, Học tập, Phong trào và Liên lạc.

b) Mỗi mục là một siêu liên kết đến một tệp HTML tương ứng.

c) Thanh trình đơn nằm bên trái trang web, theo phương dọc.

d) Định kiểu màu sắc tuỳ ý khi người dùng tương tác với thanh trình đơn.

Gợi ý: Có thể sử dụng các phần tử như bảng hoặc khung.

Lời giải:

1. Trong tệp portfolio.html, định kiểu riêng cho các mục trong danh sách Các hoạt động đã tham gia như sau:

a) Đánh số đầu dòng cho mỗi mục.

b) Mỗi mục được đóng khung và màu sắc tuỳ ý.

2. Tạo một tệp HTML mới, trong đó bao gồm một thanh trình đơn mới theo các yêu cầu sau:

a) Thanh trình đơn gồm các mục sau: Trang chủ, Học tập, Phong trào và Liên lạc.

<div class="nav">

<ul>

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

<li><a href="hoctap.html">Học tập</a></li>

<li><a href="phongtrao.html">phongtrao</a></li>

<li><a href="lienlac.html">liênlac</a></li>

</ul>

</div>

b) Mỗi mục là một siêu liên kết đến một tệp HTML tương ứng.

a: active {

color: green;

}

c) Thanh trình đơn nằm bên trái trang web, theo phương dọc.

<div class="nav">

<ul>

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

<li><a href="hoctap.html">Học tập</a></li>

<li><a href="phongtrao.html">phongtrao</a></li>

<li><a href="lienlac.html">liênlac</a></li>

</ul>

</div>

d) Định kiểu màu sắc tuỳ ý khi người dùng tương tác với thanh trình đơn.

.nav li a: hover {

color: #0066cc;

background-color: #ffffff;

}

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:

• Khởi động trang 123 Tin học 12: Điều gì sẽ sảy ra khi nháy chọn siêu liên kết và danh sách ....

• Hoạt động trang 125 Tin học 12: Viết mã lệnh CSS để khi người dùng di chuyển con trỏ chuột đến siêu liên kết sẽ phóng to cỡ chữ ....

• Hoạt động trang 126 Tin học 12: Em hãy thay đổi lần lượt các giá trị của thuộc tính list-style-position ....

• Luyện tập 1 trang 127 Tin học 12: Thảo luận với bạn và cho biết các trạng thái của siêu liên kết khi có sự tương tác của người dùng ....

• Luyện tập 2 trang 127 Tin học 12: Em hãy cho biết cách định kiểu cho các mục trong danh sách trong CSS ....

• Thực hành trang 127 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 ....

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:

• Tin học 12 Bài F11: Định kiểu CSS cho bảng và phần tử <div>

• Tin học 12 Bài F12: Định kiểu CSS cho biểu mẫu

• Tin học 12 Bài F13: Dự án tạo trang web (tiếp theo)

• Tin học 12 Bài F14: Học máy

• Tin học 12 Bài F15: Khoa học dữ liệu

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

• Giải sgk Tin học 12 Chân trời sáng tạo
• Giải Chuyên đề Tin học 12 Chân trời sáng tạo
• Giải SBT Tin học 12 Chân trời sáng tạo
• Giải lớp 12 Chân trời sáng tạo (các môn học)
• Giải lớp 12 Kết nối tri thức (các môn học)
• Giải lớp 12 Cánh diều (các môn học)

---