HTML+CSS 开发简单组件(一)-优快云博客

本文链接：https://blog.youkuaiyun.com/tian_yanT/article/details/118666791

本文介绍了如何使用HTML和CSS来仿制一个百度搜索框，包括输入框、相机图标和搜索按钮的样式设计。通过设置元素的尺寸、边框、颜色和交互效果，实现了类似百度搜索框的视觉和交互体验。代码简洁明了，适合初学者学习实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML+CSS 开发简单组件(一)

仿制百度搜索框

废话不说，直接上代码

html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML+CSS 编写百度搜索框</title>
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2666696_rrocp1qihv.css"/>
		<!-- 引入阿里的矢量图标库 -->
		<link rel="stylesheet" type="text/css" href="index.css"/>
		<!-- 引入css文件 -->
	</head>
	<body>
		<div class="box">
			<!-- 先创建一个包围盒放置输入框、相机按钮和搜索按钮 -->
			<input type="text">
			<!-- 搜索框 -->
			<i class="iconfont">&#xe6bf;</i>
			<!-- 相机按钮 -->
			<button>百度一下</button>
			<!-- 搜索按钮 -->
		</div>
	</body>
</html>

css部分

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/* 设置全部样式,内外边距清空,盒子模型 */
	outline: none;
	/* 设置轮廓为空 */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/* 兼容定义用户不可选择 */
}
body{
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 网页高度满屏高,设置flex布局,为了方便看 */
}
.box{
	width: 640px;
	height: 44px;
	/* 给包围盒设定一个尺寸 */
	display: flex;
	/* 设置flex布局,所有组件全部水平对齐 */
}
.box>input{
	width: 488px;
	height: 100%;
	/* 设定输入框高度同父级,宽度设定为488像素 */
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
	/* 设置左上左下原角度为12像素 */
	border: 2px solid #c4c7ce;
	border-right: none;
	/* 给搜索框设置一个2像素的边框,并且清除搜索框右侧边框 */
	padding-left: 12px;
	/* 给搜索框一个左侧的内边距,不然顶边不好看 */
	font-size: 16px;
	/* 设定搜索框的文字大小 */
}
.box>input:hover{
	border: 2px solid #a7aab5;
	border-right: none;
	/* 添加一个鼠标移动上去的状态,边框变色,原理同上 */
}
.box>input:focus{
	border: 2px solid #4e6ef2;
	border-right: none;
	/* 添加一个得到焦点的状态,边框变色,原理同上 */
}
.box>i.iconfont{
	border-top: 2px solid #c4c7ce;
	border-bottom: 2px solid #c4c7ce;
	/* 设置顶部和底部的边框颜色 */
	width: 44px;
	height: 44px;
	/* 给图标标签设定一个尺寸 */
	display: flex;
	align-items: center;
	justify-content: center;
	/* 设定flex布局,保证图标水平垂直居中 */
	color: #adadad;
	/* 给相机图标设定一个颜色 */
}
.box>input:hover+i.iconfont{
	border-top: 2px solid #a7aab5;
	border-bottom: 2px solid #a7aab5;
	/* 设定相机图标顶部底部与编辑框边框颜色一致 */
}
.box>input:focus+i.iconfont{
	border-top: 2px solid #4e6ef2;
	border-bottom: 2px solid #4e6ef2;
	/* 设定相机图标顶部底部与编辑框边框颜色一致 */
}
.box>button{
	width: 108px;
	height: 44px;
	/* 设定按钮尺寸 */
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;
	/* 将按钮右上右下方圆角度保持一致 */
	border: none;
	/* 将按钮的边框清除 */
	background-color: #4e6ef2;
	/* 设置按钮底色 */
	color: #FFFFFF;
	/* 设置文字颜色 */
	font-size: 17px;
	/* 设置文字大小 */
	cursor: pointer;
	/* 设置鼠标样式为手型 */
}
.box>button:hover{
	background-color: #4662d9;
	/* 添加一个按钮鼠标滑过的状态,更改颜色 */
}