搜索框示例

最新推荐文章于 2024-04-24 21:53:34 发布

wangguangrong

最新推荐文章于 2024-04-24 21:53:34 发布

阅读量130

点赞数

分类专栏： H5 文章标签：搜索框示例 css H5

本文链接：https://blog.csdn.net/wangguangrong/article/details/116527362

版权

H5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS3搜索框</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			border: 0;
		} 
		.search,.search>input,.search>button{
			height: 42px;
			font-size: 20px;
		}
		.search {
			margin: 20px auto;/* del */
			width: 300px;
			display: flex;
			border: 3px solid #A3D0c3;
			border-radius: 8px;
		}
		.search>input,.search>button {
			outline: none;
		}
		.search>input {
			width: 80%;
			border-radius: 8px 0 0 8px;
		}
		.search>button {
			width: 20%; 
			background: #A3D0c3;
		}
	</style>
</head>
	<body>
		<div class="search">
			<input placeholder="输入名字"></input>
			<button>搜索</button>
		</div>
	</body>
</html>

wangguangrong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
搜索框示例

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>CSS3搜索框</title> <style type="text/css"> * { margin: 0; padding: 0; border: 0; } .search,.search>input,.search>button{ h.
复制链接

扫一扫