html简单组件（三）：简洁美观的搜索框

落日映苍穹つ 2023-01-01 02:55 80阅读 0赞

## html简单组件（三）：简洁美观的搜索框 ##

搜索框效果图：  
![在这里插入图片描述][20201230204142447.gif]

### HTML代码： ###

### jquery代码： ###

function showInput(){ 
    				var val = $("#in").val();
    				alert(val);
    			}

### CSS样式： ###

CSS样式单独为文件，在html中引用，文件名为：inputt.css

.main{ 
    	width:100%;
    }
    .pannel-div{ 
    	width: 450px;
    	float: left;
    	height: 100%;
    	margin: 50px auto;
    }
    .search .in{ 
        width:300px;
        height:36px;
        border:2px solid blue;
    	padding-left: 10px;
    	border-radius: 0px;
        outline:none;
        font:16px/34px "microsoft yahei";
    }
    .search .btn_search{ 
        background:blue;
        width:80px;
    	height:42px;
        color:white;
    	border-radius: 0px;
        border:none;
        outline:none;
    	font-size: 16px;
    }

### HTML+jquery+CSS完整代码 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>html+jquery简洁美观的搜索框</title>
    		<link rel="stylesheet" type="text/css" href="css/inputt.css">
    		<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    	</head>
    	<body>
    		<div class="main">
    			<div class="pannel-div search">
    				<input type="text" class="in" id="in" placeholder="请输入查询内容" /><button class="btn_search" onclick="showInput()">搜索</button>
    			</div>
    		</div>
    		
    		<script type="text/javascript"> function showInput(){ var val = $("#in").val(); alert(val); } </script>
    	</body>
    </html>

完整代码下载链接为：[https://download.csdn.net/download/qq\_26666947/13990528][https_download.csdn.net_download_qq_26666947_13990528]

[20201230204142447.gif]: /images/20221120/cdcfff2be1064d27a3d6401880bc9a1a.png
[https_download.csdn.net_download_qq_26666947_13990528]: https://download.csdn.net/download/qq_26666947/13990528