Tạo giao diện tìm kiếm đẹp bằng HTML và CSS có thể làm cho trang web của bạn trông chuyên nghiệp và thân thiện với người dùng.
Dưới đây là một ví dụ về cách tạo giao diện tìm kiếm bằng HTML và CSS:
Code đầy đủ.
Bạn tạo một file index.html và mở bằng trình duyệt chrome
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Beautiful Search Interface</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f2f5; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .search-container { background: #fff; border-radius: 50px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); padding: 20px; display: flex; align-items: center; } .search-box { border: none; outline: none; padding: 10px 20px; font-size: 16px; border-radius: 50px; width: 300px; transition: width 0.4s ease-in-out; } .search-box:focus { width: 400px; } .search-button { background: #007BFF; border: none; color: #fff; padding: 10px 20px; font-size: 16px; border-radius: 50px; cursor: pointer; margin-left: 10px; transition: background 0.3s ease; } .search-button:hover { background: #0056b3; } </style> </head> <body> <div class="search-container"> <input type="text" class="search-box" placeholder="Search..."> <button class="search-button">Search</button> </div> </body> </html>
Trong đoạn mã trên:
HTML:
CSS:
Bạn có thể tùy chỉnh thêm theo ý muốn để phù hợp với phong cách của trang web.
search-box | search-button | search-button:focus | |
width: 300px; | width: 400px; | Tăng độ rộng lên | |
transition: width 0.4s ease-in-out; | transition: background 0.3s ease; | Đổi màu bachground |
#Mtips5s #Contact
Fanpage: https://www.facebook.com/mtipscoder
Group trao đổi, chia sẻ: https://www.facebook.com/groups/mtipscoder
Website: https://mtips5s.com
Youtube: https://mtips5s.com
Twitter(X): @takagiks99
Instagram: @khuongkara
Threads: @khuongkara
Google Maps: @khuongkara
#Base Code #Souce Code
Bộ công cụ My Self: @tools.mtips5s.com
Github: @github
Npm: @npm
Docker: @docker
Chúc các bạn thành công!
Leave A Comment