# 037: Tìm kiếm Tòa nhà, Phần 3 - Thủ thuật CSS

Anonim

Chúng tôi còn một chút việc phải làm để hoàn thành khu vực tìm kiếm.

Chúng tôi bị chệch hướng chỉ trong một giây khi tôi nhận thấy chúng tôi chưa thêm ảnh hưởng xếp chồng ba chiều vào bọc trang, vì vậy chúng tôi làm điều đó và thay đổi màu sắc.

Sau đó, chúng tôi làm việc trên khu vực “Tìm kiếm trong:”, đây là những liên kết nhỏ mà bạn có thể nhấp vào để thu hẹp tìm kiếm theo khu vực nào của trang web. Sau đó, chúng tôi sẽ làm cho điều đó thực sự hoạt động, nhưng chúng tôi sẽ đặt giao diện người dùng cho nó ở đây. Các liên kết có màu xanh lam nhạt, nhưng liên kết “đã chọn” chuyển sang màu trắng và được gạch chân, đó là nhiều phản hồi về liên kết được chọn.

Chúng tôi cũng thêm ký tự chữ A (mà chúng tôi lấy từ CopyPasteCharacter) dưới dạng một liên kết nhỏ mà bạn có thể nhấp (hoặc nhấn) để đóng vùng tìm kiếm.

Khi chúng tôi đã thiết kế xong tất cả, chúng tôi thấy rằng việc mở và đóng khu vực tìm kiếm hơi khó xử. Mọi thứ tạm thời bao trùm khi khu vực tìm kiếm mở tạm thời bị thu hẹp. Để khắc phục, chúng tôi đảm bảo không có gì kết thúc white-space: nowrap;và đảm bảo không có gì lạ oveflow: hidden;.

Tôi kết thúc nó bằng cách nói rằng chúng tôi sẽ tạo ra các công cụ tìm kiếm tiếp theo, nhưng chúng tôi thực sự không làm được điều đó tiếp theo, điều đó sẽ xuất hiện xung quanh Video # 094.