代码样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div class="search_box">
<!-- 搜索框-->
<div class="search">搜索：目的地/酒店/航班</div>
<a class="user">我的</a>
</div>
</body>
</html>
<style>
a{
text-decoration: none;
}
dic {
box-sizing: border-box;
}
.search_box {
position: fixed;
top: 0;
/*居中*/
left: 50%;
transform: translateX(-50%);
/*transform 属性允许你旋转、缩放、倾斜或平移给定元素*/
-webkit-transform: translateX(-50%);/*向左平移当前元素长度的一半*/
/*兼容老浏览器写法*/
width: 100%;
min-width: 320px;
max-width: 540px;
height: 44px;
display: flex;
}
.search {
flex: 1; /*左边占一份*/
height: 26px;
line-height: 26px;
border: 1px solid #ccc;
margin: 7px 10px;
border-radius: 5px;
position: relative;
padding-left: 25px;
color: #707070;
font-size: 13px;
/*下边框阴影：x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色*/
box-shadow: 0px 2px 4px rgba(0, 0, 0,.4);
}
.search::before {
content: "";
background: url(img/search.png) no-repeat center;
width: 20px;
height: 20px;
background-size:20px;
/*使用绝对定位，让他浮出来，不占一行，因为后面还有文字*/
top: 3px;
left: 3px;
position: absolute; /*默认是相对整个body的位置进行绝对定位，如果父级元素加了position: relative，就是相对于父级的位置进行绝对定位*/
}
/* CSS 伪元素 :before 和 :after 是两个强大的工具，它们允许我们在选定元素的前后插入内容，而无需修改HTML结构。这些伪元素通常与 content 属性一起使用，可以插入文本或图像。*/
.user::before {
content:"";
background: url(img/my.png) no-repeat center;
width: 17px;
height: 17px;
background-size:17px;
display:block; /*此元素将显示为块级元素，此元素前后会带有换行符。*/
margin: 0 auto; /*水平居中*/
}
.user {
width: 44px;
height: 44px;
text-align: center;/*里面的文字水平居中*/
font-size: 10px;
padding-top: 8px;
color: #1296db;
}
</style>
