웹사이트 개발을 할 때 가장 기본적인 기능 중 하나인 검색창은 웹사이트를 더욱 아름답고 고급스럽게 보이게 할 수도 있습니다. 이제 검색창을 아름답게 만드는 방법을 알려드리겠습니다.
렌더링:
이 효과를 얻는 방법에는 두 가지가 있습니다. 하나는 배경을 전체적으로 처리하거나, 검색 상자에 투명 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 검색 상자 프롬프트 기능을 구현하는 방법
검색 상자 기능을 구현하기 위한 순수 CSS3 데모 예시
위 내용은 CSS로 아름다운 검색창 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!