CSS 漂亮搜索框美化代码

网站建设 2023-01-28 21:37www.1681989.com免费网站

效果图

实现这种效果有两种方法一是整体处理一个背景，以透明gif图的方式定位到搜索框，或者切分开，这种方法加载快，而且灵活性更高。
文中用到的图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://.w3./1999/xhtml" xml:lang="en" 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 { paddg: 12px 0; marg: 0; font-size: .8em; le-height: 1.5; } form { marg: 0; } #search_box { width: 201px; height: 31px; background: url(//img.jbzj./demoimg/200912/bg_search_box.gif); } #search_box #s { float: left; paddg: 0; marg: 6px 0 0 6px; border: 0; width: 159px; background: none; font-size: .8em; } #search_box #go { float: right; marg: 3px 4px 0 0; } </style> </head> <body> <div id="search_box"> <form id="search_form" method="post" action="#"> <put type="text" id="s" value="Search" class="swap_value" /> <put type="image" src="//img.jbzj./demoimg/200912/btn_search_box.gif" width="27" height="24" id="go" alt="Search" title="Search" /> </form> </div> </body> </html>

提示您可以先修改部分代码再运行

上一篇：使您的CSS网页布局代码更专业精简CSS文件下一篇：让CSS代码更具有易维护性

CSS 漂亮搜索框美化代码

seo网络推广搜索

推火网导航

seo

网络推广

网络营销

CSS 漂亮搜索框美化代码

网站设计

seo网络推广搜索

推火网导航

seo

网络推广

网络营销