html搜索框怎么做 - Powered by HadSky

博主最大Lv63

html搜索框怎么做

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>

效果：

更多相关教程，请关注PHP中文网！

以上就是html搜索框怎么做的详细内容

0 已被阅读了986次楼主 2020-06-22 12:13:32

回复列表

默认热门正序倒序