html - 我的 html 表单和元素重叠并使我的页面不直观-6ren

html - 我的 html 表单和元素重叠并使我的页面不直观

转载作者：太空宇宙更新时间：2023-11-04 10:33:48

我正在尝试使我的表单响应 css，因为当我调整大小时它们会重叠。我试过用表格划分页面，但还是不行。

这是我的 html 和代码:

   <html>
    <head>
        <title>Login Page</title>
        <link rel="stylesheet" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>

    <header class="header">
    <h1 id="text" href="#a">Institutional Review Board  </h1> <h4 id="text">  Ashesi</h4>
  </header>


     <div class="div">
      <fieldset class="section"> 
       </fieldset>
       <fieldset class="section2">
           <h1 id="text" style="font-size: 40px;"> Welcome to the Ashesi IRB. </h1>

    <h2 id="text"> Sign In and Apply to Gain Permission to use Human Subjects In Your Research Work...</h2>
       </fieldset>
        </div>

        <form action='userlogin.php' method='GET'>

            <fieldset class="account-info">
                <label>
                    ID
                    <input type="text" name="id" required>
                </label>
                <label>
                    Password
                    <input type="password" name="password" required>
                </label>
            </fieldset>
            <fieldset class="account-action">
                <input class="btn" type="submit" name="submit" value="Login">
                <div class="change_link">
                Not a member yet?
                <a href="usersadd.php" >Join Now</a>
            </div>
            </fieldset> 
        </form>
    </body>
</html>

这是我的 CSS 代码:

form {
    margin-bottom: 22px;
    border: 1px solid #c6c7cc;
    border-rzadius: 5px;
    font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
    overflow: hidden;
    width: 240px;
    position: absolute;
    top: 30%;
    left: 70%; 
}
#text
{
color:white; 
text-align: left;
font-weight: bold;
display: inline;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

fieldset {
padding: 20px 20px 0 20px;
border:0;
margin: 0;
padding: 0;
}

.header
{
text-align: left;
height= 400px;
background: linear-gradient(#CC0000 , #990000);
padding:5px;
border:1px solid #CCC;
margin:0px auto;
}

.div{
background-image: url("day.jpg"); 
height:570px;
background-attachment: fixed;
background-attachment: fixed;

}

input {
border-radius: 5px;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
}

.section{
 padding :20px 20px 0 20px;
 font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
 width: 500px;
 height:400px;
 background-color: #C0C0C0;
 border: 1px solid black;
 opacity: 0.5;
 float: center;
 position: absolute;
 top: 20%;
 left: 15%;
 }
 .section2{
 padding :20px 20px 0 20px;
 font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
 width: 500px;
 height:400px;
 float: center;
 position: absolute;
 top: 20%;
 left: 15%;
}

.account-info {
 padding: 20px 20px 0 20px;
 background: linear-gradient(#49708f, #293f50);

 }

.account-info label {
color: #ffffff;
 display: block;
font-weight: bold;
margin-bottom: 20px;
}

.account-info input {
 background: #fff;
 border: 1px solid #c6c7cc;
 box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
 color: #636466;
 padding: 6px;
 margin-top: 6px;
 width: 100%;
}

.account-action {
background: #F8F8F8 ;
border-top: 1px solid #c6c7cc;
padding: 20px;
}


.account-action .btn {
background: linear-gradient(#49708f, #293f50);
border: 0;
color: #fff;
cursor: pointer;
font-weight: bold;
float: right;
padding: 8px 16px;
}

.account-action label {
color: #7c7c80;
font-size: 12spx;
float: left;
margin: 10px 0 0 20px;
}

.change_link{
color: #395870;
display: block;
font-weight: bold;
margin-bottom: 20px;
}

最佳答案

这是我给你的两分钱。

首先，您的 css 在声明高度时出错。

这是HTML

 <html>
<head>
    <title>Login Page</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<div>
    <header class="header">
        <h1 id="text" href="#a">Institutional Review Board  </h1> <h4 id="text">Ashesi</h4>
</header>
</div>

<div class="div" style="position: relative;">
  <fieldset class="section"> 
  </fieldset>
  <fieldset class="section2">
   <h1 id="text" style="font-size: 40px;"> Welcome to the Ashesi IRB. </h1>

   <h2 id="text"> Sign In and Apply to Gain Permission to use Human Subjects In Your Research Work...</h2>
   </fieldset>
</div>

<div>
   <form action='userlogin.php' method='GET'>

    <fieldset class="account-info">
    <label>ID
        <input type="text" name="id" required>
    </label>
    <label>Password
        <input type="password" name="password" required>
    </label>
</fieldset>
<fieldset class="account-action">
    <input class="btn" type="submit" name="submit" value="Login">
    <div class="change_link">
             Not a member yet?
        <a href="usersadd.php" >Join Now</a>
    </div>
</fieldset> 
</form>
</div>
</body>
</html>

CSS:

fieldset {
padding: 20px 20px 0 20px;
border: 0;
margin: 0;
padding: 0;
}
.header {
text-align: left;
height: 100px;
background: linear-gradient(#CC0000, #990000);
padding: 5px;
border: 1px solid #CCC;
margin: 0px auto;
}
.div {
background-image: url("day.jpg");
height: 570px;
background-attachment: fixed;
}
input {
border-radius: 5px;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
}
.section {
padding: 20px 20px 0 20px;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 500px;
height: 400px;
background-color: #C0C0C0;
border: 1px solid black;
opacity: 0.5;
float: center;
position: absolute;
top: 20%;
left: 15%;
}
.section2 {
padding: 20px 20px 0 20px;
font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 500px;
height: 400px;
float: center;
position: absolute;
top: 20%;
left: 15%;
}
.account-info {
padding: 20px 20px 0 20px;
background: linear-gradient(#49708f, #293f50);
}
.account-info label {
color: #ffffff;
display: block;
font-weight: bold;
margin-bottom: 20px;
}
.account-info input {
background: #fff;
border: 1px solid #c6c7cc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
color: #636466;
padding: 6px;
margin-top: 6px;
width: 100%;
}
.account-action {
background: #F8F8F8;
border-top: 1px solid #c6c7cc;
padding: 20px;
}
.account-action .btn {
background: linear-gradient(#49708f, #293f50);
border: 0;
color: #fff;
cursor: pointer;
font-weight: bold;
float: right;
padding: 8px 16px;
}
.account-action label {
color: #7c7c80;
font-size: 12spx;
float: left;
margin: 10px 0 0 20px;
}
.change_link {
color: #395870;
display: block;
font-weight: bold;
margin-bottom: 20px;
}