请选择进入手机版 | 继续访问电脑版

首页 /web前端 / 正文

转发微博 Qzone 微信

CSS 漂亮搜索框美化代码

2021-03-01| 发布者: 雪落一世离殇| 查看: 1282

效果图：实现这种效果有两种方法：一是整体处理一个背景，以透明gif图的方式定位到搜索框，或者切分开，这种方法加载快，而且灵活性更高。文中用到的图片 CSS美化的漂亮搜索框 body{ font: normal 100% 'Arial',

效果图：

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

提示：您可以先修改部分代码再运行
来源：www.guadou.net 如有侵权，请联系QQ：199993150
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

打赏

0人已打赏

上一篇：使用一张或两张图片创建大背景网站下一篇：网页中图片应用CSS的滤镜的效果

最新评论

相关推荐

Open.cd Pt站签到源码+成品自动识别验证码

 bat晨
3评论 2021-04-23 网络编程
鲁阿鲁无限视距源码

 小平233
9评论 2021-04-23 网络编程
使用原生JavaScript解析某网站返回的JSON串，显示IP等信息

 小菜鸟一枚
9评论 2021-04-23 网络编程
易语言修改QQ源码（随便改）

li450125437
9评论 2021-04-23 网络编程
记录一次爬取网站返回js代码的解决方法

 lishunwei
9评论 2021-04-23 网络编程
分享个社区出入登记1.0.30完整安装包前端+后端

 goodista
8评论 2021-04-23 网络编程
易语言取虎牙直播源（源码）

yuehuna
10评论 2021-04-23 网络编程
闲着无聊写了一个获取起点小说封面的

 3377959709
10评论 2021-04-23 网络编程
[php]网易云音乐下载

 止语
11评论 2021-04-23 网络编程
【Python】萌新跟来我入门Python爬虫（二）

wushaominkk
9评论 2021-04-23 网络编程
学习python总结 - 下载网易云音乐单首歌曲

 快乐的小萌新
8评论 2021-04-23 网络编程
【原创源码】[WEB][blibili]一键还原B站BV号为AV号的HTML网页

 少轻丶狂
10评论 2021-04-23 网络编程
一个有趣的小程序(点不到的按钮)

低调的菜鸡
10评论 2021-04-23 网络编程
【原创源码】【C#】关注健康，C#制作的定时强制锁屏休息程序

 简单单单
9评论 2021-04-23 网络编程
C#高效分页控件源码-百万数据瞬间打开

 key168863
10评论 2021-04-23 网络编程
ai一键自动修图retouch4me磨皮光影调ps插件win版比dr5好竹凯同款

 我爱吃夜宵
12评论 2021-04-23 电脑硬件
三国志姜维传简体6.1完整版，感受后三国的精彩（附修改器和攻略

 zyz_zyz
9评论 2021-04-23 电脑硬件
自己写的自动按键软件

 星火燎原_
12评论 2021-04-23 电脑硬件
ToDesk-个人免费安全流畅的远程控制软件版本：3.0.1

徐某呀
10评论 2021-04-23 电脑硬件
星际2三部曲，繁体离线

 海盐雪碧
10评论 2021-04-23 电脑硬件

雪落一世离殇

©2001-2018 瓜豆网 https://www.guadou.net/中国互联网举报中心非经营性网站

Archiver 手机版小黑屋底部技术QQ：787271999豆瓜网 www.dougua.net 版权所有