Question

我只想查看我在页面上所做的分歧，但页面上没有任何内容。我的代码出了什么问题？

我只是希望我所分割的内容应该在没有内容的页面上显示。我正在使用chrome。

<!DOCTYPE html>
<html>
    <head>
    <style>
        .main {
            width: 100%;
            height: 100%;
            background: -webkit-linear-gradient(#029CC9, #005077); /* For Safari */
            background: -o-linear-gradient(#029CC9, #005077); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(#029CC9, #005077); /* For Firefox 3.6 to 15 */
            background: linear-gradient(#029CC9, #005077); /* Standard syntax (must be last) */
        }

        .main .header .icon {
            width: 90%;
            margin-left: 5%;
        }

        .main .header .menu {
            width: 90%;
            margin-left: 5%;
        }

        .main .content {
            background-color: lightgrey;
        }

    </style>
</head>
<body>

    <div class="main">
        <div class="header">
            <div class="icon"></div>
            <div class="menu"></div>
        </div>
        <div class="content"></div>
    </div>

</body>
</html>

Answer 1

如果您在div元素中添加 以查看背景，则可以看到颜色而不包含任何实际内容。

<div id="main">
    <div class="header">
        <div class="icon">&nbsp;</div>
        <div class="menu">&nbsp;</div>
    </div>
    <div class="content">&nbsp;</div>
</div>

Answer 2

这将为您提供main div周围的基本边框，并将其涂成绿色。你可以为其他人做类似的事情，以显示每个div的位置。

.main {
    border-style:solid;
    border-width:1px;
    height: 10px;
    background-color: green;
}

Answer 3

将.main更改为id。

分别用#main替换.main。

Answer 4

如果您想在不添加文字的情况下查看div部分，则必须提及特定的height。

.main .header .icon {
     width: 90%;
     margin-left: 5%;
     height: 30px;
}

划分页面并查看分区

4 个答案: