静态html如何设置搜索框,html搜索框怎么设置？html搜索框input标签的使用方法实例...

本篇文章主要讲述的是关于HTML 搜索框的设置，还有html 搜索框input标签的一些使用方法实例，接下来就让我们一起来阅读这篇关于html 搜索框的文章吧

首先我们来设置一个简单的搜索框：

这是一个最简单样式的搜索框，没有很复杂的样式。如果需要设计样式可以根据class="aa"来写样式，.aa{}在括号中添加代码即可，当然这是框的样式，按钮的样式.bb{}在括号中填写代码即可。在浏览器中显示的效果如图：

这就是一个简单的搜索框的代码。

现在说说input标签的使用方法，先看个实例

我们来看点更高深的搜索框完整的代码：

PHP中文网

#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;

}

搜索

这个代码看效果图：

这个效果就比第一个好看太多了，就是多了点代码，都是基础的css样式的知识，如果有不懂的可以在下方留言。

注意: 元素是空的,它只包含标签属性。

提示: 你可以使用 元素来定义 元素的标注。

好了，以上就是关于我们这篇关于html input标签的用法，有问题的可以在下方留言。

【小编推荐】

html空格代码怎么写？html空格代码的表现方式总结

html下拉菜单怎么做？html下拉菜单的代码实例介绍