Cách sử dụng cửa trượt trong CSS mà không cần tab

Cascading Style Sheets là một loại ngôn ngữ biểu định kiểu thêm phong cách vào nội dung Web được viết bằng ngôn ngữ đánh dấu, chẳng hạn như XML, HTML hoặc XHTML. Kỹ thuật cửa trượt trong CSS là về việc tạo hiệu ứng động bằng cách sử dụng hai hình nền riêng biệt. Hình ảnh trên cùng nằm trên hình ảnh phía dưới để tạo ảo ảnh mà không hoàn thành che khuất hình ảnh phía dưới. Mẹo để thực hiện kỹ thuật cửa trượt không có tab là tạo các yếu tố điều hướng dựa trên văn bản bằng cách sử dụng các danh sách được thiết kế bằng CSS.

1.

Bắt đầu bằng cách tạo một danh sách không sắp xếp các thành phần điều hướng của bạn được đính kèm trong thẻ DIVv Ví dụ:

• Trang chủ
• sản phẩm và dịch vụ
• Liên hệ chúng tôi

Trong ví dụ này, danh sách chứa các thẻ neo và span. Các thẻ neo sử dụng thuộc tính 271 href để liên kết đến vị trí cụ thể của các thành phần điều hướng. Nó cũng sử dụng thẻ để điều khiển kiểu văn bản trong các thành phần điều hướng.

2.

Thêm một số kiểu dáng cho các thành phần điều hướng bằng cách xác định màu nền, bật float, chỉ định lề, đặt tràn thành tự động và vô hiệu hóa kiểu danh sách cho các mục danh sách. Float là một thuộc tính CSS cho phép một phần tử di chuyển theo chiều ngang sang trái hoặc phải để các phần tử khác có thể bao quanh nó. Thuộc tính tràn xác định cách đối tượng sẽ hành xử nếu nội dung mở rộng ra ngoài hộp hình chữ nhật của nó. Bằng cách đặt tràn thành tự động, tràn sẽ bị ẩn nhưng một thanh cuộn có thể được thêm vào để xem nội dung tràn.

3.

Áp dụng hình ảnh nền đã chọn cho kiểu neo và nhịp để hoàn thành kỹ thuật cửa trượt và tạo hiệu ứng di chuột cho các thành phần điều hướng.