简单搜索框的制作

最新推荐文章于 2022-03-02 20:53:32 发布

Anderson_Lu

最新推荐文章于 2022-03-02 20:53:32 发布

阅读量4.2k

点赞数 5

分类专栏： CSS 文章标签： CSS 搜索框自定义搜索框样式 css实例

本文链接：https://blog.csdn.net/qq_29329775/article/details/46699421

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近刚刚学了CSS，一直没怎么实践，今天就随手写一个比较好看的搜索框，通过Css来实现。虽然前端的工作大多是由前端设计师来完成的。但是这个也还是不错的，和大家分享一下。

<head>
	<title>search</title>
	<style>
		body{
			background:#333;
			margin:0;
			height:auto;
			width:auto
		}

		.search-form{
			background:#fff;
			float:left;
			margin-left:300px;
			margin-top:200px;
		}

		.search-text{
			float:left;
			width:300px;
			outline:none;
			border:0
		}

		.search-button{
			float:left;
			width:60px;
			font-size:14px;
			color:#fff;
			background:green;
			outline:none
			border:0px;
			padding:0;
		}
	
		.top-div{
			background:#aad;
			height:50px;
		}	
</style>
</head>
<body>
	<div class="top-div"></div>
	<form class="search-form">
		<input type="text" class="search-text"/>
		<input type="submit" value="搜索" class="search-button"/>
	</form>
</body>

实现的效果：

就是这样啦！

Anderson_Lu

关注

5
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
简单搜索框的制作

最近刚刚学了CSS，一直没怎么实践，今天就随手写一个比较好看的搜索框，通过Css来实现。虽然前端的工作大多是由前端设计师来完成的。但是这个也还是不错的，和大家分享一下。 search body{ background:#333; margin:0; height:auto; width:auto } .search-form{ backgrou
复制链接

扫一扫