html+css佈局類型

時間 2019-12-07

標籤 html+css html css 佈局類型欄目 CSS 简体版

原文原文鏈接

1、單列布局

1.代碼以下

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8"/>
    <title>單列布局</title>
    
    <style>
    body{
        margin:0;}
    
    .box{
        width:960px;
        margin:0 auto;
    }
    
    .dinbu{
        height:100px;
        border:1px solid #f0f;
    }
    .zhongbu{
        height:400px;
        border:1px solid #f00;
    }
    
    .dibu{
        height:100px;
        border:1px solid #00f;
    }
    </style>
    </head>
    <body>
    <div  class="box">
        <div  class="dinbu"></div>
        <div class="zhongbu"></div>
        <div class="dibu"></div>
        
    </div>
    </body>
    </html>

運行結果

2、雙列布局

代碼以下

<doctype html>

<html>
<head>
<meta charset="utf-8"/>
<title>雙列布局(自適應佈局 固定佈局)</title>

<style>
body{
    margin:0;
    
}
.box{
    width:960px;
    margin:0 auto;
    
    
}

.zuo{
    width:20%;
    height:500px;
    background-color:#f0f;
    float:left;
}

.you{
    width:80%;
    height:500px;
    background-color:#f00;
    float:right;
    
    
}

</style>
</head>
<body>
<div  class="box">
    <div  class="zuo"></div>
    <div class="you"></div>
</div>
</body>
</html>

運行結果

3、三列標籤

代碼以下

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>三列布局</title>

<style>
body{
    margin:0;
    
}
.box{
    width:960px;
    margin:0 auto;
    position:relative;
    
}

.zuo{
    width:200px;
    height:500px;
    background-color:#f0f;
    position:absolute;
    left:0;
    top:0
}
.zhong{
    
    height:500px;
    background-color:#ff0;
    margin:0 300px 0 200px;
    
}




.you{
    width:300px;
    height:500px;
    background-color:#f00;
    position:absolute;
    right:0;
    top:0
    
}
</style>
</head>
<body>
<div  class="box">
    <div  class="zuo"></div>
    <div class="zhong"></div>
    <div class="you"></div>
</div>
</body>
</html>

運行結果

4、混合佈局

代碼以下

<doctype html>

<html>
<head>
<meta charset="utf-8"/>
<title>混合佈局</title>
<style>
body{
    margin:0;
    
}
.box{
    width:960px;
    margin:0 auto;
    
    
}

.dinbu{
    height:100px;
    background-color:#ccc;
    
}
.zhongbu{
    height:400px;
    background-color:#fff;
    position:relative;
}
.zhongbu .zuo{
    width:200px;
    height:400px;
    background-color:#f0f;
    position:absolute;
    left:0px;
    top:0px
}
.zhongbu .czy{
    height:400px;
    background-color:#f00;
    margin:0 310px 0 210px;
}


.zhongbu .you{
    width:300px;
    height:400px;
    background-color:#00f;
    position:absolute;
    right:0px;
    top:0px;
}


.dibu{
    height:100px;
    background-color:#cba;
    
    
}

</style>

</head>
<body>
<div  class="box">
    <div class="dinbu"></div>
    <div class="zhongbu">
        <div class="zuo"></div>
        <div class="czy"></div>
        <div class="you"></div>
    </div>
    
    <div class="dibu"></div>
    
</div>
</body>
</html>