Html 如何重用我的<；部门>；当我不'；我不想再创造一个_Html_Css_Block

Html 如何重用我的<；部门>；当我不'；我不想再创造一个

html css

Html 如何重用我的<；部门>；当我不'；我不想再创造一个,html,css,block,Html,Css,Block,我是一个刚开始编程的人，所以我只是在做一个实践网站。在这个网站上，它应该显示块垂直向下彩虹颜色顺序。我得到了第一列很好，但我不能让第二列移到右边。我试过相对和左边距：110；最高保证金：660；，但它不起作用。每个盒子是110乘110。这是我的密码 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "using namespace std; <html> <body> <div>

我是一个刚开始编程的人，所以我只是在做一个实践网站。在这个网站上，它应该显示块垂直向下彩虹颜色顺序。我得到了第一列很好，但我不能让第二列移到右边。我试过相对和左边距：110；最高保证金：660；，但它不起作用。每个盒子是110乘110。这是我的密码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "using namespace std;
<html>
    <body>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <style>
        div:first-child {
            width: 110;
            height: 110;
            margin: 0px 0px 0px 0px;
            background-color: red;
            border-radius: 25px;
        }

        div:nth-child(2) {
            width: 110;
            height: 110;
            margin: 0px 0px 0px 0px;
            background-color: orange;
            border-radius: 25px;
        }

        div:nth-child(3) {
            width: 110;
            height: 110;
            margin: 0px 0px 0px 0px;
            background-color: yellow;
            border-radius: 25px;
        }

        div:nth-child(4) {
            width: 110;
            height: 110;
            margin: 0px 0px 0px 0px;
            background-color: green;
            border-radius: 25px;
        }

        div:nth-child(5) {
            width: 110;
            height: 110;
            margin: 0px 0px 0px 0px;
            position: relative;
            margin-left: 0;
            background-color: blue;
            border-radius: 25px;
        }

        div:nth-child(6) {
            width: 110;
            height: 110;
            margin: 0px 0px 0px 0px;
            position: relative;
            margin-left: 0;
            background-color: purple;
            border-radius: 25px;
        }

        div:nth-child(1) {
            width: 110;
            height: 110;
            position: relative;
            margin-left: 110px;
            margin-top: 660px;
            margin: 0px 0px 0px 0px;
            background-color: red;
            border-radius: 25px;
        }
    </body>
</html>

试试看
试一试
这里的第一个问题是，您的代码中有许多主要错误，例如宽度：110
而不是宽度：110px
，以及大量重复。我已经整理了代码，但不清楚你到底想要什么。我猜您希望框在水平线上，而不是在一列中，因此在混合中也添加了float:left
。如果这不是您想要的，请澄清：

div{宽度：110px；高度：110px；边距：0px；边框半径：25px；浮点：左；}
div:first child{背景：红色；}
第n个子（2）{背景：橙色；}
第n个子（3）{背景：黄色；}
第n个子（4）{背景：绿色；}
第n个子（5）{背景：蓝色；}
第n个子组（6）{背景：紫色；}
这里的第一个问题是，您的代码中有许多主要错误，例如宽度：110
而不是宽度：110px
，以及大量重复。我已经整理了代码，但不清楚你到底想要什么。我猜您希望框在水平线上，而不是在一列中，因此在混合中也添加了float:left
。如果这不是您想要的，请澄清：

div{宽度：110px；高度：110px；边距：0px；边框半径：25px；浮点：左；}
div:first child{背景：红色；}
第n个子（2）{背景：橙色；}
第n个子（3）{背景：黄色；}
第n个子（4）{背景：绿色；}
第n个子（5）{背景：蓝色；}
第n个子组（6）{背景：紫色；}
这就是您的代码的实际外观？请在做之前先学习，这会让你更容易过渡到网页设计！这就是你的代码实际的样子？请在做之前先学习，这会让你更容易过渡到网页设计！ralph.m，谢谢你，你拿走了我的很多密码。。。但你从来没有真正回答过我的问题。我的问题是如何制作一个新的专栏，而不必一次又一次地写六个div。我不知道这是否可行，但我认为是的。我希望我的问题现在看起来更清楚，因为问题有点模糊，所以答案是无用的。您可以编写一个适用于许多HTML元素的小CSS，但反过来不行。您需要使用JavaScript之类的东西来动态创建更多的div。否则，您需要将div添加到HTML中。感谢您的澄清。ralph.m，谢谢您，您删除了我的很多代码。。。但你从来没有真正回答过我的问题。我的问题是如何制作一个新的专栏，而不必一次又一次地写六个div。我不知道这是否可行，但我认为是的。我希望我的问题现在看起来更清楚，因为问题有点模糊，所以答案是无用的。您可以编写一个适用于许多HTML元素的小CSS，但反过来不行。您需要使用JavaScript之类的东西来动态创建更多的div。否则，您需要将div添加到HTML中。感谢您的澄清。
div {display:inline-block;}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

    div {width: 110px; height: 110px; margin: 0px; border-radius: 25px; float: left;}
    div:first-child{background: red;} 
    div:nth-child(2){background: orange;}
    div:nth-child(3){background: yellow;}
    div:nth-child(4){background: green;}
    div:nth-child(5){background: blue;}
    div:nth-child(6){background: purple;}

</style>

</head>

<body>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
</body>
</html>