Question

由于某种原因，我的div用户名没有出现。我试图创建一个网站，我似乎无法弄清楚我的代码有什么问题。如果我的代码没有问题可以是netbeans吗？谢谢！

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style>
          #header{
           z-index: -1;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 10%;
       background-color: #002EE4; 
       border-radius: 3px;


        }
        #logo{
           width: 80px;
           height: 75px;   
           z-index: 1;
        }
           #loginpic{
            position: absolute;
            left: 700px;
            top: 105px;
            width: 215px;
            height: 215px;


        }
        #name{
            position: relative;
            margin-left: 640px;
           margin-top: 250px;
            font-size: 18px;
        }
        #nm-input{
            font-size: 18px;
             position: relative;
            margin-left: 700px;
             margin-bottom: 500px;
            bottom: 25px;
             background-color: rgb(220,220,220);
        }
        #surname{
            z-index: 1;
           position: relative;
            margin-left: 640px;
           margin-top: 250px;
            font-size: 18px;

        }
        #username{


        }

    </style>
</head>
<body>

         <div id="header"></div>
      <img id="logo" src="BrainNetwork.png"/>
       <img id="loginpic" src="BrainNetwork.png"/>
    <form>
        <div id="name">Name:</div>
        <input id="nm-input" type="text"  name="Name"/>
        <div>Username</div>


    </form>

</body>

Answer 1

显示字段，只需滚动到浏览器的右上角即可。并修改您的约束。用。替换你的CSS。

   #name{
            position: r;
            font-size: 18px;
        }

 #nm-input{
            font-size: 18px;
             position: relative;
            bottom: 25px;
             background-color: rgb(220,220,220);
        }

Answer 2

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <style>
    #header {
      z-index: -1;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 10%;
      background-color: #002EE4;
      border-radius: 3px;
    }
    
    #logo {
      width: 80px;
      height: 75px;
      z-index: 1;
    }
    
    #loginpic {
      position: absolute;
      left: 700px;
      top: 105px;
      width: 215px;
      height: 215px;
    }
    
    #name {
      position: relative;
      margin-left: 0px;
      margin-top: 20px;
      font-size: 18px;
    }
    
    #nm-input {
      font-size: 18px;
      position: relative;
      margin-left: 50px;
      margin-bottom: 50px;
      bottom: 25px;
      background-color: rgb(220, 220, 220);
    }
    
    #surname {
      z-index: 1;
      position: relative;
      margin-left: 640px;
      margin-top: 250px;
      font-size: 18px;
    }
    
    #username {}
  </style>
</head>

<body>

  <div id="header"></div>
  <img id="logo" src="BrainNetwork.png" />
  <img id="loginpic" src="BrainNetwork.png" />
  <form>
    <div id="name">Name:</div>
    <input id="nm-input" type="text" name="Name" />
    <div>Username</div>
  </form>

</body>

</html>

您的准则工作正常。我刚刚更改了margin-left和margin-top属性的值。我想你想嵌入一些表格。最好使用表格标签。

Answer 3

现在它正在检查

<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style>
          #header{
           z-index: -1;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 10%;
       background-color: #002EE4; 
       border-radius: 3px;


        }
        #logo{
           width: 80px;
           height: 75px;   
           z-index: 1;
        }
           #loginpic{
            position: absolute;
            left: 700px;
            top: 105px;
            width: 215px;
            height: 215px;


        }
        #name{
            position: relative;
            margin-left: 640px;
           margin-top: 250px;
            font-size: 18px;
        }
        #nm-input{
            font-size: 18px;
             position: relative;
            margin-left: 700px;
             margin-bottom: 500px;
            bottom: 25px;
             background-color: rgb(220,220,220);
        }
        #surname{
            z-index: 1;
           position: relative;
            margin-left: 640px;
           margin-top: 250px;
            font-size: 18px;

        }
        #username {
          min-width: 50%;
          min-height: 50%;
          background: red;
          z-index: 10;
        }

    </style>
</head>
<body>

    <div id="header"></div>
      <img id="logo" src="BrainNetwork.png"/>
       <img id="loginpic" src="BrainNetwork.png"/>
    <form>
        <div id="name">Name:</div>
        <input id="nm-input" type="text"  name="Name"/>
        <div id="username">Username</div>


     </form>

</body>

Answer 4

margin-bottom: 500px;中有#nm-input。您的用户名是500px以下，可能您只是看不到它。

HTML元素没有出现

4 个答案: