layout佈局

webi8bo發表於2020-10-30

網頁佈局（layout佈局）

  • 浮動佈局

  • 定位佈局

  • 多列布局

製作網站的大布局 

  1. 流式佈局（按照百分比)

  2. 系統佈局

  3. 單列布局（固定佈局，主要採用居中佈局）

  •  heade,footer與content等寬居中

程式碼如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 14px;
            width: 1190px;
            height: 600px;
            margin: 0 auto;
        }
        .heade{
            padding: 0 10px;
            height: 20%;
            border: 1px solid red;
        }
        .content{
            height: 60%;
            border: 1px solid blueviolet;
            margin-top: 50px;
        }
        .footer{
            height: 20%;
            border: 1px solid yellow;
            margin-top: 50px;
        }
        span{
            font-size: 20px;
            color: black;
            margin-left: 200px;
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div class="heade"><span>我是頭部區域</span></div>
<div class="content "><span>我是內容區域</span></div>
<div class="footer "><span>我是底部區域</span></div>
</body>
</html>

效果如下：

  • 自適應佈局（左右兩列）

程式碼如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .parent{
            width: auto;
            height: auto;
            border: 1px solid red;
        }
        .left{
            float: left;
            width: 300px;
            height: 100px;
            background-color: red;
            margin-right: 10px;
        }
        .right{
            width: auto;
            height: 100px;
            overflow: hidden;
            zoom:1;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="left" ></div>
    <div class="right" >
        內容區域
    </div>
</div>
</body>
</html

效果如下：

  • 三列布局（可用table佈局，也可用float佈局）

程式碼如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            margin: 0 auto;
            width: 1000px;
            height: 300px;
            border: 1px solid red;
            display: table;
        }
        .box>div{
            display: table-cell;
        }

        .w{
            width: 500px;
        }

        .boxfloat{
            margin: 0 auto;
            width: 1000px;
            height: 300px;
            border: 1px solid red;
        }
        .boxfloat>div{
            height: 300px;
        }
        .boxfloat>div:nth-child(1){
            float: left;
            width: 200px;
        }
        .boxfloat>div:nth-child(3){
            background-color: red;
            overflow: hidden;
        }
        .boxfloat>div:nth-child(2){
            float: right;
            width: 200px;
        }
    </style>
</head>
<body>
<!--table-->
<div class="box">
    <div  style="background-color: red"></div>
    <div class="w" style="background-color: blue"></div>
    <div style="background-color: orangered"></div>
</div>
<hr/>
<!--float-->
<div class="boxfloat">
    <div style="background-color: red"></div>
    <div style="background-color: orangered"></div>
    <div class="w" style="background-color: blue"></div>
</div>
</body>
</html>

效果如下（上為table，下為float）：

  • 網格佈局

  1.  

相關文章