layout布局

网页布局(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.  
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页