div＋css div+css divcss布局入门教程迅雷下载

首先，需要明确一下什么是“div+css布局”？简单来说，就是利用div标签和css样式来实现网页布局的方式。div标签是用来划分网页内容的矩形区域，而css样式则是用来控制这些区域的显示方式和样式。

以下是“div+css div+css divcss布局入门教程”详细攻略：

1. 熟悉div标签

div标签是用来划分网页内容的矩形区域，我们可以使用

标签来创建一个容器，然后在这个容器内放置其他的元素。

2. 设置样式

我们可以使用CSS样式来控制这些区域的显示方式和样式。

例如，我们可以使用以下CSS代码来设置容器的样式：

div {
    width: 200px;
    height: 200px;
    background-color: #f5f5f5;
}

这段代码将会让容器的宽高都变成200px，并且背景颜色为浅灰色。

3. 布局

在理解了div标签和CSS样式的基础上，我们可以开始进行布局了。

3.1. 垂直居中

<!DOCTYPE html>
<html>
<head>
    <title>垂直居中</title>
    <style type="text/css">
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 500px;
            background-color: #f5f5f5;
        }
        .box {
            width: 200px;
            height: 100px;
            background-color: #4CAF50;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

该代码会使得整体居中显示，其中.container是整个区域的容器，.box为其中一个小块。

其中设置了.container的高度为500px，那么.box就可以通过flex布局实现垂直居中。同时.box的宽高设定为200px和100px。

3.2. 自适应布局

<!DOCTYPE html>
<html>
<head>
    <title>自适应布局</title>
    <style type="text/css">
        .container {
            overflow: hidden;
        }
        .left {
            float: left;
            width: 20%;
            background-color: #FFA07A;
            height: 500px;
        }
        .right {
            overflow: hidden;
            margin-left: 20%;
            background-color: #87CEFA;
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

该代码实现了两个区域并列显示，其中.left占据父容器的20%宽度，右侧部分为80%。通过设置overflow来防止两个区域发生重叠。