简单布局

作者: Alice丨殇 | 来源:发表于2018-10-21 13:17 被阅读0次

Android 性能优化方法
简单布局
简单布局
简单布局
简单布局
简单布局
简单布局
简单布局
Flutter学习记录-布局
总结随笔

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.head{
height: 49px;
background-color:red;
}
.head1{
height: 81px;
background-color: orange;
}
.list{
height: 53px;
background-color: yellow;
border-top: orange;
}
.advertising{
height: 85px;
width: 700px;
background-color: green;
margin-left: 284px;
margin: 20px 20px 20px 284px;
}
.advertising1{
height: 85px;
width: 180px;
background-color: green;
margin-left: 284px;
margin: 20px auto;
position: absolute;
top:183px;
left:1054px;

    }
    .slideshow{
        height: 330px;
        width: 950px;
        background-color: cyan;
        margin: 0 auto;
    }
    .slideshow1{
        height: 100%;
        width: 260px;
        background-color: purple;
        float: left;
    }
    .slideshow2{
        height: 100%;
        width: 470px;
        background-color: gray;
        float: left;
        margin: 0 0;
    }
    .slideshow3{
        height: 100%;
        width: 220px;
        background-color: red;
        float: left;
    
    }

    .plate{
        height: 85px;
        width: 950px;
        background-color: blue;
        margin: 20px auto;
    }
    .hot{
        height: 410px;
        width: 950px;
        background-color: cyan;
        margin: 0 auto;
    }
    .brand{
        height: 45px;
        width: 950px;
        background-color: green;
        margin: 20px auto;
    }
    .share{
        height: 85px;
        width: 700px;
        background-color: green;
        margin-left: 284px;
        margin: 20px 20px 20px 284px;
    }
    .share1{
        height: 85px;
        width: 180px;
        background-color: green;
        margin-left: 284px;
        margin: 20px auto;
        position: absolute;
        top:1238px;
        left:1054px;
    }
    .raise{
        width: 950px;
        height: 70px;
        background-color: red;
        margin: 0 auto;
    }
</style>

</head>
<body>

<div class="head"></div>
<div class="head1"></div>
<div class="list"></div>
<div class="advertising"></div>
<div class="advertising1"></div>
<div class="slideshow">
    <div class= slideshow1></div>
    <div class= slideshow2></div>
    <div class= slideshow3></div>
</div>
<div class="plate"></div>
<div class="hot"></div>
<div class="brand"></div>
<div class="share"></div>
<div class="share1"></div>
<div class="raise"></div>

</body>
</html>