身无彩凤“双飞翼”,心有灵犀一点通

举报
蜡笔不辣 发表于 2021/07/18 22:58:36 2021/07/18
【摘要】 身无彩凤“双飞翼”,心有灵犀一点通。

身无彩凤“双飞翼”,心有灵犀一点通。

当我第一次在css课程中见“双飞翼”这三个字我就想到这句诗,一开始我也不知道,双飞翼和CSS能有啥关联,知道学完了才恍然大悟。

首先先按词想象,双飞翼不就是两个翅膀么~

那大概就是无论吃得多胖,两个翅膀永远不变,肚子在变大变小!

效果图献上:

接下来就来一步一步实现吧!

首先是html部分,需要一个大div,里面分别放三个div,依次是center、left、right。为啥第一次要放center? 一开始我也很奇怪,不过到最后明白是为了优先加载!

<div class="container">
        <div class="center">
            大肚腩高丽头!
        </div>
        <div class="left">这是我的左翅膀!</div>
        <div class="right">这是我的右翅膀!</div>
</div>

接下来就是双飞翼的第一步:浮动

给三个div添加float:left;属性是它们浮动起来;

双飞翼的羽翼也需要设置下,为了让它们保持不动,设置宽度为固定在,此时设为300px,同时给最外层加宽度,设置为1000px,还有清一下浮动,把overflow设置为hidden即可;

此时为这样:

额~好像不太行,没事,咱继续~

第二步:水平

首先给center的宽度设置100%,此时会发现center占满一行,把其他两个挤下去了,此时就需要负margin来让它们处于同一水平线!left的margin-left设为-100%,right的margin-left设为-300px(300px的取值是根据宽度决定的);

代码如下:

        .container {
            border: 1px solid #000;
            width: 1000px;
            margin: 0px auto;
            overflow: hidden;
        }
        
        .center {
            float: left;
            background: yellow;
            width: 100%;
        }
        
        .left {
            float: left;
            background: green;
            width: 300px;
        }
        
        .right {
            float: left;
            background: pink;
            width: 300px;
        }

这次看下效果:

有点意思了,但是中间的文字被挡住了,接下来就来解决掉!

第三步:加div

解决的方法就是在center的div标签内部再加一个div,把文字放进去,设置margin为左右两列的宽度即可;

这下对了,既然说中间变化两边不变,那么就测试一下把,把最外层的设置为800px、1500px;

可以可以,中间变,两侧不变,满足要求,完成!

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200