站长资讯网
最全最丰富的资讯网站

html5中如何制作搜索栏

html5中制作搜索栏的方法:首先新建一个div,id名为box,用来包裹搜索框;然后在内部添加一个input标签和一个div标签;最后使用css为它们设计样式即可。

html5中如何制作搜索栏

本教程操作环境:windows7系统、html5版,DELL G3电脑,该方法适用于所有品牌电脑。

html5中制作搜索栏的方法:

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

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

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

<!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>

相关学习推荐:html教程

赞(0)
分享到: 更多 (0)
网站地图   沪ICP备18035694号-2    沪公网安备31011702889846号