Question

我的html页面出现问题。当我缩小或缩小时，它的设计制动。请帮我找一个解决方案。

html { 
    /*position:relative;*/
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:URL(IN_2.jpg);
    /*background-image: url("IN_2.jpg") no-repeat-x no-repeat-y;*/
    background-size:cover;
    /*opacity:0.9;*/
    margin: auto;
}
h1
{
    /*position:relative;*/
    margin-left:520px;
    font-family:Lucida Sans Unicode,Serif;
    font-size:35px;
    color:WHITE;
    opacity:0.4;
    size:normal;
     margin: auto;
}


#textbox
{
position:relative;
   top:100px;
    left:510px;
    margin: auto;
}

#textbox1
{
position:relative;
   top:110px;
    left:510px;
    margin: auto;
}

.inputs {
    background:white;
    font-size: 1em;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 50px;
    border: non;
    padding: 13px 10px;
    /* margin-bottom: 20px;*/
    box-shadow: inset 0 2px 3px rgba( 0, 0, 0,0.2);
    /*position:500 500;*/
    z-index:1;
}

.inputs:focus 
{
    background: #fff;

    box-shadow: 0 0 0 3px PINK, inset 0 0px 2px rgba( 0, 0, 0, 0.4 ), 0px 5px 5px rgba( 0, 0, 0, 0.15 );
    outline:10px;
}

div {
    width: 300px;
    height: 400px;
    background-color:#F0F0F0;
    border-radius: 50px;
    padding-right:100px;
      position: relative;
    left: 5px;
    top:-100px;
    z-index:-1;
    margin: auto;
    box-shadow: 5px 5px 50px BLACK;

}

<!DOCTYPE html> 
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">a
<meta name="HandheldFriendly" content="true"/>
<link rel="stylesheet" type="text/css" href="style1.css"/>
</head>
<body>
<h1>Helping Hand</h1>
<!--<input type="button" id="register" value="Register Here"/>-->
<form action="" >               
    <input  type="text" class="inputs" placeholder="e-mail" id="textbox"/> 
<br>
<br>
<input type="password" class="inputs" placeholder="Password" id="textbox1"/> 
<br>
<br>
 <button class="button"> <a href="register.html"> <span>  LogIn </span> </a> </button> 
<button class="button" ><span>  Register  </span></button> 
</form>
<div>
</div>

</body>
</html>

<!DOCTYPE html> 
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">a
<meta name="HandheldFriendly" content="true"/>
<link rel="stylesheet" type="text/css" href="style1.css"/>
</head>
<body>
<h1>Helping Hand</h1>
<!--<input type="button" id="register" value="Register Here"/>-->
<form action="" >               
    <input  type="text" class="inputs" placeholder="e-mail" id="textbox"/> 
<br>
<br>
<input type="password" class="inputs" placeholder="Password" id="textbox1"/> 
<br>
<br>
 <button class="button"> <a href="register.html"> <span>  LogIn </span> </a> </button> 
<button class="button" ><span>  Register  </span></button> 
</form>
<div>
</div>

</body>
</html>

CSS文件

html { 
    /*position:relative;*/
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:URL(IN_2.jpg);
    /*background-image: url("IN_2.jpg") no-repeat-x no-repeat-y;*/
    background-size:cover;
    /*opacity:0.9;*/
    margin: auto;
}
h1
{
    /*position:relative;*/
    margin-left:520px;
    font-family:Lucida Sans Unicode,Serif;
    font-size:35px;
    color:WHITE;
    opacity:0.4;
    size:normal;
     margin: auto;
}


#textbox
{
position:relative;
   top:100px;
    left:510px;
    margin: auto;
}

#textbox1
{
position:relative;
   top:110px;
    left:510px;
    margin: auto;
}

.inputs {
    background:white;
    font-size: 1em;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 50px;
    border: non;
    padding: 13px 10px;
    /* margin-bottom: 20px;*/
    box-shadow: inset 0 2px 3px rgba( 0, 0, 0,0.2);
    /*position:500 500;*/
    z-index:1;
}

.inputs:focus 
{
    background: #fff;

    box-shadow: 0 0 0 3px PINK, inset 0 0px 2px rgba( 0, 0, 0, 0.4 ), 0px 5px 5px rgba( 0, 0, 0, 0.15 );
    outline:10px;
}

div {
    width: 300px;
    height: 400px;
    background-color:#F0F0F0;
    border-radius: 50px;
    padding-right:100px;
      position: relative;
    left: 5px;
    top:-100px;
    z-index:-1;
    margin: auto;
    box-shadow: 5px 5px 50px BLACK;

}

输出html文件：

不缩小

缩小

Answer 1

你必须制作一个div，在它里面它将是你的形式，然后确定位置，我选择亲戚。

这是代码：

＆＃13;

html {
    /*position:relative;*/
    left: 0;
    right: 0;
    background: url(IN_2.jpg);
    /*background-image: url("IN_2.jpg") no-repeat-x no-repeat-y;*/
    background-size: cover;
    /*opacity:0.9;*/
    margin: auto;
}

h1 {
    /*position:relative;*/
    margin-left: 520px;
    font-family: Lucida Sans Unicode, Serif;
    font-size: 35px;
    color: WHITE;
    opacity: 0.4;
}

#textbox {
    position: relative;
    top: 10px;
    left: 20px;
    margin: auto;
}

#textbox1 {
    position: relative;
    top: 10px;
    left: 20px;
    margin: auto;
}

.inputs {
    background: white;
    font-size: 1em;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 50px;
    border: none;
    padding: 13px 10px;
    /* margin-bottom: 20px;*/
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2);
    /*position:500 500;*/
    z-index: 1;
}

.inputs:focus {
    background: #fff;

    box-shadow: 0 0 0 3px PINK, inset 0 0 2px rgba(0, 0, 0, 0.4), 0 5px 5px rgba(0, 0, 0, 0.15);
    outline: 10px;
}

#form {
    width: 300px;
    height: 400px;
    background-color: #F0F0F0;
    border-radius: 50px;
    padding-right: 100px;
    position: relative;
    left: 5px;
    top: -100px;
    z-index: -1;
    margin: auto;
    box-shadow: 5px 5px 50px BLACK;

}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    a
    <meta name="HandheldFriendly" content="true"/>
    <link rel="stylesheet" type="text/css" href="style1.css"/>
</head>
<body>
<h1>Helping Hand</h1>
<!--<input type="button" id="register" value="Register Here"/>-->
<form action="">
    <div id="form">
        <input type="text" class="inputs" placeholder="e-mail" id="textbox"/>
        <br>
        <br>
        <input type="password" class="inputs" placeholder="Password" id="textbox1"/>
        <br>
        <br>
    </div>
</form>
<button class="button"><a href="register.html"> <span>  LogIn </span> </a></button>
<button class="button"><span>  Register  </span></button>
</body>
</html>

＆＃13;

HTML设计被打破了

1 个答案: