前端学习（242）:双飞翼布局

最新推荐文章于 2024-05-08 23:27:47 发布

前端小歌谣

最新推荐文章于 2024-05-08 23:27:47 发布

阅读量345

点赞数

分类专栏： # 歌谣--前端学习--总进程

本文链接：https://blog.csdn.net/weixin_43392489/article/details/103724077

版权

歌谣--前端学习--总进程专栏收录该内容

2758 篇文章 59 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <style>
    *{margin: 0;padding: 0;}
    .header{height: 100px;background: red;}
    .container{}
    .container .center{height: 200px;float: left;width: 100%;}
    .container .center p{background: yellow;height: 100%; margin: 0 150px 0 100px;}
    .container .left{float: left; width: 100px;height: 200px;background: red;margin-left:-100%;}
    .container .right{float: left; width: 150px;height: 200px;background: green;margin-left: -150px;}
    </style>
</head>
<body>
    <div class="header"></div>
        <div class="container">
            <div class="center">
                <p>我是歌谣</p>
            </div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    
</body>
</html>

运行结果

前端小歌谣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端学习（242）:双飞翼布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
复制链接

扫一扫