felayman——经典搜索框

最新推荐文章于 2014-04-15 01:05:00 发布

iteye_20659

最新推荐文章于 2014-04-15 01:05:00 发布

阅读量179

点赞数

本文详细介绍了如何使用HTML和CSS构建一个经典查询框，包括输入框和查询按钮的设计。

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        #search{
            width: 350px;
            height: 25px;
            margin: 50px auto;
            padding: 3px 8px;
            line-height: 20px;
            color: #000;
            background: #ddd;
            overflow: hidden;
        }
        #search label{
            float: left;
            line-height: 25px;
            font-weight: 800;
            color: #c00;
        }
        #search #find{
            padding: 2px 4px;
            border: 1px solid #06c;
            margin-top: 1px;
            color: #666;
            float: left;
            margin: 0 5px;
            width: 150px;
            height: 16px;
        }
    </style>
    <meta charset="UTF-8"/>
    <title>经典查询框的设置</title>
</head>
<body>
<div id="search">
    <form action="" method="post">
        <label>输入查询内容</label>
        <input type="text" name="find" id="find" value="请输入查询内容"/>
        <input type="button" name="value" value="查询"/>
    </form>
</div>
</body>
</html>