HTML如何定义搜索栏_html-js-css

概述HTML如何定义搜索栏

HTML定义搜索栏的方法：首先新建一个div，ID名为Box；然后在内部添加一个input标签和一个div标签；最后使用CSS为它们设计样式即可。

本教程 *** 作环境：windows7系统、HTML5版，DELL G3电脑。

HTML定义搜索栏的方法：

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>