html搜索框怎么做

互联网 20-3-9

html搜索框怎么做

使用HTML做搜索框的方法：

1、首先新建一个div，id名为box，用来包裹搜索框；

2、然后在内部添加一个input标签和一个div标签，一个用来输入文字，一个充当按钮；

3、最后使用css为它们设计样式即可。

推荐学习：html教程

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style type="text/css">     #box{         width: 380px;         margin: 30px auto;         font-family: 'Microsoft YaHei';         font-size: 14px;     }     input{         width: 260px;         border: 1px solid #e2e2e2;         height: 30px;         float: left;         background-image: url(images/search.jpg);         background-repeat: no-repeat;         background-size: 25px;         background-position:5px center;         padding:0 0 0 40px;     }     #search{         width: 78px;         height: 32px;         float: right;         background: black;         color: white;         text-align: center;         line-height: 32px;         cursor: pointer;     }   </style> </head> <body>     <div id="box">         <input type="search" name="search" placeholder="请输入关键字">         <div id="search">搜索</div>      </div> </body> </html>

效果：