css-项目布局 - 草稿

页面布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        
        .box{
            width: 800px;
            height: 100px;
            background-color: blue;
            margin: 10px auto;

        }
        .box1{
            width: 800px;
            height:600px;
            background-color: pink;
            margin:10px auto;
        }
        .box3{
            width: 170px;
            height: 300px;
            background-color: gold;
            float: left;
            margin: 10px;

        }
        .box4{
            width: 170px;
            height: 300px;
            background-color: gold;
            float: left;
            margin: 10px;

        }
        .box5{
            width: 400px;
            height: 300px;
            background-color: green;
            float: left;
            margin: 10px;

        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class='box1'>
        <div class="box3"></div>
        <div class="box5"></div>
        <div class="box4"></div>

    </div>
</body>
</html>
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,713评论 1 92
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 10,209评论 5 15
  • 前言 现在,我们被称为前端工程师。然而,早年给我们的称呼却是页面仔。或许是职责越来越大,整体的前端井喷式的发展,使...
    Layzimo阅读 4,218评论 1 9
  • 前言 现在,我们被称为前端工程师。然而,早年给我们的称呼却是页面仔。或许是职责越来越大,整体的前端井喷式的发展,使...
    Calvin李阅读 3,493评论 0 0
  • 教师节前夕,收到了一位2017届毕业生的来信。很是感动! 信的全文如下: 亲爱的吴老师: 教师节快乐! 我真的十分...
    吴老师教语文阅读 4,028评论 2 9

友情链接更多精彩内容