盒子模型 display:block;
不平铺 background-repeat:no-repeat;
位置 background-position:left top;(位置 position;顶部 top)
光标形状(手型) cursor:pointer;(十字交叉 crosshair,沙漏型 wait);
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Title</title>
<meta name="Keywords" content="关键字">
<meta name="description" content="简介">
<!-- 盒子模型 display:block;
不平铺 background-repeat:no-repeat;
位置 background-position:left top; (位置 position; 顶部 top);
光标形状(手型) cursor:pointer;(十字交叉 crosshair,沙漏型 wait);
-->
</head>
<body>
<style>
.bicon {
/*盒子模型*/
display: block;
width: 23px;
height: 23px;
background-image: url("images/baidu.png");
/*不平铺*/
background-repeat: no-repeat;
/*位置 顶部 top*/
background-position: left top;
}
.icon1 {
/*光标形状 十字交叉 crosshair 沙漏等待状态wait;*/
cursor: pointer;
background-position: left top;
}
.icon1:hover {
background-position: left -24px;
}
.icon2 {
/*光标 cursor 手型形状 pointer*/
cursor: pointer;
background-position: left -48px;
}
.icon2:hover {
background-position: left -72px;
}
.s_btn {
cursor: pointer;
width: 108px;
height: 44px;
line-height: 45px;
line-height: 44px \9;
padding: 0;
background: 0 0;
background-color: #4e6ef2;
border-radius: 0 10px 10px 0;
font-size: 17px;
color: #fff;
box-shadow: none;
font-weight: 400;
border: none;
outline: 0;
}
</style>
<img src="images/baidu.png" alt="">
<hr>
<i class="bicon icon1"></i>
<i class="bicon icon2"></i>
<div>
<lable><input type="text"></lable>
<i class="bicon icon2"></i>
<input type="submit" class="s_btn" value="百度一下">
</div>
</body>
</html>