常见页面css布局

<html>
  <body>
        <div class="main">
            <div class="top">top</div>
            <div class="left">left</div>
            <div class="center">center</div>
            <div class="right">right</div>
            <div class="footer">bottom</div>
        </main>
  </body>
<style type="text/css">
html,body{
    padding: 0;
    margin: 0;
}
    .top {
        position: absolute;
        top: 0;
        width: 100%;
        height: 10%;
        background: #333;
    }
    .left {
        position: absolute;
        top: 10%;
        left: 0;
        width: 15%;
        height: 80%;
        background: #aaa;
    }
    .center {
        position: absolute;
        top: 10%;
        left: 15%;
        width: 75%;
        height: 80%;
        background: #a0a;
    }
    .right {
        position: absolute;
        top: 10%;
        right: 0;
        width: 20%;
        height: 80%;
        background: #ff0;
    }
            
    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 10%;
        background: #0ff;
    }
</style>
</html>
评论
