Html 如何解决这个菜单？_Html_Css

Html 如何解决这个菜单？

html css

Html 如何解决这个菜单？,html,css,Html,Css,我正在创建的页面有这个问题以下是html的代码： <!DOCTYPE html> 我怎样才能使我的内容放在菜单后面，而不是菜单下面由于导航位置固定，因此必须使用填充或边距向下推送内容。首先将正文边距设置为0。然后加垫面：60px；到div#接口。这应该是一个很好的开端。当然，试着学习一些关于块元素、内联元素、浮动元素的知识，并检查它们在布局方面的不同行为。您需要为div\interface div#interface{ width: 900px;

我正在创建的页面有这个问题

以下是html的代码：

<!DOCTYPE html>

我怎样才能使我的内容放在菜单后面，而不是菜单下面

由于导航位置固定，因此必须使用填充或边距向下推送内容。首先将正文边距设置为0。然后加垫面：60px；到div#接口。这应该是一个很好的开端。当然，试着学习一些关于块元素、内联元素、浮动元素的知识，并检查它们在布局方面的不同行为。

您需要为

div\interface

 div#interface{
            width: 900px;
            background: #fff;
            margin: 67px auto 0 auto;
            padding-top: 20px;

        }

我希望这有助于：根据您的要求进行更改。特别是在单独的文件中添加样式。您需要重新排列HTML标记，并将位置添加到

div#interface

我建议将其宽度更改为

100%

以下是工作代码：

  <head>
        <meta charset="UTF-8"/>
        <title>JJ TECH</title>
        <style>
         body{
                    font-family: Arial, sans-serif;
                    background: #370b44;
                }

                div#interface{
                    width: 900px;
                    background: #fff;
                    margin: -20px auto 0 auto;
                    padding: 20px;
                    position:fixed;
                    top:71px;

                }

                p{
                    text-align: justify;
                    text-indent: 30px;

                }


                /*CONFIGURAÇÃO DO MENU*/

                nav#menu h1{
                    display: none;
                }

                nav#menu ul{
                    background-color: rgba(0,0,0,.5);
                    overflow: hidden;
                    list-style: none;
                    display: block;
                    font-size: 13pt;
                    margin: 0;
                    padding: 0;
                    position: fixed;
                    width: 100%;
                    top: 0;
                    left: 0;
                }

                nav#menu li{
                    float: left;
                    /*border-right: 1px solid #555;*/
                }

                nav#menu li:hover:not(.active){
                    background: #000;
                }

                a{
                    display: block;
                    text-decoration: none;
                    color: #fff;
                    padding: 15px;
                }

                .ativo{
                    background: #751891;
                }
        </style>
    </head>

    <body>
     <header id="cabecalho">
                <nav id="menu">
                    <h1>Menu Principal</h1>
                    <ul>
                        <li><a href="index.html" class="ativo">Home</a></li>
                        <li><a href="info.html">Informações</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </header>

        <div id="interface">

            <p>Lorem ipsum dolor sit amet, elit ferri facilisi has an, eos probatus perpetua maluisset ad. Minim ponderum pro ut, cu vim referrentur philosophia, ex posse causae signiferumque mei. Dico erant veniam sea et, ut elitr ponderum delicata sed. Tation euismod vix ex, usu latine omnesque no. Vel no libris maiestatis.</p>
        </div>
    </body>


JJ技术
身体{
字体系列：Arial，无衬线；
背景：#370b44；
}
div#接口{
宽度：900px；
背景：#fff；
裕度：-20px自动0自动；
填充：20px；
位置：固定；
顶部：71px；
}
p{
文本对齐：对齐；
文本缩进：30px；
}
/*配置菜单*/
导航菜单h1{
显示：无；
}
导航菜单{
背景色：rgba（0,0,0,5）；
溢出：隐藏；
列表样式：无；
显示：块；
字号：13pt；
保证金：0；
填充：0；
位置：固定；
宽度：100%；
排名：0；
左：0；
}
导航菜单{
浮动：左；
/*右边框：1px实心#555*/
}
导航菜单li:悬停：未（.active）{
背景：#000；
}
a{
显示：块；
文字装饰：无；
颜色：#fff；
填充：15px；
}
阿维奥先生{
背景：#751891；
}
菜单负责人





我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是，我的观点是错误的。这是一个非常有趣的故事。这是一个很好的例子，通常是拉丁美洲的omnesque no.Vel no libris maiestatis

 div#interface{
            width: 900px;
            background: #fff;
            margin: 67px auto 0 auto;
            padding-top: 20px;

        }

  <head>
        <meta charset="UTF-8"/>
        <title>JJ TECH</title>
        <style>
         body{
                    font-family: Arial, sans-serif;
                    background: #370b44;
                }

                div#interface{
                    width: 900px;
                    background: #fff;
                    margin: -20px auto 0 auto;
                    padding: 20px;
                    position:fixed;
                    top:71px;

                }

                p{
                    text-align: justify;
                    text-indent: 30px;

                }


                /*CONFIGURAÇÃO DO MENU*/

                nav#menu h1{
                    display: none;
                }

                nav#menu ul{
                    background-color: rgba(0,0,0,.5);
                    overflow: hidden;
                    list-style: none;
                    display: block;
                    font-size: 13pt;
                    margin: 0;
                    padding: 0;
                    position: fixed;
                    width: 100%;
                    top: 0;
                    left: 0;
                }

                nav#menu li{
                    float: left;
                    /*border-right: 1px solid #555;*/
                }

                nav#menu li:hover:not(.active){
                    background: #000;
                }

                a{
                    display: block;
                    text-decoration: none;
                    color: #fff;
                    padding: 15px;
                }

                .ativo{
                    background: #751891;
                }
        </style>
    </head>

    <body>
     <header id="cabecalho">
                <nav id="menu">
                    <h1>Menu Principal</h1>
                    <ul>
                        <li><a href="index.html" class="ativo">Home</a></li>
                        <li><a href="info.html">Informações</a></li>
                        <li><a href="contato.html">Contato</a></li>
                    </ul>
                </nav>
            </header>

        <div id="interface">

            <p>Lorem ipsum dolor sit amet, elit ferri facilisi has an, eos probatus perpetua maluisset ad. Minim ponderum pro ut, cu vim referrentur philosophia, ex posse causae signiferumque mei. Dico erant veniam sea et, ut elitr ponderum delicata sed. Tation euismod vix ex, usu latine omnesque no. Vel no libris maiestatis.</p>
        </div>
    </body>