网页的简单布局

浏览数：25 / 时间：2015年06月09日

<head>

<style type="text/css">
#main
{
    text-align:center;
}
.d1
{
    border:1px solid blue;
    
    width:960px;
    margin:auto;
    
}
.d6
{
    height:100px;
    
    background-color:black;
    float:left;
    
    width:100%;
}
.dd
{
    
    height:100px;
    border:1px solid red;
    background-color:navy;
    float:left;
    
    width:100%;
}
.d2
{
    width:100%;
    height:300px;
    background-color:pink;
    float:left;
}
.d3
{
    width:100%;
    height:200px;
    background-color:#9FF;
    float:left;
}
.d4
{
    float:left;
    height:180px;
    background-color:#99C;
    width:307px;
    margin-right:10px;
    margin-top:10px;
    
}
.d5
{
    float:right;
    height:180px;
    background-color:#99C;
    width:306px;
    margin-right:10px;
    margin-top:10px;
}
#divleft
{
    margin-left:10px;
}
.dd h1
{
    font-size:52px;
    font-weight:bold;
    color:white;
    float:left;
    margin-left:20px;
    margin-top:20px;
}
.dlzc
{
    float:right;
    margin-right:10px;
    margin-top:20px;
}
.dlzc a
{
    color:white;
    font-weight:bold;
    text-decoration:none;
}
</style>

</head>

<body>
<div id="main">
    <div class="d1">
        <div class="dd">
            <h1>真无奈网页教程</h1>
            <div class="dlzc">
                <a href="#">登录</a>
                <a href="#">注册</a>
            </div>
        </div>
        <div class="d2"></div>
        <div class="d3">
            <div id="divleft" class="d4"></div>
            <div class="d4"></div>
            <div class="d5"></div>
        </div>
        <div class="d6"></div>
    </div>
</div>
</body>
</html>