以html / css为主体背景的网格

时间：2022-11-12 13:39:35

I want to create a div that contains a grid generated with css, and that div appears behind other div, that contains the UI. That is that one div in the body appears behind the other div that contains the user interface. The div that is behind, must contain a grid drawing using CSS.

我想创建一个包含使用css生成的网格的div,并且该div显示在包含UI的其他div后面。也就是说,正文中的一个div出现在包含用户界面的另一个div后面。后面的div必须包含使用CSS的网格绘图。

<head>
    <style type="text/css">

    #divcontainer {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -999;
        background-color: #bababa;
    }

    #divinnercontainer {
        width: 10%;
        height: 20%;
        outline: 1px solid;
        float: left;
    }
</style>

</head>
<body>

<div class="divcontainer">
    <div class="divinnercontainer"></div>
    <div class="divinnercontainer"></div>
    <div class="divinnercontainer"></div>
    <div class="divinnercontainer"></div>
    <div class="divinnercontainer"></div>
    <div class="divinnercontainer"></div>
    <div class="divinnercontainer"></div>
    <div class="divinnercontainer"></div>
    <div class="divinnercontainer"></div>
    <div class="divinnercontainer"></div>
    <div class="divinnercontainer"></div>
    <div class="divinnercontainer"></div>
</div>

<div style="z-index:999">
  <!-- UI -->
</div>

This is my code, but I don't see any grid, what I'm doing wrong?

这是我的代码,但我没有看到任何网格,我做错了什么?

Thanks in advance

提前致谢

5 个解决方案

#1

0  

The problem is because you use #divcontainer and #divinnercontainer instead of .divcontainer and .divinnercontainer.

问题是因为你使用#divcontainer和#divinnercontainer而不是.divcontainer和.divinnercontainer。

#2

0  

you mixed up css classes with css ids.

你把css类和css id搞混了。

You simply need to change #divcontainer { ... }

你只需要改变#divcontainer {...}

#divinnercontainer {
    ...
}

to .divcontainer { .... }

到.divcontainer {....}

.divinnercontainer {
    ....
}

#3

0  

# is for id not for class

#是id不是为了类

.divcontainer {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -999;
    background-color: #bababa;
}

.divinnercontainer {
    width: 10%;
    height: 20%;
    outline: 1px solid;
    float: left;
}

CodePen

#4

0  

in css is #divinnercontainer, but you call a divinnercontainer as a class in html

在css中是#divinnercontainer,但是你将一个divinnercontainer称为html中的一个类

#5

0  

Your just need to fix the class name in your css :

您只需要在css中修改类名:

#divcontainer to .divcontainer

#divcontainer到.divcontainer

#divinnercontainer to .divinnercontainer

#divinnercontainer到.divinnercontainer

#1

0  

The problem is because you use #divcontainer and #divinnercontainer instead of .divcontainer and .divinnercontainer.

问题是因为你使用#divcontainer和#divinnercontainer而不是.divcontainer和.divinnercontainer。

#2

0  

you mixed up css classes with css ids.

你把css类和css id搞混了。

You simply need to change #divcontainer { ... }

你只需要改变#divcontainer {...}

#divinnercontainer {
    ...
}

to .divcontainer { .... }

到.divcontainer {....}

.divinnercontainer {
    ....
}

#3

0  

# is for id not for class

#是id不是为了类

.divcontainer {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -999;
    background-color: #bababa;
}

.divinnercontainer {
    width: 10%;
    height: 20%;
    outline: 1px solid;
    float: left;
}

CodePen

#4

0  

in css is #divinnercontainer, but you call a divinnercontainer as a class in html

在css中是#divinnercontainer,但是你将一个divinnercontainer称为html中的一个类

#5

0  

Your just need to fix the class name in your css :

您只需要在css中修改类名:

#divcontainer to .divcontainer

#divcontainer到.divcontainer

#divinnercontainer to .divinnercontainer

#divinnercontainer到.divinnercontainer

标签：

相关文章