三十三：布局之经典的列布局

 

一：两列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*初始化页面样式*/
        body{margin: 0;padding: 0;color: #fff}
        /*最外层div*/
        .container{width: 90%; height: 1000px; margin: 0 auto; /* 左右居中 */}
        .left{width: 60%;height: 1000px;background-color: #1a5acd; float: left /* 左浮动 */}
        .right{width: 40%;height: 1000px;background-color: #5880f9; float: right /* 右浮动 */}
    </style>
</head>
<body>
    <div class="container">
        <div class="left">页面左侧</div>
        <div class="right">页面右侧</div>
    </div>

</body>
</html>


二：三列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*初始化页面样式*/
        body{margin: 0;padding: 0;color: #fff}
        /*最外层div*/
        .container{width: 90%; height: 1000px; margin: 0 auto; /* 左右居中 */}
        .left{width: 30%;height: 1000px;background-color: #1a5acd; float: left /* 左浮动 */}
        .middle{width: 50%;height: 1000px;background-color: #5880f9; float: left /* 左浮动，在左边浮动后面 */}
        .right{width: 20%;height: 1000px;background-color: #1a5acd; float: right /* 右浮动 */}
    </style>
</head>
<body>
    <div class="container">
        <div class="left">页面左侧</div>
        <div class="middle">页面中间</div>
        <div class="right">页面右侧</div>
    </div>

</body>
</html>

 

posted @ 2021-01-16 14:43  向前走。  阅读(137)  评论(0)  编辑  收藏  举报