仿京东搜索栏_html仿京东品牌筛选模块-CSDN博客

本文链接：https://blog.csdn.net/Kingonion/article/details/19358771

最近经常会见到类似京东首页的搜索栏，感觉还蛮简洁美观的，刚刚学习了下，写了个小页面，简单地实现以下，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<title>仿京东搜索框</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.14.1/build/cssreset/cssreset-min.css">
		<style type="text/css">
		/* 样式较少，为方便写在这里 */
		#wrapper {
			width: 960px;
			height: 400px;
			margin: 80px auto;
		}
		.search {
			width: 494px;
			height: 30px;
			border: 3px solid #E4393C;
			position: relative;
		}
		.search input {
			float: left;
			border: 0;
		}
		input:focus {
			outline: 0;
		}
		.text {
			float: left;
			width: 406px;
			padding: 5px;
			height: 20px;
			line-height: 20px;
			font-family: arial,"\5b8b\4f53";
		}
		.text:focus {
			background-color: #FCFCFC;
			-webkit-box-shadow: 2px 2px 3px #D2D2D2 inset;
			-moz-box-shadow: 2px 2px 3px #D2D2D2 inset;
			box-shadow: 2px 2px 3px #D2D2D2 inset;
		}
		.button {
			width: 78px;
			height: 30px;
			font-size: 14px;
			font-weight: 700;
			color: #FFFFFF;
			background-color: #E4393C;
			display: inline-block;
			text-align: center;
			cursor: pointer;
		}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div class="search">
				<input class="text" type="text" />
				<input class="button" type="button" value="搜索" />
			</div>
		</div>
	</body>
</html>

最终的效果如下：