美文网首页
简单布局

简单布局

作者: 冥千洛 | 来源:发表于2018-11-04 19:30 被阅读0次

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">

    .box{
        width: 1350px;
        height: 70px;
        background-color: blue;
        margin: 10px auto;

    }
    .box1{
        width: 1350px;
        height:600px;
        background-color: pink;
        margin:10px auto;
    }
    .bos2{
        width: 1350px;
        height:462px;
        background-color: red;
        margin:10px auto;
    }
    .box3{
        width: 264px;
        height: 333px;
        background-color: gold;
        float: left;
        margin: 30px ;

    }
    .box4{
        width: 246px;
        height: 333px;
        background-color: gold;
        float: left;
        margin: 30px ;

    }
    .box5{
        width: 246px;
        height: 333px;
        background-color: green;
        float: left;
        margin: 30px ;

    }
    .box6{
        width: 246px;
        height: 333px;
        background-color: green;
        float: left;
        margin: 30px ;

    }

</style>

</head>
<body>
<div class="box"></div>
<div class='box1'></div>
<div class="box2">
<div class="box3"></div>
<div class="box5"></div>
<div class="box4"></div>
<div class='box6'></div>
</div>
</body>
</html>


image.png
image.png

相关文章

  • Android 性能优化方法

    布局优化1.1 布局优化的思想很简单,就是减少布局文件层级如果比较简单的布局那么用LinearLayout 如果复...

  • 简单布局

    简单布局 *{margin: 0;padding: 0;}.head{he...

  • 简单布局

    css

  • 简单布局

    名鞋库 样式 *{margin: 0;padding: 0;} .d1{wi...

  • 简单布局

    第一列第5个布局 inline-block实现flex实现 第2列第1个布局 float实现flex实现 第3列第...

  • 简单布局

    Document

  • 简单布局

    本来生活网 /清除默认样式/{padding:0;margin:0;bor...

  • 简单布局

  • Flutter学习记录-布局

    Flutter学习记录-汇总 边做边学 布局简单有: Row:横向布局 Column:纵向布局 先做一个简单的同时...

  • 总结随笔

    网页布局 - 单列布局 - 双列布局 - 三列布局 - 混合布局 单列布局 其中单列布局最为简单,一般应用于搜索引...

网友评论

      本文标题:简单布局

      本文链接:https://www.haomeiwen.com/subject/bjddxqtx.html