如何解決這個菜單？

我遇到了這個問題，我正在創建一個頁面。 screenshot 如何解決這個菜單？

下面是HTML的代碼：

<!DOCTYPE html>

<head> 
    <meta charset="UTF-8"/> 
    <title>JJ TECH</title> 
    <link rel="stylesheet" href="_css/estilo.css"/> 
</head> 

<body> 
    <div id="interface"> 
     <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> 

     <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>

和CSS：

@charset 「UTF-8」;

  body{ 
       font-family: Arial, sans-serif; 
       background: #370b44; 
      } 

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

      } 

      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; 
      }

如何讓我的內容在我的菜單後出現，而不是在它之後？

來源

2017-05-26 J.Felipe

你需要更新你的CSS爲div#interface

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

     }

來源

2017-05-26 19:50:33 ISHIDA

由於您的導航位置是固定的，因此您必須使用填充或邊距來下推內容。首先將body margin設置爲0.然後添加padding-top：60px;到div＃界面。這應該是一個很好的先發。當然，試着學習一些關於塊元素，內聯元素，浮動元素以及檢查他們在佈局方面的不同行爲。

來源

2017-05-26 19:45:47

我希望這可以幫助：根據您的要求進行更改。特別在單獨的文件中添加樣式。你需要洗你的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>

來源

2017-05-26 20:06:08

如何解決這個菜單？

回答

相關問題