做网站开发我们肯定少不了一种最基本的功能，就是搜索框，那么搜索框样式也能让一个网站看起来更加美观上档次。现在我们就教大家一种如何把搜索框做的很美观的方法。
效果图：
实现这种效果有两种方法：一是整体处理一个背景，以透明gif图的方式定位到搜索框，或者切分开，这种方法加载快，而且灵活性更高。
文中用到的图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS美化的漂亮搜索框</title>
<style type="text/css">
body{ font: normal 100% 'Arial','Helvetica','Verdana',sans-serif; color: #333; }
p { padding: 12px 0; margin: 0; font-size: .8em; line-height: 1.5; }
form { margin: 0; } #search_box
{ width: 201px; height: 31px; background: url(http://files.jb51.net/demoimg/200912/bg_search_box.gif); } #search_box #s
{ float: left; padding: 0; margin: 6px 0 0 6px; border: 0; width: 159px; background: none; font-size: .8em; }
#search_box #go { float: right; margin: 3px 4px 0 0; } </style> </head> <body> <div id="search_box">
<form id="search_form" method="post" action="#"> <input type="text" id="s" value="Search" />
<input type="image" src="http://files.jb51.net/demoimg/200912/btn_search_box.gif" width="27" height="24" id="go" alt="Search" title="Search" />
</form>
</div>
</body>
</html>提示：您可以先修改部分代码再运行
以上就是我们用css实现的搜索框，简单美观，当然大家可以按照以上的方法去制作一个自己喜欢的搜索框。
相关推荐：
Atas ialah kandungan terperinci css制作好看的搜索框. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Cara membina resume anda pada npmApr 13, 2025 am 10:12 AMHanya semalam, Ali Churcher berkongsi cara yang kemas untuk membuat resume menggunakan susun atur grid CSS. Mari kita bina sedikit dengan membuat templat yang kita boleh berputar
Kes penggunaan untuk pemilih ibu bapaApr 13, 2025 am 10:11 AMMempunyai "pemilih induk" dalam CSS disebut secara teratur sebagai sesuatu yang benar -benar boleh digunakan CSS. Saya rasa seperti saya memikirkan banyak kali, tetapi kemudian
Berita Platform Mingguan: Perlindungan Penjejakan yang Tegas, Laman Web Gelap, Penyegerakan Latar Belakang BerkalaApr 13, 2025 am 10:05 AMDalam berita minggu ini: Firefox mendapat ketat, opera pergi ke sisi gelap, dan Chrome merancang untuk membiarkan aplikasi web berjalan di latar belakang.
Pembuatan 'Siri Khas' di Laman WordPressApr 13, 2025 am 10:04 AMKami hanya menjalankan siri artikel mewah di sini di CSS-Tricks dengan sekumpulan artikel yang berbeza yang menjawab soalan yang sama. Dengan mewah, maksud saya dua perkara:
Blok tayangan jetpackApr 13, 2025 am 10:03 AMSalah satu daripada banyak (banyak) perkara berguna yang Jetpack tidak memberi anda blok tersuai tambahan di editor WordPress Block (aka Gutenberg): tayangan slaid,
Hanya berkongsi gulpfile sayaApr 13, 2025 am 10:00 AMSeolah -olah keluar dari biru, pemprosesan Teluk yang saya buat untuk laman web ini mula mempunyai keadaan perlumbaan. I ' D Jalankan perintah jam tangan saya, ubah beberapa CSS, dan
Alat berkuasa sass yang berguna untuk membuat palet warna seimbangApr 13, 2025 am 09:59 AMBagi mereka yang mungkin tidak datang dari latar belakang reka bentuk, memilih palet warna sering berdasarkan keutamaan peribadi. Memilih warna mungkin dilakukan dengan
Kekeliruan silang aliranApr 13, 2025 am 09:57 AMIni adalah lidah di pipi, tetapi ada satu perkara yang akan dibuat di sini. Ia satu cabaran untuk memahami teknologi, dan satu lagi cabaran untuk memahami bagaimana
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.
MantisBT
Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Dreamweaver Mac版
Alat pembangunan web visual
