css 佈局2

時間 2019-12-05

標籤 css 佈局欄目 CSS 简体版

原文原文鏈接

1、css+div自適應佈局

1.兩欄佈局（左定寬，右自動）

float + margin

代碼以下：css

<!doctype html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>兩欄佈局（左定寬，右自動）</title>
    <style>
        body{
            margin:0;
        }
        .box{
            width:100%;
            height:300px;
        }
        .left{
            width:200px;
            background-color:red;
            height:300px;
            float:left;
        }
        .right{
            background-color:green;
            height:300px;
            margin-left:200px;
        }
            
    </style>
</head>
<body>
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

效果圖：
html

2.三列布局（兩側定寬，中間自適應）

position+ margin

代碼以下：佈局

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>左中右三列左右200，中間自適應</title>
    <style>
        
        body{
            margin:0;    
        }
        .box{
            width:100%;
            height:300px;
            position:relative;
        }
        .left{
            width:200px;
            background-color:red;
            height:300px;
            position:absolute;
            top:0px;
            left:0px;
        }
        .center{
            background-color:black;
            margin:0 210px;
            height:300px;
        }
        .right{
            width:200px;
            background-color:green;
            height:300px;
            position:absolute;
            top:0px;
            right:0px;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>

</html>

效果圖：
spa

2.1三列布局（上下定寬，中間自適應）

position + position

代碼以下：code

<!doctype html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>上中下三行上下200，中間自適應</title>
    <style>
    
        body{
            margin:0;
        }
        .top{
            width:100%;
            height:200px;
            background-color:red;
            position:absolute;
            top:0px;
        }
        .middle{
            width:100%;
            background-color:black;
            position:absolute;
            top:200px;
            bottom:200px;
        }
        .bottom{
            width:100%;
            height:200px;
            background-color:green;
            position:absolute;
            bottom:0px;
        }
    </style>
</head>
<body>
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
</body>
</html>

效果圖:htm

3.上下兩部分，底下這個固定高度200px，若是上面的內容少，那麼這個footer就固定在底部，若是內容多，就把footer擠着往下走

position + margin

代碼以下：圖片

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>上下兩部分，底部固定高度200，若是上面內容少，底部固定，多的話擠着底部往下走</title>
    <style>
        
        html{
            height:100%;
        }
        body{
            min-height:100%;
            position:relative;
            margin:0;
            background-color:red;
        }
        .header{    
            width:100%;    
            padding-bottom:200px;
        }
        .footer{
            height:200px;
            width:100%;
            position:absolute;
            bottom:0px;
            background-color:#151515;
        }
    </style>
</head>
<body>
        <div class="header">
            你好，點個贊吧！<br/>
        </div>
        <div class="footer">
        
        </div>
        
    

</body>

</html>

效果圖：
utf-8

新手入門，請大佬們多多指教！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。