移动开发之双飞翼布局

最新推荐文章于 2023-05-17 17:19:37 发布

空白

最新推荐文章于 2023-05-17 17:19:37 发布

阅读量184

点赞数

分类专栏：学习 CSS 文章标签：移动开发

本文链接：https://blog.csdn.net/qq_38496329/article/details/107748642

版权

学习同时被 2 个专栏收录

105 篇文章 2 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

双飞翼布局

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

示例

实现此类布局

页面：

    <!-- 主要版心 -->
    <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;

    }