16. Map & footer CSS

16. Map & footer CSS

Xin chào các bạn! Hôm nay chúng ta sẽ tiếp tục phần tiếp theo của bài học trước đó và tìm hiểu về cách tối ưu hóa CSS cho các phần bản đồ và chân trang. Trong phần này, chúng ta sẽ tháo gỡ hai vấn đề khác nhau mà tôi mới nhận thấy.

Vấn đề đầu tiên là về nút “Like” trên bản đồ. Hiện tại, nút này không có hiệu ứng khi di chuột vào và không thay đổi màu sắc. Để sửa lỗi này, chúng ta sẽ thay đổi class của nút từ “praised by Chanel” thành “shared by COMDY” để định dạng lại nút. Sau khi thay đổi class, chúng ta cũng nên kiểm tra lại các chỉ mục liên quan đến nút này để đảm bảo rằng nó vẫn hoạt động như bình thường.

Vấn đề thứ hai liên quan đến khoảng cách giữa phần tiêu đề và phần đăng ký của chân trang. Hiện tại, khoảng cách này khá lớn và chúng ta nên làm sao đó để giảm khoảng cách này xuống. Để giải quyết vấn đề này, ta cần thêm một class mới vào các thẻ có liên quan và điều chỉnh giá trị của class này để giảm khoảng cách.

Tiếp theo, chúng ta sẽ tạo một vùng chứa cho các biểu tượng mạng xã hội ở cuối chân trang. Trong phần này, chúng ta sẽ sử dụng một thẻ

và thêm các class tương ứng cho từng biểu tượng mạng xã hội (Facebook, Instagram, Pinterest, và LinkedIn). Bằng cách thêm các class này, chúng ta có thể tạo ra hiệu ứng khi di chuột và sử dụng các biểu tượng mạng xã hội theo ý muốn.

Cuối cùng, để đảm bảo tất cả các thay đổi của chúng ta đã hoạt động đúng, hãy xem lại trang web của chúng ta. Bạn sẽ nhận thấy rằng các vấn đề đã được giải quyết và trang web của bạn trông phù hợp hơn.

Với những bước tối ưu hóa CSS này, chúng ta đã hoàn thành phần tiếp theo của bài học. Cảm ơn các bạn đã theo dõi và hẹn gặp lại các bạn trong bài học tiếp theo! Nếu bạn cần bất kỳ sự hỗ trợ nào, hãy liên hệ với COMDY qua trang web COMDY.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *