要制作一个带有搜索框的页面头部效果，我们可以使用 CSS 的 flex 和 position 属性。首先，我们可以使用 flexbox 在页面顶部创建一个包含 logo、导航链接和搜索框的容器。
在 HTML 中，可以将这些元素放在一个父容器中，然后为该父容器添加以下样式：
.header {
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
z-index: 999;
}上述代码中，display: flex 将 header 容器变成一个 flex 容器，justify-content: space-between 让其中的子元素左右对齐，align-items: center 让它们在竖直方向上居中对齐。position: fixed 和 top: 0、left: 0、right: 0 将容器固定在页面顶部，height: 80px 指定容器高度为 80 像素，background-color: #fff 为其设置白色背景，box-shadow 为其添加一个细小的阴影。z-index 确保该容器在其他内容之上。
接下来，在容器内部，我们可以创建一个包含搜索框的元素，并在需要时追加其他子元素：
<div class="header">
<div class="logo">LOGO</div>
<nav class="nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
<div class="search-box">
<input type="text" placeholder="Search...">
<button type="submit" class="search-button">Search</button>
</div>
</div>最后，为搜索框添加以下 CSS 样式：
.search-box {
display: flex;
align-items: center;
margin-right: 20px;
}
input[type="text"] {
width: 200px;
padding: 8px;
border: none;
border-radius: 4px;
font-size: 16px;
background-color: #f5f5f5;
}
.search-button {
margin-left: 10px;
padding: 8px 16px;
border: none;
border-radius: 4px;
font-size: 16px;
color: #fff;
background-color: #007bff;
cursor: pointer;
}上述代码中，display: flex 将 .search-box 容器也变成一个 flex 容器，align-items: center 让其中的子元素在竖直方向上居中对齐。input[type="text"] 样式指定了搜索框的宽度、内边距、边框、圆角、字体大小和背景颜色。.search-button 样式定义了搜索框旁边的搜索按钮的内边距、边框、圆角、字体大小、颜色和背景颜色，以及指针类型为 cursor: pointer。
综上所述，以上是如何使用 CSS 制作带有搜索框的页面头部效果的步骤和关键代码，希望对你有所帮助。