首页问答社区 web技术正文

html5中怎样制作搜索栏

2021-02-22 07:35:48 192 0

这篇文章主要介绍了html5中怎样制作搜索栏，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

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

html5中制作搜索栏的方法：

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

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

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

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<title>Examples</title>
<metaname="description"content="">
<metaname="keywords"content="">
<linkhref=""rel="stylesheet">
<styletype="text/css">
#box{
width:380px;
margin:30pxauto;
font-family:'MicrosoftYaHei';
font-size:14px;
}
input{
width:260px;
border:1pxsolid#e2e2e2;
height:30px;
float:left;
background-image:url(images/search.jpg);
background-repeat:no-repeat;
background-size:25px;
background-position:5pxcenter;
padding:00040px;
}
#search{
width:78px;
height:32px;
float:right;
background:black;
color:white;
text-align:center;
line-height:32px;
cursor:pointer;
}

</style>
</head>
<body>
<divid="box">
<inputtype="search"name="search"placeholder="请输入关键字">
<divid="search">搜索</div>
</div>
</body>
</html>

感谢你能够认真阅读完这篇文章，希望小编分享的“html5中怎样制作搜索栏”这篇文章对大家有帮助，同时也希望大家多多支持恰卡编程网，关注恰卡编程网行业资讯频道，更多相关知识等着你来学习!

html5