CSS盒子模型布局实践-优快云博客

css：盒子模型练习

html：

<!doctype html>
<html>

     <head>

         <meta charset="UTF-8">
         <title></title>
         <link href="盒子模型练习.css" type="text/css" rel="stylesheet">
    </head>
    <body>
    <div class="top">
        <div class="topcenter">
            <h1>topcenter</h1>
        </div>
    </div>

    <div class="middle">
        <div class="middle1">
            <br/><h2>middle1</h2>
        </div>
        <br/>
        <div class="middle2">
            <br/><h2>middle2</h2>
        </div>
     </div>

    <div class="bottom"></div>

css：

.top{
    background-color:steelblue;
    width:100%;
    height:70px;
    text-align: left;
}

.topcenter{
    margin:0px auto;/*左右自适应，上下为0*/
    width:75%;
    height:70px;
    text-align: center;
    background-color:cadetblue;
}

.middle{
    width:75%;
    height:700px;
    margin:8px auto;
    background-color: gray;
}
.middle1{
    width:100%;
    height:30%;
    background-color: cadetblue;
    margin: 0px;
    text-align: center;
}

.middle2{
    width:100%;
    height:10%;
    background-color: darkgreen;
    margin: 10px 0px;
    text-align: center;
}
.bottom{
    width:75%;
    height:50px;
    margin:0px auto;
    background-color: darkslategray;
}