猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

html/css如何写出如下搜索框效果，请给出代码？

html/css如何写出如下搜索框效果，请给出代码




隔江千里
浏览 1083回答 1
1回答

素胚勾勒不出你

首先来张效果图，这是写好的效果代码如下：1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<!DOCTYPE&nbsp;html><html><head><meta&nbsp;charset="utf-8"><meta&nbsp;http-equiv="X-UA-Compatible"&nbsp;content="IE=edge,chrome=1"><title>Examples</title><meta&nbsp;name="description"&nbsp;content=""><meta&nbsp;name="keywords"&nbsp;content=""><link&nbsp;href=""&nbsp;rel="stylesheet"><style&nbsp;type="text/css">&nbsp;&nbsp;&nbsp;&nbsp;#box{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;380px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;30px&nbsp;auto;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family:&nbsp;'Microsoft&nbsp;YaHei';&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;14px;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;input{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;260px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;#e2e2e2;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;30px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float:&nbsp;left;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-image:&nbsp;url(images/search.jpg);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-repeat:&nbsp;no-repeat;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-size:&nbsp;25px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-position:5px&nbsp;center;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:0&nbsp;0&nbsp;0&nbsp;40px;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;#search{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;78px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;32px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float:&nbsp;right;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;black;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;white;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align:&nbsp;center;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;line-height:&nbsp;32px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cursor:&nbsp;pointer;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;</style></head><body>&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="box">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input&nbsp;type="text"&nbsp;name="search"&nbsp;placeholder="请输入关键字">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="search">搜索</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></body></html>上面的背景图片也就是那个放大镜需要你自己找下哦纯手打
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

Html5