ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで美しい検索ボックスを作成する
Web サイト開発を行う場合、最も基本的な機能の 1 つである検索ボックスは、Web サイトをより美しく、上品に見せることもできます。次に、検索ボックスを美しくする方法を説明します。
レンダリング:
この効果を実現するには 2 つの方法があります。1 つは、背景を全体として処理する方法、透明な 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/CSSで美しい検索ボックスを作成する); } #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/CSSで美しい検索ボックスを作成する" width="27" height="24" id="go" alt="Search" title="Search" /> </form> </div> </body> </html>
ヒント: 実行する前にコードの一部を変更することができます
上記は CSS を使用して実装した検索ボックスです。もちろん、これはシンプルで美しいものです。上記の方法に従って、独自の「いいね!」検索ボックスを作成します。
関連する推奨事項:
Js を使用して Baidu 検索ボックス プロンプト機能を実装する方法
以上がCSSで美しい検索ボックスを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。