Xin chào các bạn, hôm nay chúng ta sẽ tiếp tục với phần tiếp theo của chuỗi bài viết về xây dựng giao diện đa cấp với CSS. Trong bài học trước, chúng ta đã tìm hiểu cách xây dựng menu đa cấp, và trong video này, chúng ta sẽ cùng nhau xây dựng phần ô Tìm kiếm.
Tìm kiếm là một phần quan trọng trong mỗi trang web. Việc tìm kiếm này dễ dàng đối với những người đã quen sử dụng các trang web khác. Vì vậy, để đơn giản hóa công việc này, chúng ta sử dụng thuộc tính placeholder. Trong đó, chúng ta chỉ cần thêm icon và khi di chuột vào, nền của nó sẽ thay đổi thành màu đỏ. Nhưng làm sao để đưa nó sang vị trí bên phải? Đó chính là sử dụng thuộc tính float với giá trị “right”. Tại đây, lưu ý là nó đang có cái gì đó thiếu, tại sao lại để đến bây giờ mới cho ai cần? Bởi vì đơn giản, bây giờ mới đúng là mình đang cần thực sự. Còn với các bạn thí nghiệm rồi, các bạn ngay từ khi tạo trang, kết quả đã nhúng ra và luôn đấy. Để tránh phức tạp hóa việc dựng, mình làm đơn giản cho các bạn có thể nắm được. Còn giới thiệu cho các bạn tôi cái bộ icon là xin file này rất là giúp mình. Các bạn có thể bấm vào trang ở dưới để xem và tải về. Nhớ lưu đó đây để lưu vào thư mục của chúng ta. Mình đặt ở trong thư mục img này.
Ảnh minh họa:
Ok, giờ chúng ta đã có các file cần thiết. Bây giờ, mình sẽ chỉ cho các bạn cách sử dụng các file này trong trang web của chúng ta. Đầu tiên, chúng ta cần import file CSS của bộ icon này vào trong dự án của chúng ta. Đặt file này vào thư mục “assets/css” hoặc thư mục mà bạn đã đặt dự án của mình. Sau đó, chúng ta sẽ thêm đoạn mã sau vào file CSS của chúng ta:
.header-search {
background-color: #fff; /* Thay đổi màu cho phù hợp với giao diện của bạn */
float: right;
width: 200px;
height: 40px;
border-radius: 20px;
padding: 10px;
box-sizing: border-box;
}
.header-search input {
width: 100%;
height: 100%;
border: none;
outline: none;
background: transparent;
font-size: 14px;
padding-left: 20px;
}
.header-search .search-icon {
float: left;
margin-top: 10px;
margin-right: 10px;
width: 20px;
height: 20px;
background-image: url("/assets/images/search-icon.png"); /* Thay đổi đường dẫn hình ảnh cho phù hợp với dự án của bạn */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}Ở đây, chúng ta đã tạo một class mới là .header-search và các style tương ứng để tạo ô tìm kiếm. Các bạn có thể thay đổi màu sắc, kích thước và hình ảnh cho phù hợp với giao diện của dự án của mình.
Tiếp theo, chúng ta cần thêm HTML để hiển thị ô tìm kiếm trong trang web của chúng ta. Đặt đoạn mã HTML sau vào vị trí mà bạn muốn hiển thị ô tìm kiếm:
<div class="header-search">
<input type="text" placeholder="Tìm kiếm...">
<div class="search-icon"></div>
</div>Trong đoạn mã trên, chúng ta đã sử dụng class .header-search để bao bọc ô tìm kiếm và các phần tử con bên trong. Các bạn có thể thay đổi giá trị của thuộc tính placeholder cho phù hợp với nhu cầu của dự án của mình.
Sau khi thêm đoạn mã CSS và HTML vào trang web của chúng ta, chúng ta có thể thấy kết quả bằng cách di chuột vào ô tìm kiếm. Nếu các bạn muốn nó nhỏ lại một chút hoặc lớn hơn, các bạn chỉ cần thay đổi giá trị của thuộc tính width và height cho phù hợp.
Đó là cách chúng ta tối ưu hóa từ khóa “tìm kiếm” cho phần header trong trang web của chúng ta. Hy vọng rằng thông qua bài viết này, các bạn đã nắm được cách thực hiện và áp dụng vào dự án của mình. Nếu các bạn có bất kỳ câu hỏi hoặc thắc mắc nào, hãy để lại bình luận ở dưới. Chúng tôi sẽ cố gắng giúp đỡ các bạn.