Close
[ Better ] [ Component ] Tạo giao diện tìm kiếm siêu đẹp 2024
Mục lục
Tạo giao diện tìm kiếm bằng HTML và CSS thật đẹp
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:div.search-container: Khối chứa giao diện tìm kiếm.input.search-box: Ô nhập liệu để người dùng nhập từ khóa tìm kiếm.button.search-button: Nút tìm kiếm.
- div.search-container: Khối chứa giao diện tìm kiếm.
- input.search-box: Ô nhập liệu để người dùng nhập từ khóa tìm kiếm.
- button.search-button: Nút tìm kiếm.
- CSS:Tạo kiểu cho thân trang (body) để căn giữa nội dung và tạo nền màu xám nhạt.div.search-container: Tạo khối chứa với nền trắng, bo góc tròn và hiệu ứng đổ bóng.input.search-box: Tạo kiểu cho ô nhập liệu với bo góc tròn, hiệu ứng chuyển đổi chiều rộng khi được focus.button.search-button: Tạo kiểu cho nút tìm kiếm với nền màu xanh, bo góc tròn, và hiệu ứng khi hover.
- Tạo kiểu cho thân trang (body) để căn giữa nội dung và tạo nền màu xám nhạt.
- div.search-container: Tạo khối chứa với nền trắng, bo góc tròn và hiệu ứng đổ bóng.
- input.search-box: Tạo kiểu cho ô nhập liệu với bo góc tròn, hiệu ứng chuyển đổi chiều rộng khi được focus.
- button.search-button: Tạo kiểu cho nút tìm kiếm với nền màu xanh, bo góc tròn, và hiệu ứng khi hover.
HTML:
- div.search-container: Khối chứa giao diện tìm kiếm.
- input.search-box: Ô nhập liệu để người dùng nhập từ khóa tìm kiếm.
- button.search-button: Nút tìm kiếm.
CSS:
- Tạo kiểu cho thân trang (body) để căn giữa nội dung và tạo nền màu xám nhạt.
- div.search-container: Tạo khối chứa với nền trắng, bo góc tròn và hiệu ứng đổ bóng.
- input.search-box: Tạo kiểu cho ô nhập liệu với bo góc tròn, hiệu ứng chuyển đổi chiều rộng khi được focus.
- button.search-button: Tạo kiểu cho nút tìm kiếm với nền màu xanh, bo góc tròn, và hiệu ứng khi hover.
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.
Những điều cần lưu ý
| 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