双飞翼布局

双飞翼的主要核心就是”翼”

示例

实现此类布局

页面：

<!-- 主要版心 -->
<div class="big-box">
    <!-- 头部 -->
    <header class="double_search">
        <!-- 加一个容器 -->
        <div class="double-search-box">
            <a href="#" class="icon-logo"></a>
            <form action="">
                <span class="icon-search"></span>
                <input type="search" placeholder="占位符">
            </form>
            <a href="#" class="login">登录</a>
        </div>
    </header>
</div>

CSS:

*,
*::before,
*::after {
    /*所有的标签，和伪元素都选中*/
    margin: 0;
    padding: 0;
    /*移动端常用布局是非固定像素*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*点击高亮效果的清除*/
    tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-size: 14px;
    font-family: "Microsoft YaHei", sans-serif;
    color: #333;
}

a {
    text-decoration: none;
    color: #333;
}

input,
textarea {
    border: none;
    outline: none;
    /*禁止对 textarea 放大缩小*/
    resize: none;
    /* 元素的外观，none没有任何样式 */
    -webkit-appearance: none;
}


/* 版心 */
.double_container {
    min-width: 320px;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    background: pink;
    height: 1000px;
}

/* 顶部搜索 */
.double_search {
    width: 100%;
    height: 40px;
    position: fixed;
    left: 0;
    top: 0;
}

/* 内容居中 */
.double_search .double-search-box {
    height: 40px;
    background: rgba(201, 21, 35, 0.85);
    min-width: 320px;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.double_search .double-search-box .icon-logo {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 40px;

}

.double_search .double-search-box .login {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
}

.double_search .double-search-box form {
    width: 100%;
    padding-left: 60px;
    padding-right: 50px;
}

.double_search .double-search-box form .icon-search {
    width: 20px;
    height: 20px;
    position: absolute;
    left: 70px;
    top: 10px;
    background: pink;
}

/* 百分比的计算：基于父容器内容的宽度 */
.double_search .double-search-box form input {
    width: 100%;
    height: 30px;
    margin-top: 5px;
    background: #fff;
    border-radius: 15px;
    padding-left: 40px;

}