Разделение страницы и просмотр раздела

0

Я просто хочу просмотреть разделы, которые я сделал на странице, но на странице ничего не видно. Что не так с моим кодом?

Я просто хочу, чтобы то, что я разделил, должно отображаться на странице без содержания. Я использую хром.

<!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>
  • 0
    Ваши div'ы, вероятно, присутствуют, просто в них нет никакого реального содержания. Вам нужно добавить текст или другие визуальные элементы, чтобы увидеть что-нибудь
  • 0
    Как я могу сделать это без контента?
Показать ещё 4 комментария
Теги:

4 ответа

2
Лучший ответ

Если вы добавите &nbsp; в элементах div, чтобы увидеть фон, вы можете видеть цвета без фактического содержания в нем.

<div id="main">
    <div class="header">
        <div class="icon">&nbsp;</div>
        <div class="menu">&nbsp;</div>
    </div>
    <div class="content">&nbsp;</div>
</div>
Поделиться
  • 1
    Это действительно сработало :)
  • 0
    Можете ли вы сказать мне, почему это не на всей странице, даже если я сделал ширину и высоту 100%
Показать ещё 5 комментариев
1

Это даст вам базовую рамку вокруг main div и окрасит ее в зеленый цвет. Вы можете делать похожие вещи для других, чтобы показать, где размещается каждый div.

.main {
    border-style:solid;
    border-width:1px;
    height: 10px;
    background-color: green;
}
Поделиться
  • 0
    Что делать, если я хочу это на всей странице? как я могу сделать это с процентами по ширине?
0

Если вы хотите увидеть div без добавления текста, вы должны указать конкретную height.

.main .header .icon {
     width: 90%;
     margin-left: 5%;
     height: 30px;
}
Поделиться
0

Измените.main на id.

Замените.main на #main соответственно.

Поделиться
  • 0
    Я не думаю, что это сработает. Это не имеет смысла.
  • 0
    Я попробовал сам, синий фон обнаружился с контейнером внутри. Сначала попробуйте, а затем дайте мне знать снова.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню