您现在的位置是：网站首页> 编程资料编程资料

CSS 漂亮搜索框美化代码_CSS教程_CSS_网页制作_

2021-09-08 641人已围观

简介搜索框是我们经常见到的网站功能，它的美观直接影响着网站舒适度，一般我们都会下功夫美化搜索框。

效果图：

实现这种效果有两种方法：一是整体处理一个背景，以透明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" 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(//img.jbzj.com/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" class="swap_value" /><input type="image" src="//img.jbzj.com/demoimg/200912/btn_search_box.gif" width="27" height="24" id="go" alt="Search" title="Search" /></form></div></body></html>

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

上一篇：网页中图片应用CSS的滤镜的效果_CSS教程_CSS_网页制作_

下一篇：使用一张或两张图片创建大背景网站_CSS教程_CSS_网页制作_

您现在的位置是：网站首页> 编程资料编程资料

CSS 漂亮搜索框美化代码_CSS教程_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢