＜HTML5前端开发＞页面布局：02 搜索栏

最新推荐文章于 2021-11-10 11:50:58 发布

文科僧

最新推荐文章于 2021-11-10 11:50:58 发布

阅读量513

点赞数 1

文章标签： html5 html css

本文链接：https://blog.csdn.net/horizon12/article/details/107721176

版权

一、实现代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			form{
				width: 687px;height: 45px; background: pink;
			}
			.sear{
				width: 609px;height: 39px;
				border:solid 3px #e1241a;
				float: left;
				background-image: url(img/jdnav/photo.png);
				background-repeat: no-repeat;
				background-position: 570px center;
			}
			.nav{
				width: 72px;height: 45px;
				background-color:#e1241a;
				border: none;
				background-image: url(img/jdnav/search.png);
				background-repeat: no-repeat;
				background-position: center;
				float: left;
			}
		</style>
	</head>
	<body>
		<form action="" method="">
			<input type="text"  class="sear"/><
			input type="submit"  class="nav" value=""/>
		</form>
	</body>
</html>

二、实现效果
效果图
提示文字可在中进行添加。