Css查漏补缺07-浮动界面布局实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>23、浮动小实例</title>
    <style>
        body{
        background-color:#f8f9fa;

        }
        .header{

            box-shadow: 7px 7px 10px 0 rgba(76, 110, 245,.1);
        text-align: center;
        padding: 15px ;
        background-color: #fff;
        margin:30px;


        }
        .main_content{
            width: 1000px;
            height: 400px;
            background-color: white;
            margin: 20px auto;
        }
        .footer{
            width: 1000px;
            height: 120px;
            background-color: lightgoldenrodyellow;
            margin: 0 auto;
        }
        .left_content{
            width: 750px;
            height: 400px;
            background-color: orange;
            float: left;
            margin-right: 20px;
        }
        .sidebar{
            width: 230px;
            height: 400px;
            background-color: red;
            float: right;
        }
        .part1{
            width: 250px;
            height: 400px;
            float: left;
            background-color: #ff4f81;
        }
        .part2{
            width: 250px;
            height: 400px;
            float: left;
            background-color: #bbffcc;
        }
        .part3{
            width: 250px;
            height: 400px;
            float: left;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="header">头部</div>
    <div class="main_content">
        <div class="left_content">
            <div class="part1"></div>
            <div class="part2"></div>
            <div class="part3"></div>
        </div>
        <div class="sidebar"></div>
    </div>
    <div class="footer">尾部</div>
</body>
</html>
Css查漏补缺07-浮动界面布局实例

猜你喜欢
